Components in React JS day#2

Hello, guys welcome back today. In the previous article, we see how to write hello world using react. In this, we going to see components in react. so let’s get started.

Components in React JS

what are components?

components are the building blocks of the react. It used to separate our web page functionality into different components.
Components are simply taken props as an argument to the constructor and return the react element from the render function inside the class component. It used to increase the reusable of our code on the web page.

Let’s understand with an example.

Consider the code speedy website blog page.

It has the following thing

Navigation at the top.
Footer at the bottom.
Displays the blogs on the website in the middle.
The search bar, Advertisement, and Latest articles are on the right side.

Divide the website into components as follows

Navigation (It has a list of text with links).
Blog list (It has blog title, author, and description).
Search bar (It has an input box and button).
Advertisement (It simply displays the ads).
Latest article (It list all the latest articles).
Footer (It also similar to the header has a list of text with links associated with it).

You can divide it as your wish but I divide it like this for our understanding purpose.

Each component has its own HTML element and its functionality.

If you take the search bar it has an input box and a search button. When the user clicks it. The function of the search button to search for a blog contains a name that the user entered and display.

Now you get some idea about components.

Types of react components

In react it has two types of components

Class component
Function component

We are only going to see about the class component.

Class component

The class component in react is must satisfied the following condition

The class component is must extend the React.Component class.
Must pass the props to React.Component in the constructor by using a super function if you passing props to children.
Must have a function name with render and must return the react element that is JSX.

Let’s understand it by our game program.

First, see how to play the game. It is so simple first player need to enter his name and register for the battle once the player register he gets into the battlefield.

He has to play with the bot. He has three options he can choose rock or paper or scissors once the user-chosen bot will choose a random weapon and we check the logic and find who is a winner and increase their score.

The player needs to play until he scores 5 points or bot score 5 points so who score the first 5 points will be the winner.

Divide our game into component

You get the idea about the game now let’s divide our game into the component below

App
Header
Register
Player
Weapon

1.App

This is just a container for our game it contains all other components in it and renders them.

2.Header

It just a simple component used to display the game name at the top.

3.Register

It has an input box and button where the user must register their name to play a game. It has a player component as a child and it only renders its if a user registers to play the game.

4.Player

This is the most important component. It holds the logic for our game and it has a child weapon component.

5.Weapon

It just a simple component it displays the rock paper scissor weapons.

Now you get some ideas about our game. It’s time to write some code.

Removing unwanted file

In a previous article, we see how to write hello world program in react. In that program, we have some unwanted files that no need for our game so first we delete that file.

The files that are no need are given below just delete that files.

rpsbattle
├── public
│   ├── favicon.ico
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.test.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Now create folder components under the src directory and create a file for our component similar to the given below.

rpsbattle 
└── src
    ├──components
    └────── Header.js
    └────── Header.css
    └────── Register.js
    └────── Register.css
    └────── Player.js
    └────── Player.css
    └────── Weapon.js
    └────── Weapon.css

This is the best always separate our components from our app so it is easy to handle.

Note: The filename of the component must be in uppercase for the first letter.

Header components

Now take look at the Header component it is the simple class component that simply returns a P tag.

Header.js

import React from "react";

class Player extends React.Component
{ 
 
 render()
 {
  return(
       <div className='header'> 
         <p> RPS Battle</p>
       </div>
        );
 }
}

export default Header;

We are importing react because we using React.component and we export our Header component so only we can use that in other files.

Now import our Header component in App.js.

App.js

import React  from 'react';

import Header from "./components/Header";

class App extends React.Component{
 	
      render()
      {
        return(  
                <div>
                  <Header/>
                </div>
         );
      }
}

Now run our code by the command

npm start

It will start the development server and run our code in the browser you will get similar output as below.

we will see about other components in upcoming articles.

Conclusion

Ok guys that’s enough for today. We learn about components in react JS in this article. In the next article, we learn about how to add style to our component.

All the best guys for upcoming days keep learning.