with Jsx

In Jsx

• A css class that we will apply to our HTML element

.blue { color: blue; }

• The component with a p React element that outputs a HTML P element. We style it with a class and a inline styles

const ourP = <p className="blue" style={{textAlign: 'center'}}>Hello World</p>;

• The standard mandatory root DOM node (placeholder for React DOM manipulation)

<div id="root"></div>

• Rendering of the ReactHTML component in the root div defined below

ReactDOM.render(
  ourP,
  document.getElementById('root')
);

• Output:

with Pure Javascript

With createElement, the same example as above.

• The component with a p React element that outputs a HTML P element. We style it with a class and a inline styles

const ourP = React.createElement(
       'p' ,  // the type: the string equivalent of the HTML tag (ie h1, div, ...)
       {  
           className: "blue",
           style: {textAlign: 'center'}
       }, // props are the equivalent of HTML attributes
       ['Hello World'] // children are other react element or a string for a text node
)

• Output: