---

Getting Started - What Is A Reusable Component?

---

Well, a reusable component sounds exactly like the name, they are 100% reusable and are components created by you. Reusable components are useful and are a good way to organize and write code without it being messy. Let me give you an example. Say you wanted three buttons: one with your name, the other with your email, and the last one with your birth date. Well, with the help of reusable components, you don't have to write three buttons separately; you can use something called "mapping", (in React), which allows you to grab information, typically JSON files, and extract data, therefore only needing to make one button.

---

Getting Started - Setting Up Your Project

---

The first step in using APIs in React is to create a project using your command prompt or window shell. Using the command,npm create-react-app you can create a new project. Once you create your new project, you want to cd into your project and continue by typing code . into your console line. Then it should come up with your Visual Studio Code project in a new tab like this.

Now, once you have this up and running, we are going to do a bit of a cleanup. Get rid of the App.css, App.test.js, logo.svg, reportWebVitals.j, and the setupTests.js. After doing that, your project should look like this:

Now that you have deleted these files, we need to get rid of some code. First, you need to go into App.js and delete all of the imports at the top, as well as all the code inside the div tags. After doing that, it should look something like this:

Another file we need to go to is index.js. In there, you need to delete the reportwebvitals import at the top as well as the reportWebVitals at the bottom of the file. After completing this, your index.js file should look something like this:

Before we move on to the code, we need to add a file to your workspace. First, we need to go to the src folder, which is located below the public folder. To create a new file, you have to right-click on the src folder, and you should see an option that says, "New File." You can also click the "Add File" button in your workspace, located at the bottom of the three dots. This should appear every time you click on a folder or file.

By clicking on it, name the file "ReusableComponents," as I will in this example. In completing this, your project should look something like this:

In your ReusableComponents file, create a normal function like this:

function ReusableComponents {

    return (
        <div>

        </div>
    );
}
export default ReusableComponents

Now that you have completed the setup, we can now move on to the code.

---

Writing Code - The Basic Code

---

First, in App.js we need to add a couple of things. The first thing is we need to create a const with Users in a JSON format like this.

const users = [
    {
      name: "Person1", email:"Person1@gmail", contact:"111",
    },
    {
      name: "Person2", email:"Person1@gmail", contact:"222",
    },
    {
      name: "Person3", email:"Person1@gmail", contact:"333",
    },
    {
      name: "Person4", email:"Person1@gmail", contact:"444",
    },
    {
      name: "Person5", email:"Person1@gmail", contact:"555",
    }
  ]

In this example, I use the person's name, email, and contact information. To map this information and display it on the screen, we are going to use a built-in method called "map". This method allows more than one component to be outputted, depending on how many items you want to create. Here, you can see that we want to display five different items.

Now, to use the mapping method, there are a couple of steps.

{
        users.map((item) => <div>{item.name}</div>)
}

To use this method, you first have to define where you are grabbing your item data from; in this case, it is the const, users. Then you name what you will call the item definition name, in this case, it is "item." Then the last part of it is to use the name that you have called and grab the information you wish to display. Here it is: "item.name."

Above this you can add a heading that says Reusable List:

<div>
      <h1>Reuseable List</h1>
      {
        users.map((item) => <div>{item.name}</div>)
      }
</div>

After completing this, your application should be displaying the information that you have set. Here are Person 1, Person 2, Person 3, Person 4, and Person 5 as the names that we have set. On your React app, it should look like this:

---

Writing Code - Using Other Files and Props

---

Now, as you can see, we can only display one item at a time without creating another map method. Well, with the help of props, we can finally use the other file that we created, "ReusableComponents". First, we will go into that file and add some code. The first thing that we need to add is the props action. You can do this by adding it to the empty space after the function is called, like this:

function ReusableComponents(props) {

    return (

    );
}
export default ReusableComponents

After this, your props are ready, but we need to create the return code for when we import this.

function ReusableComponents(props) {

    return (
        <div>
            <span>User {props.data.name}</span>
            <span>User {props.data.email}</span>
            <span>User {props.data.contact}</span>
        </div>
    );
}
export default ReusableComponents

This code will, when initiated, grab the properties of the items in the const from the App.js file and use them here. Then, it outputs the items in the format that the code has ordered them in. Name first, email second, and contact third.

Back in the App.js, you need to import the file and use it in your map instead of the static code that we have written.

{
        users.map((item) => <ReusableComponents data={item} />)
}

Here we use the component and are grabbing its data and assigning it its value of "item," which we have set in the map function. By doing this, your application will look like this:

---

Write Code - Styling Your Application

---

As you can see, this application doesn't look at its best. I have prepared some styles for the spans. Either you can use mine or style your own application.

span {
  padding: 10px;
  background-color: #666;
  font-size: 18px;
  line-height: 40px;
  color: #fff;
}

Go to your index.css and put these styles there. After completing this, your application should look like this:

---

Conclusion - OutComes

---

In conclusion, your application should be running, and you can see that in this example I have explained the basics of mapping and reusable components.