Learn React JS - Understanding Components - Part 3
Tags: webdev, react, javascript, html
Published: 2021-05-31 15:43:50

Hello everyone 👋,

In the previous article, we learned about Creating a React App with Create React App tool. In this part 3 of **Learn React JS** Series, we will cover the following topics.

1. What is a Component?
2. When to use a Component?
3. How to create a Component?
4. How to separate a big component into smaller components?

## 1. What is a Component?

Components are independent and reusable bits of code. 

Components can be used to reduce the large piece of code into a smaller independent and reusable code.

## 2. When to use Component?

Developing the entire application in a single component file (`App.js`) makes the application harder to maintain and test. In order to solve this issue, the entire application can be sub-divided into many independent and reusable components.

In the example below, You can see, all the logic is developed in a single `App.js` file which is a bad practice (left-hand side). 

Instead, we can separate this entire code into multiple components which makes the code reusable and maintainable. See, how we have separated it (right-hand side). 

![](https://i.ibb.co/0MJbGbN/what-is-components.png)

## 3. How to create a Component?

In React JS, there are 2 types of components. They are

a. Functional Component
b. Class Component.

### a. Functional Component

A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.
Props are like an input value to the component from parent component.

Example of Functional component:

```jsx
function App(props) {
  return <h1>Learn React</h1>;
} 
```
### b. Class Component

It uses the `ES6` Class declaration to create the Class Component. To use the Class Component, 

1. extend the class with `React.component`
2. overide `render` method and return the valid JSX.

Example of Class Component:

```jsx
class App extends React.Component {
  render() {
    return <h1>Learn React</h1>;
  }
}
```

The above two components are equivalent from React’s point of view.

It produces the same output. We will learn in the next part about Functional vs Class Components.


## 4. How to separate a big component to smaller components?

Assume, you have been given to develop a component as per the google search results view. 

![](https://i.ibb.co/Y7GMgvQ/Screenshot-2021-05-31-at-7-45-00-PM.png)

So, usually, beginners who do are, develop everything under the `App.js` file. The Search box, the search results, pagination, footer, etc. 

In the below example, the Search box and search results are developed in the `App.js` file. This will perfectly work fine!

App.js

```jsx
function App(props) {
  const data = [
    {
      url: "google.com",
      title: "Technology definition and meaning",
      description:
        "Technology refers to methods, systems, and devices which are the result of scientific knowledge being used",
    },
    {
      url: "reactjs.com",
      title: "React JS is a front end technology",
      description:
        "Technology refers to methods, systems, and devices which are the result of scientific knowledge being used",
    },
  ];
  return (
    <div className="container">
      {/* // enter search query */}
      <input type="text"></input>
      <div className="search-results">
        {data.map((item) => {
          return (
            <div>
              <div className="search-url">{item.url}</div>
              <h2 className="search-title">{item.title}</h2>
              <div className="search-description">{item.description}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;
```

App.css

```css
body {
  margin: 20px 0px 0px 20px;
}

.search-results {
  margin-top: 40px;
}

.search-title {
  margin-top: 0;
}

.search-description {
  margin-bottom: 50px;
}
```

Output of this code:

![](https://i.ibb.co/jTCsY2y/Screenshot-2021-05-31-at-8-28-38-PM.png)

**But, wait, what would you do, if you want to have this same UI and functionality in another file? Maybe `main.js`**.

So, to do this, we have to move those search results functionality into a separate re-usable component for use in other places. 

Follow the below steps to do it.

1. Create a new file and name it as `SearchResult.js`. Make it as a functional component and accept `props` as property.
![](https://i.imgur.com/G6UNEJ4.png)
2. Cut the below code from `App.js` and paste in `SearchResult.js`
![](https://i.imgur.com/XOB6ytn.png)
3. After pasting in `SearchResult.js`, replace `item` with `props`. Your final code should be as below image.
![](https://i.imgur.com/6qDyqJW.png)
4. In the second step, we have removed search results code and moved it to `SearchResults.js`. Paste this code in `App.js` to use Search Results re-usable component. We are passing the data of `title`, `url` and `description` from **App.js** to **SearchResult.js** with props.
![](https://i.imgur.com/8QaZDXX.png)


That's it, we have separated out the code for search results. Now, Search Results component can be used in any other component.

Here's my [github repo](https://github.com/yuvgeek/learn-react/tree/part-3) where you can find all the files in the **part-3** branch. Search results and App JS components are available in this branch. 

We will keep updating this repo for every part. So, please bookmark it.

 {% github yuvgeek/learn-react %} 

In the next article, we will learn the difference between Functional and Class Components.

Thanks for reading the article!