React Tutorials
React Introduction
React Get Started
React Render HTML
React JSX
React Components
React Class
React Props
React Events
React Conditionals
React Lists
React Forms
React Router
React Memo
React CSS Styling
React Sass Styling
React ES6
React ES6
ES6 Classes
ES6 Arrow Functions
ES6 Variables
ES6 Array Methods
ES6 Destructing
ES6 Spread Operator
ES6 Modules
ES6 Ternary Operator
React Hooks
What is Hook?
useState
useContext
useRef
useReducer
useCallback
useMemo
Custom Hooks
Previous
React Render HTML
React's goal has many ways to render HTML on a web page.
React delivers HTML to a web page using a function called ReactDOM.render().
The Render Function
The ReactDOM.render() function handles two arguments, HTML code and HTML element.
The purpose of the function is to display the specified HTML code within the specified HTML element.
But give where?
There is another folder in your root directory for your React project, called "public". In this folder, there is an index.html file.
You will notice <div> one in the body of this file. This is where our React application will be made.
Example
Display a paragraph inside an element with the id of "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));The result is displayed in the <div id="root"> element:
<body>
<div id="root"></div>
</body>
Note that the feature id does not need to be called "root", but this is a standard rule.
The HTML Code
The HTML code in this tutorial uses JSX that lets you write HTML tags inside JavaScript code:
Don't worry if syntax is unfamiliar, you will learn more about JSX in the next chapter.
Example
Create a variable that contains HTML code and display it in the "root" node:
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
The Root Node
The root node is the HTML element where you want to display the result.
It is similar to the React-managed content container.
It MUST NOT be <div> feature and MUST NOT have id = 'root':
Example
<body>
<header id="sandy"></header>
</body>
Display the result in the <header id="sandy"> element:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));