React’s goal is in many ways to render HTML in a web page.<\/p>\n
React renders HTML to the web page by using a function called\u00a0 The\u00a0 The purpose of the function is to define the HTML element where a React component should be displayed.<\/p>\n The\u00a0 But render where?<\/p>\n There is another folder in the root directory of your React project, named “public”. In this folder, there is an\u00a0 You’ll notice a single\u00a0 Display a paragraph inside an element with the id of “root”:<\/p>\n The result is displayed in the\u00a0 Note that the element id does not have to be called “root”, but this is the standard convention.<\/span><\/p>\n The HTML code in this tutorial uses JSX which allows you to write HTML tags inside the JavaScript code:<\/p>\n Do not worry if the syntax is unfamiliar, you will learn more about JSX in the next chapter.<\/p>\n Create a variable that contains HTML code and display it in the “root” node:<\/p>\n The root node is the HTML element where you want to display the result.<\/p>\n It is like a\u00a0container<\/em>\u00a0for content managed by React.<\/p>\n It does NOT have to be a\u00a0 The root node can be called whatever you like:<\/p>\n Display the result in the\u00a0 <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"createRoot()<\/code>\u00a0and its method\u00a0render()<\/code>.<\/p>\n
\nThe createRoot Function<\/h2>\n
createRoot()<\/code>\u00a0function takes one argument, an HTML element.<\/p>\nThe render Method<\/h2>\n
render()<\/code>\u00a0method is then called to define the React component that should be rendered.<\/p>\nindex.html<\/code>\u00a0file.<\/p>\n<div><\/code>\u00a0in the body of this file. This is where our React application will be rendered.<\/p>\nExample<\/h3>\n
const container = document.getElementById('root');\r\nconst root = ReactDOM.createRoot(container);\r\nroot.render(<p>Hello<\/p>);<\/pre>\n<div id=\"root\"><\/code>\u00a0element:<\/p>\n<body>\r\n <div id=\"root\"><\/div>\r\n<\/body><\/pre>\n
The HTML Code<\/h2>\n
Example<\/h3>\n
const myelement = (\r\n <table>\r\n <tr>\r\n <th>Name<\/th>\r\n <\/tr>\r\n <tr>\r\n <td>John<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Elsa<\/td>\r\n <\/tr>\r\n <\/table>\r\n);\r\n\r\nconst container = document.getElementById('root');\r\nconst root = ReactDOM.createRoot(container);\r\nroot.render(myelement);<\/pre>\nThe Root Node<\/h2>\n
<div><\/code>\u00a0element and it does NOT have to have the\u00a0id='root'<\/code>:<\/p>\nExample<\/h3>\n
<body>\r\n\r\n <header id=\"sandy\"><\/header>\r\n\r\n<\/body><\/pre>\n
<header id=\"sandy\"><\/code>\u00a0element:<\/p>\nconst container = document.getElementById('sandy');\r\nconst root = ReactDOM.createRoot(container);\r\nroot.render(<p>Hallo<\/p>);<\/pre>\n