Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Basics

Well done!

You have completed React Basics!

Sign up for Treehouse Back to Library

Understanding JSX

5:52 with Laura Coronel

JSX 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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up