Introduction to Components In React

Introduction

In the previous article, we went through the basics of creating React application. Now, moving towards what Components are, we will learn where and how components can be used in React.

Component

In React, a component is referred to as an isolated piece of code which can be reused in one or the other module. The React application contains a root component in which other subcomponents are included; for example – in a single page, the application is subdivided into 3 parts – Header, Main Content, and Footer. So, there is a single App Component having 3 subcomponents – Header Component, MainContent Component, and Footer Component.
There are 2 types of components in React.js
  • Stateless Functional Component
  • Stateful Class Component

Stateless Functional Component

This type of component includes simple JavaScript functions. These components include immutable properties, i.e., the value for properties cannot be changed. We need to use Hooks (will be discussed in the next article) to achieve functionality for making changes in properties using JS. A functional component is used mainly for UI.
Example
  1. function Demo(props) {
  2.    return <h1> Hello, {props.Name} </h1>;
  3. }
Demo
Open App.js and remove additional HTML code except for the div. Now, add a new folder named Components and add a file named addition.js.
Component in React
Create a new file named addition.js.
Component in React
Add Stateless functional component code.
Component in React
Please note in Addition.js, the last line exports default addition that is a must. Only through this line, it can be used in the parent component.
Now, again in App.js, import Addition from ‘./Components/Addition’. After importing, we can use the imported component as tag <Addition></Addition>.
Component in React
Now in terminal, run the command npm start.
This will run the React application and in the browser, the result will be displayed as below.
Component in React
So, this way, we can call the functional component.
In another way, we can write addition function as arrow function like in the snap below.
Component in React
The output will remain the same,
Component in React
We can add as many tags for the additional component. It will be displayed in the browser.
Component in React
Component in React

Stateful Class Component

The Class component is ES6 classes which extend the Component class from React library. The class component must include the render method which returns HTML.
  1. class Demo extends React.Component{
  2.    render(){
  3.    return <h1> Hello, {props.Name} </h1>;
  4.    }
  5. }
Demo
For class component, create another JS file named sum.js in the component folder.
Component in React
Now, import React and component from the React library. After that, declare the class extending component.
Component in React
Now, import the exported sum class to App.js.
Component in React
Save file it will automatically compile and result will be updated in the browser,
Component in React
Important Point
  • You can use it without exporting/importing class/functional component.
  • The imported class/function must be in upper case; else it will give an error.
  • Class/Functional component returning JSX i.e) Javascript XML.

Difference between Stateless Functional and Stateful Class Component

Stateless Functional Component
Stateful Class Component
These are a simple javascript function
These classes extend the Component class from React library
Stateless function uses Hooks to change properties value in View
Stateful class uses State and setState to change properties value
Stateless doesn’t use ‘this’ keyword
Stateful component provide complex UI data

Summary

In this article, we have reviewed about components and their importance in React applications. Components are building a block of React js and can be reused and nested within other components. They play a very important role in React applications. React provides 2 types of components, Stateless Functional, and Stateless Class Component.

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s