/    /  ReactJS- React Components

React Components

 

A Component is the core building block(s) of a React application(App). In other words, we can say that each and every web application(App) you will develop in React will be made up of each and every piece called components. React Components make the task of building UIs much easier to develop. You can see a UI broken down into multiple individual pieces called components and work on them separately and merge them all in a parent component which will be your final UI component. 

 

You can see in the below image we have broken down the UI of the sample homepage into individual components.

 

Google’s custom search at the top can be seen as a separate UI component, the navigation bar can be seen as a separate UI component, the sidebar is an individual UI component, the list of articles or post is also a separately UI component and finally, we can merge all of these individual components to make a parent component which will be the final UI component for the homepage.

 

Components in React basically return a piece of JSX(JavaScript XML) code that tells what should be rendered on the screen. In React App, we mainly have two types of components: 

  1. Functional Components
  2. Class Components

 

Functional Components:

React Functional components are simply javascript functions(JavaScript XM). We can generate a functional component in React by writing a javascript function(JavaScript XM). These React functions components may be or may not receive data as parameters. Below example shows a valid React functional component in React APP:

const Democomponent=()=>
{
    return <h1>Welcome I2tutorials!</h1>;
}

 

Example:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
// This is a functional component 
const Welcome=()=>
{ 
        return <h1>Hello World!</h1> 
} 
  
ReactDOM.render( 
    <Welcome />, 
    document.getElementById("root") 
); 

 

Class Components:

The React class UI components are more complex than the react functional UI components. The react functional UI components are not known of the other components in your program whereas the react class components can work with each other. We can be passing data from one react class component to other react class components. We can use JavaScript ES6( ECMAScript 6) classes to create class-based components in React. Below example is a class-based component in React: 

class Democomponent extends React.Component
{
    render(){
          return <h1>Welcome I2tutorials!</h1>;
    }
}