React 2020 — P3: Functional Components
By: Dino Cajic
Tags: Programming, Web Development, React, JavaScript, Reactjs

If you’ve missed the first two articles, I suggest that you go back and review those before continuing. Most of my articles build up; it’s just too difficult to have everything in one article (or it would be a book).

You should be acquainted with components by now and at the high level understand the difference between functional and class-based components. We’re going to be tackling functional components in more detail in this article.

Let’s create a new functional component Nissan in the src/components/ directory. Get ready…the theme of this series will be cars. If you’re following from the previous article, there was a Test.js file in the src/components directory. That’s been deleted and the only file that you should see in there is Nissan.js.

If you don’t have your development server running, now’s the time:

C:\your-project-root-dir>npm start

Inside of your Nissan.js file, you’ll need to import React. Since this is a functional component, that’s pretty much all you’ll have to import.

import React from 'react'

Next, declare the function and name it Nissan. That functional component will return a JSX element, which will be a <div> tag with the string 1990 Nissan 240sx inside of it.

By itself, the functional component does nothing. We’ll have to import it inside of our App.js file. We’ll then render it inside of the App functional component so that it can be displayed in the browser. Why inside of App? Because App is already displayed on the screen. It’s imported inside of src/index.js, and is then pushed into <div id=”root”>. That’s just a bit of recap for you. You could import Nissan into index.js, and push it into <div id=”root”> directly if you wanted. You’ll see why you don’t want to do that in a second.

In order to import the Nissan functional component inside of App.js, we’ll have to export the Nissan component by adding export defaul Nissan to the bottom of the Nissan.js file.

We’ll then import the Nissan functional component inside of src/App.js. Once imported, the Nissan component can be rendered.

App is also a functional component. Since it’s a React component, it needs to import React at the top of the App.js file. We see this on line 1. On line 2, the Nissan component is imported. The App functional component is declared on line 4. App returns a <div> JSX element that contains an <h1> tag and the rendered Nissan component. The component is rendered by taking the component name and creating a self-closing tag: <Nissan />. We’ll see later on when to use self-closing tags and when to use a standard closing tag: <Nissan></Nissan>. The App component is exported at the bottom of the page and is then imported in src/index.js, where it is rendered and pushed into the <div id=”root”> tag located in public/index.html.

What if we wanted to have an additional vehicle displayed? We could just repeat the same process, and we will. Go to src/components and create a Toyota.js file.

Create a functional component named Toyota that returns a <div> JSX element containing the string 1995 Toyota Supra (which is the last time Toyota made a Supra and you can’t convince me otherwise). Make sure to export the Toyota component at the bottom of the file.

Import the file inside of src/App.js and render it just like you did with the Nissan component.

If you look at your browser, you’ll see the Supra displayed right below the 240sx.

This is why we’re including components inside of the src/App.js file instead of going to src/index.js directly: so that we can render multiple components. We can only return one JSX element. In order to return multiple JSX elements, we have to wrap them inside of a single one. In this case, our outer <div> tag, contains the <h1> tag, the <Nissan /> tag, and the <Toyota /> tag. When rendered, we have something that looks like this:

We can also call the functional component as many times as we want inside of our App component. So, if we wanted to display the 240sx 5 times, we can just render the component 5 times.

Looking at the browser, you’ll see that sure enough, Nissan is displayed 5 times.

If we wanted to create other vehicles, we could create individual components for each of them, import them into App.js and render them. This is not practical. If would be a lot better to have one component named Car that we could pass arguments to. We’ll look at how we can pass arguments to functional components in the next article.