Part 2 : React Render Method with component

In previous article I shown HTML page screen with multiple component placed in HTML page. One of the good thing with react component is, it can be reused in multiple pages and I shown rendering header tag from render method of reactDom. In this article I will show rendering component from render method.
Open CodePen online editor from here

Import React and ReactDom library from JavaScript section, on click settings icon new popup gets open to select library and Babel. I shown selecting library and Babel in details in Part1 article. Let’s write Html, CSS and JavaScript code shown in below screen on CodePen online editor.

Important point to noticed here, referring React and ReactDOM library are understood but why Babel. Babel is pre-processor or you can also call it as next generation JavaScript which allow us to write modern JavaScript code and also rendered the code into browser understandable code. For more details please visit below highlighted URL.

With the help of Babel you can write Advance JavaScript/Next generation JavaScript code which then converted into browser understandable JavaScript with the help of Babel. Babel also play major role in react with JSX (JavaScript XML) which allows to write HTML element inside react component. React component is JavaScript file/function. In short JSX with Babel compiler allows writing HTML in JavaScript code.
In below screen HTML written inside JavaScript function.

Actually HTML inside JavaScript is not actual DOM but it is virtual DOM and render method of ReactDOM library rendered virtual DOM of Component to actual DOM element shown below.