31:[] 2f:{"title":"w3c React Render","cells":[{"id":0,"value":"md`# w3c React Render\n\n# React Render HTML\n\n[❮ Previous](https://www.w3schools.com/react/react_es6.asp)[Next ❯](https://www.w3schools.com/react/react_jsx.asp)\n\n------\n\nReact's goal is in many ways to render HTML in a web page.\n\nReact renders HTML to the web page by using a function called \\`ReactDOM.render()\\`.\n\n------\n\n## The Render Function\n\nThe \\`ReactDOM.render()\\` function takes two arguments, HTML code and an HTML element.\n\nThe purpose of the function is to display the specified HTML code inside the specified HTML element.\n\n### Example\n\nDisplay a paragraph inside the \"root\" element:\n\n\\`\\`\\`jsx\nReactDOM.render(

Hello

, document.getElementById('root'));\n\\`\\`\\`\n\nThe result is displayed in the \\`\\` element:\n\n\\`\\`\\`html\n\n\n

\n\n\n\\`\\`\\`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"root = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"ReactDOM.render(htm`

Hello

`, root)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md `---\n## The HTML Code\n\nThe HTML code in this tutorial uses JSX which allows you to write HTML tags inside the JavaScript code:\n\nDo not worry if the syntax is unfamiliar, you will learn more about JSX in the next chapter.\n\n### Example\n\nCreate a variable that contains HTML code and display it in the root node:\n\n\\`\\`\\`jsx\nconst myelement = (\n \n \n \n \n \n \n \n \n \n \n

Name
John
Elsa

\n);\n\nReactDOM.render(myelement, document.getElementById('root'));\n\\`\\`\\`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n const root = html`

`;\n const myelement = htm`\n \n \n \n \n \n \n \n \n \n \n

Name
John
Elsa

\n `;\n\n ReactDOM.render(myelement, root);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {htm, React, ReactDOM, d3} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}