Preview
Video Player
00:00
00:00
Understanding JSX
5:52JSX is a syntax extension to the JavaScript language that uses a markup-like syntax to create React elements. Most React developers write their UI using JSX because it resembles writing HTML.
Earlier, I mentioned that one of
the benefits of using React is its
0:00
component-based nature.
0:04
You create your UI as individual,
self-contained components.
0:06
Instead of starting with components,
let's begin by understanding
0:11
how React creates and
updates HTML elements in your UI.
0:16
So to better understand how React creates
UI, we're going to begin using JSX
0:21
to create React elements, which are the
smallest building blocks of React apps.
0:26
JSX is a syntax extension for
JavaScript that allows us to write
0:32
HTML-like code directly
within our JavaScript files.
0:37
It provides a more expressive and
0:41
intuitive way to describe the structure
and content of our user interfaces.
0:44
JSX resembles HTML, but
it's actually transformed into
0:50
regular JavaScript code before
being rendered by React.
0:54
Now let's dive into an example of JSX.
0:59
We can create a React element
using JSX by enclosing it
1:03
within angle brackets,
just like a HTML tag.
1:07
Suppose we want to create a simple
heading element with the text,
1:11
My First React Element.
1:17
We can write it like this, const element =
1:19
<h1> with the text,
My First React Element.
1:23
Here we're using JSX to define
a variable called element that
1:30
represents our heading element.
1:35
Notice how we use HTML-like syntax to
define the element structure and content.
1:38
This makes it easier to visualize and
write our UI code.
1:45
However, it's crucial to understand
that React does not create
1:50
actual DOM nodes as you might expect.
1:54
The element we defined is
not a real h1 element,
1:57
it's an object that describes a DOM node,
2:01
a representation of a DOM
node in JavaScript.
2:05
Let's log the element variable to
the console to see its output.
2:09
In the console,
we see the element variable represented as
2:16
an object with properties like type and
props.
2:20
The type property holds the value h1,
and the props property is an object
2:24
containing the string My First React
Element, which we provided in JSX.
2:29
This concept is the essence of React.
2:37
The elements it creates are plain
JavaScript objects that describe
2:40
the elements to be displayed in the UI.
2:44
To render our JSX element onto the screen,
2:47
we need to utilize React's createRoot API,
which allows us to create a root for
2:51
displaying React elements
inside a browser DOM node.
2:57
To be able to access the createRoot API,
3:02
we'll first need to import it
from the react-dom library.
3:05
I'll copy the import
statement from this page and
3:10
paste it at the top of our main.jsx file.
3:14
Now we can use the createRoot API to
render our element on the screen.
3:19
The createRoot API
creates a React root for
3:25
displaying content within
a browser DOM element.
3:28
We'll store the root in
a variable called root.
3:32
We need to provide createRoot the HTML
element we want to update or render to.
3:38
We want to render our React app inside
the div element in our index.html file.
3:45
We'll use JavaScript's
getElementById method to target
3:53
this element with the ID root.
3:57
So back in our main.jsx file,
we'll pass the HTML DOM element to
4:01
createRoot with document.getElementById,
passing it the ID root.
4:07
This line of code creates a React root for
the div element,
4:16
with the ID root in index.html,
4:21
and React will take over
managing the DOM inside it.
4:24
However, to actually render our
JSX element onto the browser,
4:30
we need to call the render
method on the root variable.
4:34
To render the h1 tag on the page,
4:40
we'll pass the element variable as
an argument to the render method.
4:43
The JSX we pass to root.render will
be rendered into the root div.
4:50
In React terms, this is where
we mount our React application.
4:56
If you check the browser, you'll see the
heading displaying the text on the page.
5:01
If we inspect the DOM
using Chrome DevTools,
5:06
we can observe the h1 element
we described with JSX.
5:09
It's important to note that when
the render method is first called,
5:14
any existing DOM elements
inside root will be replaced.
5:19
For example, if we initially have
the text, loading, inside the div,
5:23
you'll notice that the text will be
immediately replaced with the h1 element.
5:29
React DOM takes control of managing
everything inside the root DOM element.
5:36
By using JSX and
React's createRoot and render methods,
5:43
we can easily create and
render React elements onto the browser.
5:47