Post
Ask Question

Class And Functional Components In React

Introduction

In this article, We will understand how to create the class and functional components. Components are the core building block of react application. Basically react component is a small and reusable piece of code that represents the user interface. It is similar to a JavaScript function which returns HTML. We can define components by two approaches first is called a class component and the second is called a functional component. React team recommends that a new application should be created using the functional component. 

In this series, We are learning about basic react js concepts. This article is about the class and functional component react.

As per react team recommendation always starts our component name with a capital letter.

Class Component

A class component is created by using the class keyword and needs to extends the component from react. We have created a new js file in the src folder let's say the name of the file is ClassComponent.js and write the below code in this file. We have created a class ClassComponent and it requires to render method to return HTML. Then we have to export the component to use where we want that. We can use state and constructor in the class component so it's also known as a stateful component.

ClassComponent.js

import React, {Component} from "react";
  
class ClassComponent extends Component {
    render() {
        return <h1>Hello from class component</h1>;
    }
} 
export default ClassComponent;

Functional Component

A functional components are simple javascript function that returns HTML. Now just create a new js file in the src folder suppose the name is FuncationalComponent.js, We write the below code in this file, Simply create one function FuncationalComponent that returns an HTML element, Then we have to export the component to use this component where we want that. It is easy and a bit simple as compared to class components The functional component is also known as the stateless component because We can not use state directly in functional components. We can use Hooks in functional components.

FunctionalComponent.js

import React from "react";

function FunctionalComponent ()
{
    return (
    <h1>Hello from functional component </h1>
    );
};
export default FunctionalComponent;

Now we have to import the class and functional components in the app.js file and use that component where you want to display. Below code, we have to write in the app.js file. As we can see the way we are using the components to display is the similar way we use HTML tags. 

The export default is used to export a single class, function or primitive from the component. We don't necessarily import it as FunctionalComponent we can give it any name as it is a default export.

App.js

import './App.css';
import ClassComponent from './ClassComponent'
import FunctionalComponent from './FunctionalComponent'

function App() {
  return (
    <div className="App">
      <ClassComponent />
      <br/>
      <FunctionalComponent />
    </div>
  );
}

We have imported both components into the app component. Now we have to run our application by using the npm start command to see the output on the browser. Once the npm command ran successfully, We are able to see the below output. So now we have learned how to create components and use the components in react.

Class and Functional Components in React

We need to know two basic things in react first need to use className instead of the class attribute and second wrap the elements in a parent element or use a fragment.

Summary

In this article, We have discussed the class component and functional component in react. How to create those components in react. Thank you for reading this article. 


Similar Articles