window.ReactDOM. Apart from that we only see an empty page here with an empty
<div id="root"></div>. This div is going to be used as our mount node to show our first React component.
React.Component. This transforms our own class into a component that we can use in React. Apart from
React.Componentthere is also a
render()method. This method is necessary to inform React how the component is displayed — we say "rendered" in the React world. A component has to have a
returnvalue. This value can either be an explicit
nullvalue to show nothing (but not
undefined), another React element, or from Version 16 onward, a string or array.
nullas values. The
render()method declaratively describes the current state of our user interface. Everything that is included in our render method right after
returnis what the browser will display after rendering.
render()method at the end of all our methods. This is not mandatory of course but it aids readability. Many renowned engineers in the React scene advocate for this guideline too. The code guidelines by AirBnB also include this rule. Speaking from my own experience here, I can say that it does help to follow this guideline to make your day-to-day React work easier.
render()method of a React component returns a React element in most cases. React elements are the smallest but also most significant building blocks in a React application and describe what a user will see on their screen. Apart from
React.createElement()has been one of of the only 3 top level API methods for a long time. Since then though, a few other methods have been added but they are mainly for performance optimizations.
createElement()method expects 1-n parameters:
'p'but also other React components.
React.createElement()'s existence to understand how JSX works behind the scenes and to reduce the number of errors when debugging.
returnvalue of the
render()method indicates that it will display an element of type
divwhich shall contain the id
hello-worldand the child element (a text node in this case) containing
render()method — the core of ReactDOM in the browser.
render()method does not directly relate to its counterpart used in React components. Using it in this case, enables us to render a React element onto a "root node", meaning to display it on the screen. In our example, we render our
HelloWorldcomponent onto the
<div id="root"></div>. It is important to understand that the root node is not replaced, but that the content is inserted into the container.
render()method, which contains a React element after the
ReactDOM.render()with the two parameters as shown above, will insert the React element into the given container.