window.React
and 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.Component
there is also a React.PureComponent
and a so-called Functional component. This is simply a JavaScript function that follows a particular pattern. We are going to look at both of these at a later stage, for now we can neglect them.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 return
value. This value can either be an explicit null
value to show nothing (but not undefined
), another React element, or from Version 16 onward, a string or array.null
as values. The render()
method declaratively describes the current state of our user interface. Everything that is included in our render method right after return
is 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.cloneElement()
and React.isValidElement()
, 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:'div'
, 'span'
or 'p'
but also other React components.React.createElement()
in this form. Facebook has developed its own syntax extension for JavaScript called JSX. JSX reduces a great amount of work and simplifies a lot of work with React. Nevertheless, I am of the opinion that it is good to know of React.createElement()
's existence to understand how JSX works behind the scenes and to reduce the number of errors when debugging.return
value of the render()
method indicates that it will display an element of type div
which shall contain the id hello-world
and the child element (a text node in this case) containing Hello World
.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 HelloWorld
component 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 return
. Calling ReactDOM.render()
with the two parameters as shown above, will insert the React element into the given container.ReactDOM.render()
function for the first time, any possibly existing content in the destination container is being replaced. With every subsequent call, React uses an internal comparison algorithm for best performance and to avoid re-rendering the entire application.ReactDOM.render()
more than once and only use it to initialize our Single Page App to load the page. React never changes the root node itself, only its contents. This means that if our container element has classes, ids or a data-attribute, these will remain intact after calling ReactDOM.render()
.