Element

An element in a React JSX file is a single HTML tag. For example:

<h1>Hello world!</h1>

Elements when put together makes up a component.

Component

A React Component is a single individual part of a React App. For Example:

export default function Header() {
    return (
        <div className="header-component">
            <h1>Hello world!</h1>
            <p>This is a header component</p>
        </div>
    )
}

The example above shows a Header Component. It has two element within it. A <h1> and a <p> tag.

This shows that a Component can have multiple elements in it.

Now let’s say we write our Header Component like this:

export default function Header() {
    return (
        <h1>Hello world!</h1>
        <p>This is a header component</p>
    )
}

You’ll get the warning: JSX expressions must have one parent element

What does this mean?

This means that if you need to write more than one element in a component, you must wrap the elements in a parent element like this:

export default function Header() {
    return (
        // this is the parent element
        <div className="header-component">
            // these are child elements
            <h1>Hello world!</h1> // child element 1
            <p>This is a header component</p> // child element 2
        </div>
    )
}

Okay. That’s it for now. But before you go, have you ever come across a component like this ?:

export default function Header() {
    return (
        // this is the parent element
        <>
            // these are child elements
            <h1>Hello world!</h1> // child element 1
            <p>This is a header component</p> // child element 2
        </>
    )
}

Notice the child elements where wrapped in an empty tag <>.

Will this give an error?

What do you think?

According to the React docs, this is what we call React Fragments.

React Fragments let you wrap a list of child elements without the child element being affected by the default styling of the parent element.

And how does it do this? It lets you wrap multiple child elements in an empty tag <>.

The React docs has a very clear and simple example to illustrate this. Please read more about it here: React Fragments.

Thanks for reading. I hope you’ve found this helpful.

I’ll be writing more articles like this so if you found this helpful, do subscribe to my newsletter, follow me here on hashnode or we could connect on twitter @TheReactNewbie.

I created a thread to compile a list of big Terms used in React and their meaning.

This is to help newbies like myself get acquainted with them and use them in our conversations. You can contribute to the thread here

Thank you!

See ya later 👋