Post
Ask Question

Overview Of ReactJS Components

In this article, you will learn about components and get answers to all the following questions:

  1. What are the components?
  2. How many types of components are in ReactJS?
  3. What are Function Components?
  4. How many ways to create Function Components?
  5. How to Use Function Components?
  6. What is the difference between Function Components vs Class Components?

1. What are the components?

The component is the core building block of a ReactJS Application. A Component can be reusable as per system requirements or logic of UI. Conceptually, components are more like JavaScript functions.

While on screen one or more components render together but at the back-end each component works independently from one another and merges all into a parent component.

In short, in ReactJS a component is an independent, reusable JavaScript (JSX) code block.

Example

A Web page contains the following things:

  1. Header Area.
  2. Content Area.
  3. Left Side Panel / Menu Area.
  4. Right Side Panel / Event Area.
  5. Footer Area.

ReactJS Components

In ReactJS for the above scenario, you have to develop a total of 5 components separately to get the desired result but afterward you can reuse them on another page with any combination.

2. How many types of components are in ReactJS?

In ReactJS there are mainly two types of components.

  1. Class Components.
  2. Function Components

3. What are Function Components?

The function component is just a simple JavaScript function. Function components can be created with or without props (parameters).

The function component is a JavaScript function or Javascript ES6 pattern function. As a component must return a react element(jsx) and the function component name always starts with a capital letter.

4. How many ways to create Function Components?

Example 1: Plain or Normal Function Component.

function Welcome(){
    return <h1>Hello from Function Component</h1>
}

Code Explanation

In the above code, we have created a function component named "Welcome" without accepting parameters (props).

Example 2: Function component with Props.

function Welcome(props){
    return <h1>Hello {props.UserName}, This is Function Component</h1>
}

Code Explanation

In the above code, we have created a function component named "Welcome" with accepting parameters (props).

Example 3: Function components follow the JavaScript ES6 pattern using lambda (arrow function) without props (parameters).

const Welcome = () => {
  return return <h1>Hello from Function Component</h1>;
};

Code Explanation

In the above code we have created a function component named "Welcome" with followed JavaScript Lambda that's called Arrow function components.

Example 4: Function Component follows the JavaScript ES6 pattern using lambda(arrow function) with props (parameters).

const Welcome = (user) => {
  return return <h1>Hello {user.Fullname}, this is Arrow Function Component</h1>;
};

Code Explanation

In the above code we have created a function component named "Welcome" with followed JavaScript Lambda that's called Arrow function components.

5. How to Use Function Components?

Using, executing, and calling any type of component is the same, whether you are calling or using a Function Component or Class Component.

Syntax

<ComponentName />

Difference between Function Components vs Class Components?

Function Components Class Components
The component writing style is similar to function. The component writing style follows the JavaScript ES6 pattern.
Don’t support constructor. Support constructor.
Support Hooks. Don’t support Hooks.
Don’t support lifecycle events. Support lifecyle events
Don’t extend from React.Component  Extend from React.Component
Don’t Require Render function Required Render function 


Similar Articles