Create functional components in React

One of the biggest benefits of using a front-end framework is making your application easier to manage by breaking down the page into smaller pieces called components.

Think of components as boxes where you can put anything, including other smaller boxes, to organize your stuff. This article will explain how to create and import React components.

Pre-requisites

JavaScript modules: Know the basics about the import and export statements. Ignore the parts that mention Node.js and require().

Intended result

This is what we will have by the end of the article.

Figure 1: A simple page with 3 elements (components) on screen.

Figure 2: This is the app hierarchy chart. We will use it as a simplified version of the Activity diagram to see how the project looks behind the scenes.

Getting started

To create a component, follow these steps:

Create a folder called components inside the src folder
Create a new file with the extension .jsx inside your components folder.
Create a function with the same name as your file using this pattern:

//MyComponent.jsx (the name of the file)

export default function MyComponent() {
  return (
    <div className="my-component">
      <p>Hello world</p>
    </div>
  );
}

Here we are going to learn what each line of code does:

export default: As the name says, it tells React this is the main component inside this file. You can export more than 1 component per file, but it is frown upon.
MyComponent(): Is the name of the component. You can change it to anything, but do not forget that it must be the same name as your .jsx file. In the next chapter, we will learn what arguments we can put inside the parenthesis.
return(): Is the content to be displayed on the webpage. You can nest as many tags as you need, but only 1 can be on the root.
className: This is the way to add a CSS class in React.

Using a component

To use a component, you need to do 2 things. Importing the component and using it inside the parent component.

Importing:

Open the component file where you want to insert your newly created component, for example, App.jsx, and follow these steps:

Use import on the top of the file followed by
The name of the component. In this example MyComponent.
from determines the route.
"./components/MyComponent" a string with the relative path of the component.

Using the component inside another component:

Inside the return():

<MyComponent/> you use the component like a HTML tag.
As you can see, you can put as many copies (instances) of the same component. In another article we will learn a better way to make multiple copies.

// App.jsx

import MyComponent from "./components/MyComponent";

export default function App() {
  return (
    <div className="App">
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </div>
  );
}

Conclusion

Now that you have learned how to create components and import them, you can move to the next chapter: Passing information to components by using props.

In you want to see the finished code, open this link and open the branch create-component.

Finally, this is the TLDR (To Long Did not Read) version of this article.