Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The 'react-dom' library provides DOM-specific methods. The one you'll use the most is ReactDOM.render(), which renders React elements to the DOM.
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
You need to sign up for Treehouse in order to download course files.
Sign up