Understanding Components

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.

What is a Component?
When to use a Component?
How to create a Component?
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).

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 the parent component.

Example of Functional component:

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,

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

Example of Class Component:

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 into smaller components?

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

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

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

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:

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 reusable component for use in other places.

Follow the below steps to do it.

Create a new file and name it as SearchResult.js. Make it as a functional component and accept props as property.
Cut the below code from App.js and paste in SearchResult.js
After pasting in SearchResult.js, replace item with props. Your final code should be as below image.
In the second step, we have removed the search results code and moved it to SearchResults.js. Paste this code in App.js to use the Search Results re-usable component. We are passing the data of title, url and description from App.js to SearchResult.js with props.