What are React components?

Components in React are the basic building blocks of web applications created by React. They are the independent bits of code which is reusable as many times as the user wants and represent the things that are to be displayed on the user interface. It works on the method of creating complex user interfaces of web applications which are built by the combination of smaller pieces of components. Each component in React has different functionality and characteristics, like style, structure, functions, etc. These components are combined to form a web application user interface and can be reused multiple times.

Why to use components?

The main reason for using React components is to make your work easy and manageable without affecting any working or speed of any web application. It is basically like, imagine if you are working on any website and writing the source code for it and you have to use a function or button at many places. Will you be happy writing the same code for it multiple times whenever required? Of course not, because it will be a lot to do. And difficult to manage, too.

So, to save your time and make it easy to manage for you, we use React components. With components, you can write the code for that function or button single time as a component and then can use it later whenever you need. By using this, it is easy to modify later. If you want to change how it looks or if any kind of modification is needed, you just have to update it in the component. The rest of it will work accordingly.

Two Main Types of Components

React has two important components, which are:

  1. Functional Components
  2. Class Components

1. Functional Components

Functional Components are functions that are new and modern and are mostly preferred in making user interfaces. These functions are basic JavaScript function that returns a value that visually looks like HTML, which is known as JavaScript XML (JSX). These are easy to read and can be used whenever needed.

For example,

function Greeting (props) {

return <h1> Hello, {props.name}! </h1>;

}

The component shown above gives the greeting function in which a name is passed to it and returns the user-given value to us. You can reuse this function like this,

<Greeting name= “Ashima” />

<Greeting name= “Bob” />

 

2. Class Components

The class component is the component that is of older style without any modern touch in it. These components are usually written by using JavaScript classes. Earlier, the advanced features of React like state and lifecycles methods were managed by using class components only, but now functional components are more popular and mostly used with Hooks.

Here is an example of the alike component as a class,

class Greeting extends React.Component {

render ( ) {

return<h1> Greetings, {this.props.name}! </h1>;

}

}

What are Props?

Props are the short form of the word “properties”. It represents the way, how you pass any information in the components. It is like giving instructions to the component that how it will work, and which function it will perform in the web application.

For example, if you have a component for greeting anyone and you want to use it to greet anyone by their name. You just need to pass the name inside the component as a prop. Like,

<Greeting name= “John” />

Inside the component, the keyword props.name is used to display the name. Props always help to make the component reusable, as we can use the same component multiple times using different data.

What is a State?

State in component is used to store any given information inside any component, which can be modified whenever needed.

It is like if you want a counter for counting the number of times you click a button in the application and then we have to use a keyword called useState inside a functional component.

For example,

import React, {useState} from ‘react’;

function Counter ( ) {

const [count, setCount]= useState (0);

return(

<>

<p> You clicked {count} times. </p>

<button onClick= {() => setCount(count+1) }> Click Me </button>

</>

);

}

In this example, Count is the current number; it can be anything after counting. Also, setCount is the function that is used to change the current number. Whenever you click the given button, the count of the counter increases and tells the number of times the button is clicked.

What are Hooks?

Hooks in React are the function that is very special as it allows you to use some features like state and side effects inside the functional components. By using this, the need for class components is almost negligible. The most used hooks are:

  • useState: This keeps track of every changed data and stores it for future use.
  • useEffect: This usually does its work when the components are in updating process.

Hooks are a very important part of React Component, as it help in making functional components powerful and easy to use for us.

Using Multiple Components Together

React works well and attractively when all the components have been put together.

Like, let us take an example, if you are making a profile identity card and creating different components for profile picture, name and description of that person then you must combine them together for creating the card. It is done somewhat like this:

function IdentityCard() {

return(

<div className= “card”>

<ProfileImage />

<ProfileName name= “Ashi” />

<ProfileBio />

</div>

);

}

Each part of the function contains different components of different characteristics. This process makes the access and update of the component very easy.

Best practices for writing React components

To maintain your component in an efficient manner, here are some ways and best practices to do so,

  • Keep Components Small and Focused: The component created must do only one task assigned to it.
  • Use Props for Configuration: It means that the data is passed from parent component to child component instead of using anything else.
  • Attach Hooks: Use useState, useEffect, and other customize hooks to manage and maintain state and lifecycle.
  • Avoid Unwanted State: Use of State should only be done when something really needs to change otherwise use props.
  • Use Meaningful Names: Using meaningful names makes it easy for everyone to understand the basic purpose of the component and its characteristics.
  • Reuse Components: Make components that can be used multiple times and places after being created

Final Thought on React Components

React Components in React are very small piece of code or functions that comes together to make a bigger user interface, means a website or web application. These components help in handling data in a more systematic way by splitting it into smaller parts. This gives easy access to the specific function and can be changed if needed. The components created can also be reused when required. All these things make React an attractive and easy-to-use way to build a user interface. You just need to practice and once you are comfortable with it, it is a very fun way to create a web application.

React-Components.jpg