Render an Element

You learned that React does not create real DOM nodes. 0:00 By DOM nodes, I mean an actual h1, div, span, or a text node. 0:04 Instead, React creates plain JavaScript objects that describe DOM nodes. 0:08 For example, in the previous video, we used React.createElement 0:13 to create a React element that describes an h1 with an id and 0:19 title attribute and text as its children. 0:23 So how does this object representation of a DOM node get rendered and 0:27 displayed on the page? 0:32 Well, the ReactDOM library, 0:33 included in our project, provides DOM specific methods. 0:35 The one you'll use the most is ReactDOM.render(), 0:39 which renders React elements to the DOM. 0:42 Back in app.js below the title variable, 0:45 let's call ReactDOM.render. 0:50 So this is the function that actually does the creating and updating of the DOM. 0:54 It's what connects React to the DOM. 0:59 Render accepts two arguments. 1:01 The React element or JavaScript object that describes the element you'd like to 1:04 render and the actual HTML element you want to update or render to. 1:09 So to render the title React element to the page, 1:15 let's pass title as the first argument. 1:18 And as the second argument, we'll use the plain JavaScript 1:22 document.getElementById method to target a DOM element with the id root. 1:27 So this is the container element where our code will be rendered by React and 1:33 there is no significance in the id root. 1:38 You'll often see it named app or container, 1:41 you can name it anything you want. 1:43 Next, we'll need to create this root element in our HTML file. 1:46 Open index.html and 1:51 create a div just below the opening body tag and above our scripts. 1:54 Add an id and set it to root. 2:00 And that's really all the work we'll need to do in index.html. 2:04 The React code we write in app.js will be rendered into this root div. 2:08 Or in React terms, this is where we will be mounting our React application. 2:15 Over in the browser when I refresh, 2:20 we see the heading displaying the text on the page. 2:23 And if we inspect the DOM with Chrome dev tools, we see the h1 element with 2:26 the id and title attributes we described with createElement. 2:31 Any existing DOM elements inside the root div will be replaced 2:40 when render is first called. 2:45 So for example, if I add the text Loading inside the div when I refreshed 2:47 the browser, you'll see the text get immediately replaced with the h1. 2:52 So everything inside the root DOM element gets managed by ReactDOM.render. 2:58 Now applications usually consist of more than just a heading. 3:04 So let's create other elements and compose them together. 3:09 I'll create a description element and a header that wraps both the title and 3:12 description. 3:17 So just below the title variable, I'll create a new variable that named desc or 3:18 description, Assign it React.createElement. 3:25 And I wanna create a paragraph so I'll pass the string p as the type argument. 3:32 I'm not gonna assign this element any properties, so 3:37 I'll pass it null as the second argument. 3:41 And as the third or children argument, 3:44 I'll pass it the string I just learned how to 3:48 create a React node and render it into the DOM. 3:53 You can provide the children as any number of arguments after the props argument. 4:03 createElement considers anything after the second argument as children. 4:10 Next, I'll create a header element by declaring a variable 4:15 named header and assigning it React.createElement. 4:21 I want to describe a header element here so 4:29 I'll pass it to string header as the first argument. 4:33 I will pass it null as the second argument since I don't wanna sign 4:37 the header any properties. 4:41 Now this header is going to contain the title and 4:44 description elements we just created. 4:47 So I'll pass it the title and desc variables as the children. 4:50 Finally, let's render the parent header by 4:57 passing the header variable to ReactDOM.render. 5:01 I'll give app.js a save, and over in the browser when I refresh, great. 5:06 We see a header element with child h1 and p elements. 5:12 So the main takeaway here is that React never touches the actual DOM directly. 5:19 It just manages what gets rendered to the DOM and 5:25 what gets updated via reactDOM.render. 5:28 It's not until render that the browser creates actual DOM elements 5:31 like our header and its children. 5:36 So in other words, it's renders job to interpret the element objects and 5:38 create DOM nodes out of them. 5:43 At this point you might be thinking, wow, it took three function calls and 5:49 way too many lines of code just to create three elements. 5:53 How exactly does React make it easier to build and maintain my UI? 5:56 And you're probably right. 6:00 React.createElement doesn't seem all that convenient right now. 6:01 It makes it tricky to visualize the elements you're creating. 6:05 But don't worry, React uses a faster, easier, and 6:09 friendlier way to create elements with a special syntax called JSX. 6:12 You'll learn about it in the next video 6:16