Using JSX to compose UI

As introduced in the last section, one of the main benefits of JSX is to make it very easy to build a UI.

In particular, in a React component, you can import other React components, you can embed them, and display them.

A React component is usually created in its own file because that’s how we can easily reuse it (by importing it) in other components.

But a React component can also be created in the same file of another component if you plan to only use it in that component. There’s no “rule” here, you can do what feels best to you.

I generally use separate files when the number of lines in a file grows too much.

To keep things simple let’s create a component in the same App.jsx file.

We’re going to create a WelcomeMessage component:

function WelcomeMessage() {
  return <h1>Welcome!</h1>
}

We define a component as a function that returns some JSX

See? WelcomeMessage is a simple function that returns a line of JSX that represents an h1 HTML element.

We’re going to add it to the App.jsx file.

NOTE: as your app grows you typically put each component in its own file, and import it. But for simple cases, like this, we can define multiple components in a single file.

Now inside the App component JSX, we can add <WelcomeMessage /> to show this component in the user interface:

import './App.css'

function WelcomeMessage() {
  return <h1>Welcome!</h1>
}

function App() {
  return (
    <div className='App'>
      <WelcomeMessage />
    </div>
  )
}

export default App

And here’s the result. Can you see the “Welcome!” message on the screen?

Untitled

We say WelcomeMessage is a child component of App, and App is its parent component.

We’re adding the <WelcomeMessage /> component as if it was part of the HTML language.

That’s the beauty of React components and JSX: we can compose an application interface and use it like we’re writing HTML.

With some differences, as we’ll see in the next lesson.