Create functional  components in React
Tags: react, functional
Published: 2021-03-10 14:43:34

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](https://www.youtube.com/watch?v=qgRUr-YUk1Q&t=11s):** 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24ih82480bcv6160o9qk.png)
Figure 1: A simple page with 3 elements (components) on screen.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93hxdg839e6z8zw9d0ch.png)
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: 
1. Create a folder called `components` inside the `src` folder
1. Create a new file with the extension `.jsx` inside your `components` folder.
1. Create a function with the same name as your file using this pattern:
```jsx
//MyComponent.jsx (the name of the file)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jmlrqhd1ussf18egrof.png)


Here we are going to learn what each line of code does:
1. `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.
1. `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.
1. `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.
1. `className`: This is the way to add a CSS class in React.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ozwmutv21a7yvngwhna.png)

---
# 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:
1. Use `import` on the top of the file followed by
1. The name of the component. In this example `MyComponent`.
1. `from` determines the route.
1. `"./components/MyComponent"` a string with the [relative](https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/) path of the component.

### Using the component inside another component:
Inside the `return()`:
1. `<MyComponent/>` you use the component like a HTML tag.
1. 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.

```jsx
// App.jsx

import MyComponent from "./components/MyComponent";

export default function App() {
  return (
    <div className="App">
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </div>
  );
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z212z79p99lb0v2l18cn.png)

---

# 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.](https://dev.to/eduardo_alvarez_946ae8b20/4-passing-data-to-components-using-props-2d8a)

In you want to see the finished code, open this [link](https://github.com/elalienx/sda-react-articles) and open the branch create-component.

Finally, this is the TLDR (To Long Did not Read) version of this article.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfj78mxs82z6ryg38blj.png)

---

# Credits
* Cover image: Photo by <a href="https://unsplash.com/@mildlee?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mildlee</a> on <a href="/s/photos/boxes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>