React Components

Former, the developers used to write more than thousands of lines of code to develop a single-page application. These applications follow the structure of traditional DOM, and it was very challenging to make any change with them. And if any mistake found, it requires being search manually in the entire application and update accordingly. The component-based approach is introduced to resolve this issue. According to this approach, the complete application is divided into a small logical group of code, which is known as components.

A component is considered as the core building block of a React application. It makes the task of building UIs convenient. Every component resides in the same space, but works independently from one another and merges all them in a parent component, which will be the final UI of the application.

Every React component has its structure, methods as well as APIs. They can be reused as per the requirements.

There are two types of components in ReactJS that are as follows:

1. Functional Components (Stateless Components).
2. Class Components (Stateful component).

Functional Components

The functional components are also known as stateless components because they do not hold or manage state. Functional components are a way to write components that only includes a render method and do not have their state. They simply are the JavaScript functions that might or might not receive the data as parameters. We also can create a function that has props (properties) as inputs and returns what should be rendered.

The example of Stateless components is as follows:

Example

import React, { Component } from 'react';  
 class App extends React.Component {  
    render() {  
       return (  
          
  
               
               
          
   
       );  
    }  
 }  
 class First extends React.Component {  
    render() {  
       return (  
          
   
             
Stateless Components
  
          
  
       );  
    }  
 }  
 class Second extends React.Component {  
    render() {   
       return (  
          
  
             
www.tutorialandexample.com
  
             
This website has several tutorials.
  
          
  
       );   
    }  
 }   
 export default App;   

Output:

Class Components

Class components are also called as Stateful Components, because of holding or managing local state. These components are more complex than stateless components. It requires you to extend from React.

The Class can be created by defining a class that extends the component and has a render function.

The example of the class component is as follows:

Example:

In this example, we will create the list of unordered elements, where we will insert Name dynamically for every object from the data array. Here, we use EcmaScript6 arrow syntax (=>) that looks much cleaner than the old JavaScript syntax. It helps us in creating our elements with fewer lines of code. It is useful when we require creating a lot of item list.

import React, { Component } from 'react';  
 class App extends React.Component {  
  constructor() {  
       super();  
       this.state = {  
          data:   
          [  
             {             
                "name":"Arun" 
             },  
             {            
                "name":"Anup"             
             },  
             {    
                "name":"Anil"          
             }  
          ]  
       }  
    }  
    render() {  
       return (  
          
  
               
             
            
                 {this.state.data.map((item) => )}           
             
   
          
  
       );  
    }  
 }  
 class Name extends React.Component {  
    render() {   
       return (  
          
  
             
Student Names
  
          
  
       );  
    }  
 }   
 class List extends React.Component {  
    render() {  
       return (  
          
            
             
{this.props.data.name}
   
          
  
       );   
    }  
 }  
 export default App; 

Output: