Rendering of Elements
Learn about React elements in-depth and how to render them in the browser.
We'll cover the following...
React elements
What actually are React elements?
React elements are the smallest building blocks in a React application. They describe what will be rendered on the screen.
Although they sound similar to DOM elements, they differ in one important point: React elements are only simple objects and thus, they are easy to create and highly efficient. Calling React.createElement() to create a React element does not trigger a DOM operation.
Note: React elements are often confused with React components and are used interchangeably. This is incorrect. Elements make up the building blocks of components.
How to render a React element?
We already know how we can create a React element. JSX allows us to save many lines of code by avoiding lengthy React.createElement() calls. But how do we render an element to the screen, i.e., show it in the browser?
To achieve this, we are using the render() method of ReactDOM. Additionally, we need a root node ...