Class Component In React JS

In This Blog, you are going to learn class component in react js, which is very beneficial concept in react app because without using react components you cannot create a react app.

REACT COMPONENTS

• In React JS, Components are independent and reusable pieces of code.
• In React JS, Components are the building blocks of any React App.
• In React JS, Components are like functions that return HTML elements.

Types Of Components

In React JS, Components come in two types,

1. Class components
2. Function components

Class Component In React JS

• In React JS, these components are simple classes (made up of multiple functions that add functionality to the application).
• In React JS, all class based components are child classes for the Component class of ReactJS (React.Component).
• In React JS, the class must implement a render() member function which returns a React component to be rendered, similar to a return value of a functional component.
• In React JS, component name always starts with Capital Letter e-g: <App/> not <app/>
• In React JS, If you write tag in lowercase like <div/> then react treats this as a DOM tags but If you write tag in First letter uppercase like <App/> then it represents a react component.

Short-Cuts Of Creating Functional Component In VS Code

• rfc – react functional component
• rfce – react functional component with export
• rfcp – react functional component with prop types
• rafc – react functional component with arrow function
• rafce – react functional component with arrow function and export
• rafcp – react functional component with arrow function and prop types

Short-Cuts Of Creating Class Component In VS Code

• rcc – React Class Component
• rccp – React Class Component With Proptypes

Source Code – App.js File

import React, { Component } from 'react'

class Employee extends Component {
  render() {
    return (
      <>
        <h1>Mohammad Adil</h1>
        <h1>Learning Never Ends</h1>
      </>
    )
  }
}

export default Employee

Source Code – Index.js File

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();