×
☰ See All Chapters

React.Component class in React

All class-based components are child classes for the Component class of ReactJS. When a class extends React.Component class it becomes component. This component class should extend render() function and should return JSX from this function. Before React 16.8 function components were state less and only Class components were able to handle state and lifecycle. Lifecycle Hooks are added to function components in version 16.8 and now the differences are so minor that you will probably never need to use a Class component in React.

It is good practice to create each component in a separate JavaScript file in order to better organize and reuse the code. To do that, create a new file with a .js file extension and put the code inside it. Code must start by importing React, and it has to end with the statement export default HelloComponent;. You can use any name for the file, but convention to use same name for file as the component. For example, if a file defines a component, its name should be name.component.ts.

Component Class name will be the component name and the component's name must start with an upper case letter. Also, it is convention to follow camel case and to end with word Component. For Example: HeaderComponent, TableComponent.  

import React from 'react';

 

class HelloComponent extends React.Component {

         render() {

           return <h1>Hello World!</h1>;

         }

}

export default HelloComponent;

To be able to use the HelloComponent component, you have to import the file in your application.

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import HelloComponent from './components/hello.component';

import reportWebVitals from './reportWebVitals';

 

ReactDOM.render(

  <React.StrictMode>

    <HelloComponent></HelloComponent>

  </React.StrictMode>,

  document.getElementById('root')

);

 

reportWebVitals();

component-class-in-react-0
 

Props

When you send the data through the attributes of component then those can be consumed as properties in component. A component is updated and re-rendered whenever there is a change in the component's state or props. About state and props you will study in depth in later chapters.

import React from 'react';

class EmployeeComponent extends React.Component {

  render() {

    return <h2>My age is {this.props.age}</h2>;

  }

}

 

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<EmployeeComponent age="20"/>);

Component Constructor

Constructor is a special function which can be used to initialize the component. Constructor must be named constructor.  Constructor is called when the component gets initiated. Adding constructor is optional. Each class can have only one constructor. Constructors should be always public, private or protected modifiers can't be used. Constructor is always executed only once during the component initialization. 

If you are handling component properties by using props and If your component has a constructor function, then props should always be passed to the constructor and also to the React.Component via the super() method. If you are not using props and when you declare constructor function, it is not necessary to pass props to the constructor and also to the React.Component via the super() method.

When pros used in components:

import React from 'react';

class EmployeeComponent extends React.Component {

  constructor(props) {

    super(props);

  }

  render() {

    return <h2>My age is {this.props.age}</h2>;

  }

}

 

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<EmployeeComponent age="20"/>);

When pros not used in components:

import React from 'react';

class EmployeeComponent extends React.Component {

  constructor() {

    super();

  }

  render() {

    return <h2>I am Employee</h2>;

  }

}

 

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<EmployeeComponent />);

 

All Chapters
Author