Learn React JS - Understanding Components - Part 3

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).

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:

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:

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.

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 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.
2. Cut the below code from App.js and paste in SearchResult.js
3. After pasting in SearchResult.js, replace item with props. Your final code should be as below image.
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.

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 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.

yuvgeek / learn-react

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied…

View on GitHub

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

Thanks for reading the article!