31:T51b,{ const doc = md` React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. With our knowledge so far, the only way to update the UI is to create a new element, and pass it to \`ReactDOM.render()\`. Consider this ticking clock example: \`\`\`js function tick() { const element = (

Hello, world!

It is {new Date().toLocaleTimeString()}.

); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000); \`\`\` [**Try it on CodePen**](https://reactjs.org/redirect-to-codepen/rendering-elements/update-rendered-element) It calls \`ReactDOM.render()\` every second from a [\`setInterval()\`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. > **Note:** > > In practice, most React apps only call \`ReactDOM.render()\` once. In the next sections we will learn how such code gets encapsulated into [stateful components](https://reactjs.org/docs/state-and-lifecycle.html). > > We recommend that you don’t skip topics because they build on each other.`; return hide_display(option3, doc); }32:[] 2f:{"title":"Rendering Elements","cells":[{"id":2,"value":"md`# Rendering Elements\nhttps://reactjs.org/docs/rendering-elements.html\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof option1 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"{\n const doc = md`\nElements are the smallest building blocks of React apps.\n\nAn element describes what you want to see on the screen:\n\n\\`\\`\\`js\nconst element =

Hello, world

;\n\\`\\`\\`\n\nUnlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.\n\n> **Note:**\n>\n> One might confuse elements with a more widely known concept of “components”. We will introduce components in the [next section](https://reactjs.org/docs/components-and-props.html). Elements are what components are “made of”, and we encourage you to read this section before jumping ahead.\n\n`;\n return hide_display(option1, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"{\n const root = html`

`;\n\n const element = htm`

Hello World

`; // ***\n \n ReactDOM.render(element, root);\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"md` ## Rendering an Element into the DOM\nhttps://reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof option2 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"\n{\n const doc = md`\nLet’s say there is a \\`div\\` somewhere in your HTML file:\n\n\\`\\`\\`html\n

\n\\`\\`\\`\n\nWe call this a “root” DOM node because everything inside it will be managed by React DOM.\n\nApplications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.\n\nTo render a React element into a root DOM node, pass both to \\`ReactDOM.render()\\`:\n\n\n\n\\`\\`\\`js\nconst element =

Hello, world

;\nReactDOM.render(element, document.getElementById('root'));\n\\`\\`\\`\n\n\n\n[**Try it on CodePen**](https://reactjs.org/redirect-to-codepen/rendering-elements/render-an-element)\n\nIt displays “Hello, world” on the page.\n`;\n return hide_display(option2, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"{\n const root = html`

`;\n\n const element = htm`

Hello World

`; \n \n ReactDOM.render(element, root); // ***\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## Updating the Rendered Element\nhttps://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof option3 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"{\n const root = html`

`;\n \n function tick() {\n const element = htm`\n

Hello, world!

It is ${new Date().toLocaleTimeString()}.

\n `;\n ReactDOM.render(element, root);\n }\n\n setInterval(tick, 1000);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"{\n const root = html`

`;\n \n function tick() {\n const element = htm`\n

Hello, world!

It is ${new Date().toLocaleTimeString()}.

\n `;\n ReactDOM.render(element, root);\n }\n \n // to replace setTimeout or setInterval\n while (true) { \n await Promises.tick(1000); \n tick();\n yield root;\n }\n \n // return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`\n## React Only Updates What’s Necessary\nhttps://reactjs.org/docs/rendering-elements.html#react-only-updates-whats-necessary\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof option4 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"{\n const doc = md`\nReact DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.\n\nYou can verify by inspecting the [last example](https://reactjs.org/redirect-to-codepen/rendering-elements/update-rendered-element) with the browser tools:\n\n![DOM inspector showing granular updates](https://reactjs.org/granular-dom-updates-c158617ed7cc0eac8f58330e49e48224.gif)\n\nEven though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.\n\nIn our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.\n`;\n return hide_display(option4, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { none_doc, hide_display, React, ReactDOM, htm } from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}