What are Components & their types in ReactJs

React components are the building blocks that make any React app. You take any React app and it will have many components. You can consider it as a JavaScript class or function that accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

ReactJS components allow you to break up the user interface into separate bits and each bit can then be reused and handled independently.

It is easier to build an UI using individual pieces called components. When you work on them independently, you can also merge the components to create the final UI.

What are React Components? Introduction to Components | Types of Components

React components are of two types: Class components and Functional components.

• Functional Components in ReactJS:

Functional components are like JavaScript functions. You can create a functional component in React by just writing a JavaScript function. It is not necessary that these functions will receive data as parameters. They may or may not.

Example:

const Democomponent=()=>

{

    return

Welcome Message!

;

}

•    Class Components in ReactJS:

There’s a little more complexity involved when it comes to class components. While the functional components are not aware of the other components in your program, the class components have that awareness and can work with each other. You can transfer data from one class component to another. 

Example:

class Democomponent extends React.Component

{

    render(){

          return

Welcome Message!

;

• Pure components in ReactJS :

When functions return the same output on being given the same input in JavaScript, they are called Pure Components. Simply put, a pure component in react returns the same data for the same input. In pure functions, the output only depends on the input arguments.

Consider for example, this.

function Add(num1, num2){

  return num1 + num2;

}

    }

}

React JS Functional Vs Class Components | React JS Tutorial