Component in ReactJS

Component in ReactJS: React component is the building block of a React application. Let us learn how to create a new React component and the features of React components in this chapter.

A React component represents a small chunk of user interface in a webpage. The primary job of a React component is to render its user interface and update it whenever its internal state is changed. In addition to rendering the UI, it manages the events belongs to its user interface. To summarize, React component provides below functionalities.

Initial rendering of the user interface.
Management and handling of events.
Updating the user interface whenever the internal state is changed.

Every React component has its own structure, methods as well as APIs. They can be reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes branches, which are further divided into sub-branches.

React component accomplish these features using three concepts −

Properties: Enables the component to receive input.
Events: Enable the component to manage DOM events and end-user interaction.
State: Enable the component to stay stateful. Stateful component updates its UI with respect to its state.

Table of Contents

Creating a React Component

React library has two component types. The types are categorized based on the way it is being created.

1. Function component − Uses plain JavaScript function.

2. ES6 class component − Uses ES6 class.

Function Component

In React, function components are a way to write components that only contain a render method and don’t have their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can create a function that takes props(properties) as input and returns what should be rendered. A valid functional component can be shown in the below example.

function Hello() { 
   return '<div>Hello</div>' 
}

The functional component is also known as a stateless component because they do not hold or manage the state. It can be explained in the below example.

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {  
      return (  
         <div>  
            <First/>  
            <Second/>  
         </div>  
      );  
   }  
}  
class First extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>TechieBundle</h1>  
         </div>  
      );  
   }  
}  
class Second extends React.Component {  
   render() {  
      return (  
         <div>  
            <h2>www.techiebundle.com</h2>  
            <p>This website contains multiple blogs of Tech, Lifestyle, etc.</p>  
         </div>  
      );  
   }  
}  
export default App;

Class Component

Class components are more complex than functional components. It requires you to extend from React. Component and create a render function that returns a React element. You can pass data from one class to other class components. You can create a class by defining a class that extends the Component and has a render function. Valid class component is shown in the below example.

class MyComponent extends React.Component {  
  render() {  
    return (  
      <div>This is main component.</div>  
    );  
  }  
}

The class component is also known as a stateful component because they can hold or manage local state. It can be explained in the below example.

In this example, we are creating the list of unordered elements, where we will dynamically insert StudentName for every object from the data array. Here, we are using ES6 arrow syntax (=>) which looks much cleaner than the old JavaScript syntax. It helps us to create our elements with fewer lines of code. It is especially useful when we need to create a list with a lot of items.

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();  
      this.state = {  
         data:   
         [  
            {             
               "name":"Abhishek"             
            },  
            {            
               "name":"Saharsh"             
            },  
            {    
               "name":"Ajay"          
            }  
         ]  
      }  
   }  
   render() {  
      return (  
         <div>  
            <StudentName/>  
            <ul>            
                {this.state.data.map((item) => <List data = {item} />)}           
            </ul>  
         </div>  
      );  
   }  
}  
class StudentName extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Student Name Detail</h1>  
         </div>  
      );  
   }  
}  
class List extends React.Component {  
   render() {  
      return (  
         <ul>            
            <li>{this.props.data.name}</li>   
         </ul>  
      );  
   }  
}  
export default App;