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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Use a Component with JSX

2:23 with Laura Coronel

JSX lets you define your own tags. A JSX tag can not only represent an HTML element (like <h1>, <span>, and <header>), but it can also represent a user-defined component.

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

    JSX provides the flexibility to define custom tags. 0:00
    A JSX tag can not only represent an HTML element, such as h1 span or 0:05
    header, but it can also represent a user defined component. 0:11
    This means that by creating a component called Header, 0:18
    we can use a header tag whenever we want to display the header component. 0:21
    Let me demonstrate this by rendering the Header component 0:27
    to the page using a JSX tag. 0:32
    In the root.rendermethod, 0:34
    I'll replace the element variable with a self-closing Header tag. 0:36
    It's important to ensure that the tag name exactly matches 0:42
    the name of the corresponding function. 0:45
    Now let's save our changes and switch to the browser. 0:50
    We see the full header component rendered to the screen, and 0:54
    you can see its elements in the element inspector. 0:59
    There are a few important details you should know about JSX tags 1:02
    that refer to react components. 1:07
    Firstly, it's important to note that the capitalization of the tag name is 1:10
    essential for distinguishing custom components from native DOM elements. 1:15
    In JSX, lowercase tag names such as header h1, 1:21
    or span are interpreted as HTML tags. 1:26
    When you see a capitalized JSX tag, 1:30
    it means that the tag is referring to a react component. 1:33
    Secondly, if the component has no children, 1:37
    you can utilize the self-closing form of the tag. 1:41
    For instance, it's acceptable to represent the Header component using opening and 1:45
    closing Header tags like this. 1:51
    The reason you'd write them this way is to provide more JSX tags as the children. 1:53
    This is gonna be useful for 2:00
    displaying nested components which you'll soon learn about. 2:01
    However, since our header component is a self contained header element, 2:05
    we can refer to it using a self closing tag. 2:11
    While not mandatory, 2:15
    it's recommended to include a single space in your self closing JSX tag. 2:16

    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