Ad

How To Print/log Reactjs Rendered Dom?

- 1 answer

I'm creating a component with ReactJS.

I would see the html react renders with my console, so for example:

 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';

 class CustomComponent extends React.Component {


   render() { return (<div>Custom</div>); }
 }

And instead of:

ReactDOM.render(<CustomComponent />, document.getElementById('app'));

I would do something like:

console.log(<CustomComponent />); 

but when in my console I call:

babel-node myfile.js

I get:

enter image description here

How can I print/log the effective html tags that react renders?

thanks. bye.

Ad

Answer

Use https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring

Now you're just printing the virtual dom representation which need to be transformed to string.

Ad
source: stackoverflow.com
Ad