JSX components in React

What are React components?

Components are the building blocks of a React application.

A component is a reusable piece of code that describes how a part of the user interface (UI) should look and behave.

Components can be nested inside other components to create complex user interfaces.

In React, it is best to create components using functions. These are called, unsurprisingly enough, “functional components”.

Here’s an example of a simple functional component:

function Greeting() {
  return <h1>Hello</h1>
}

When this component is rendered, it will display a <h1> element with the text “Hello”.

Embedding components

You can render this component in another component like this:

function Greeting() {
  return <h1>Hello</h1>
}

function ProfileRoute() {
  return (
    <div>
      <Greeting />
    </div>
  )
}

When ProfileRoute is rendered, it will display a <div> element containing the <Greeting> component.

Importing components from other files

Better still, you can define your components in completely separate files and import them into the file where you want to use them.

Here’s an example of how you can do this:

Greeting.tsx

function Greeting() {
  return <h1>Hello</h1>
}

export default Greeting;

ProfileRoute.tsx

import Greeting from './Greeting';

function ProfileRoute() {
return (
  <div>
    <Greeting />
  </div>
)
};

Challenge

Try it yourself

Look carefully at the code snippet below inside the ‘Code Playground’ box.

Click between the two files, App.tsx and Greeting.tsx. You’ll notice that only the App.tsx code is being displayed in the preview window to the right.

Let’s fix this. See if you can do the following:

1. In Greeting.tsx, export the Greeting component.
2. In App.tsx, import the Greeting component from the Greeting.tsx file.
3. Embed the Greeting component in the App component, just below the <h1> element that says “Hello from App.tsx - the parent component!”

Code Playground

App.tsx

Greeting.tsx

export default function App() {
  return (
    <div className="p-8">
      <h1>Hello from App.tsx - the parent component!</h1>
    </div>
  );
}

Run

Rendering images

Components can also render images. Here’s an example of a component that renders an image:

function Avatar() {
  return <img src="https://via.placeholder.com/150" alt="Avatar" />
}

When this component is rendered, it will display an <img> element with the specified src and alt attributes.

This image takes as its source a URL from placeholder.com. This is a service that provides placeholder images for use in web development.

Importing images

However, most of the time you would want to import images from your project’s assets folder.

You can do this by importing the image, storing its path as a variable, then finally using it as the src attribute of the <img> element.

If we take the same example as above, but with an image imported from the assets folder:

import avatar from './assets/avatar.png'

function Avatar() {
  return <img src={avatar} alt="Avatar" />
}

Expression slots in JSX

Understanding expression slots

Those curly braces in <img src={avatar} alt="Avatar" /> can be thought of as expression slots in JSX. They allow you to embed JavaScript expressions (code that produces a value) inside JSX.

Where to use curly braces

You can only use curly braces in two ways inside JSX:

1. As text directly inside a JSX tag: <h1>{name}'s To Do List</h1> works, but <{tag}>Gregorio Y. Zara's To Do List</{tag}> will not.
2. As attributes immediately following the = sign: src={avatar} will read the avatar variable, but src="{avatar}" will pass the string "{avatar}".

Learn more

These examples were all taken from the React documentation on embedding expressions in JSX, and this page is a great resource to learn more about this topic.

Challenges

Practicing with components

Make sure your server is running by typing the command below into your terminal and hitting ‘Enter’:

npm run dev

1. Create a new page in Remix

• Create a new page in Remix with the route /profiles that simply renders a <h1> element with the text “Profiles”. The title should be large, bold and centered.
• Use the starter code below to get going:

routes/profiles.tsx

export default function ProfilesRoute() {
  return (
    <div className="min-h-screen p-16">
      <div>
        {/* Replace this comment with your code here */}
      </div>
    </div>
  )
}

• Your page should look like this in the browser:

2. Create a new component

• At the top of your routes/profiles.tsx file, Create a new component called ProfileCard that renders the following:
  • a <h4> element with the text “User’s Name”.
  • a <p> element with the text “User’s Bio”.
• Embed this component in the /profile page, just below your <h1> element.
• Your page should now look like this in the browser:

3. Add an image

1. Find and download a profile image from pexels.com.
2. Save the image into the assets folder of your Remix project.
3. Using a JavaScript import statement, import the image to the top of your profile.tsx page.

Note

Remind yourself how to import images in React by revisiting the section above.

4. Update your Greeting component to render the image you imported in step 3. The image should have an alt attribute with the value “Profile Image”.

4. Style your component

Using Tailwind CSS, style your component so that it looks like the image below:

Solution

Watch the video below to see how I solved the challenges:

Once you have your component set up, you can move on to the next section.