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
We're going to begin using the React API to create React elements, which are the smallest building blocks of React apps. Once you have a basic understanding of how React describes and creates elements in your UI, it will be a smoother transition into writing components and JSX, the special syntax React uses to create elements and use components.
Resources
Earlier I mentioned that one
of the benefits of using React
0:00
is that it's component based.
0:03
You create your UI as individual
self contained components.
0:05
But we're not going to start
off by writing components.
0:09
You see, at its core,
React is only a library for creating and
0:11
updating HTML elements in your UI,
that's all it does.
0:16
So to better understand
how React creates UI,
0:19
we're going to begin using
the React API to create React elements.
0:22
Which are the smallest
building blocks of React apps.
0:27
Once you have a basic understanding
of how React describes and
0:30
creates elements in your UI,
0:34
it will be a smoother transition into
understanding components and writing JSX.
0:35
The special syntax React uses to
create elements and use components.
0:40
React provides the createElement
function to create and return elements.
0:45
In app.js, the first thing we'll do
is create a new variable named title,
0:50
then we'll call React.createElement.
0:57
createElement accepts three arguments that
define the element you want to create.
1:01
The first argument is the type
of element you want to create.
1:09
This is usually a string which
represents an HTML element or a tag.
1:13
In this case, I want to create an h1
element so I'll pass it the string h1,
1:18
but this could also be div,
span, p, and so on.
1:22
And for readability I'm placing
each argument on a separate line.
1:26
Now the second argument you pass to
React.createElement is an object
1:30
containing any attribute and
value you want to give the element.
1:35
For example to give the h1 element
in id we can later target with CSS,
1:38
I'll pass an object and inside it write
an id property and set it to main-title.
1:44
You can add as many comma separated
properties as you want to this object.
1:52
For instance, I'll add a title attribute
with title and set it to, this is a title.
1:55
Now, if we're not giving
the element any attributes,
2:03
you can pass it an empty object,
or the value null.
2:07
So the third argument you pass to
React.createElement, is the contents or
2:14
children of the element you're creating.
2:18
For instance any text that will display
between the opening and closing h1 tags.
2:21
It could also be more elements
created by React.createElement or
2:26
it could even be null.
2:30
I'll parse it the string,
My First React Element.
2:32
Now what if the first important details
you should know about React is that React
2:41
does not create actual DOM nodes.
2:46
It's not creating in
the way you would expect.
2:48
For instance the title element we
defined is not a real h1 element.
2:51
It's actually an object
that describes a DOM node.
2:56
It's an object representation
of a DOM node.
2:59
To better demonstrate,
3:01
I'll console.log(title) to
see what output we get.
3:03
Over in the browser console we see
the title react.element recreated,
3:07
represented as an object.
3:12
It has several properties like key,
props, and ref.
3:14
Now the important one is to pay attention
to right now our type and props.
3:18
Notice how the value for
type is h1, the value for
3:24
props is an object containing the id and
title properties we passed to
3:27
createElement,, and the value for
children is the string,
3:32
My First React Element,
which we passed as the third argument.
3:36
So, this React element is
an object describing what you want
3:45
to render to the DOM, or
Display on the Screen.
3:49
For example,
when the h1 get's rendered to the DOM,
3:52
we should have a html
element that looks like this.
3:55
The type property, describes what type of
element we want to create in h1 element.
3:59
Props are like the properties or
4:04
attributes of that element in this case
it will have a title and id attributes.
4:06
And the children property string
value will be turned into a text
4:12
node that reads, My First React Element.
4:17
So this concept is the essence of React.
4:20
The elements that React creates
are actually plain JavaScript objects
4:24
that describe the element you'd
like to display to your UI.
4:29
So how does React render a real DOM node?
4:32
You'll learn about that next.
4:35
You need to sign up for Treehouse in order to download course files.
Sign up