ReactJS Tutorial for Beginners - 6 - Class Component

❮ Previous Chapter Next Chapter ❯

---

In the previous chapter, we understood functional components and in this chapter, we will learn about class components in React with an example.

Class Component Overview

• Class components make use of ES6 class and extend the Component class in React.
• Sometimes called “smart” or “stateful” components as they tend to implement logic and state.
• React lifecycle methods can be used inside class components (for example, componentDidMount).
• You pass props down to class components and access them with this.props

import React, { Component } from "react";

class User extends Component {
  constructor(props){
    super(props);
    this.state = {
      myState: true;
    }
  }
  
  render() {
    return (
      <div>
        <h1>Hello Ramesh</h1>
      </div>
    );
  }
}

export default User;

Class Component Example

Let's create an HTML table and display employees on a web page using React class components.

TableHeader.js

Let's create a file named TableHeader.js and within this file create a class component called TableHeader:

import React, { Component } from 'react'

export default class TableHeader extends Component {
    render() {
        return (
        <thead>
            <th> Employee Name </th>
            <th> Employee Role </th>
        </thead>
        )
    }
}

TableBody.js

Let's create a file named TableBody.js and within this file create a class component called TableBody:

import React, { Component } from 'react'

export default class TableBody extends Component {
    render() {
        return (
            <tbody>
            <tr>
                <td> Ramesh</td>
                <td> Software Developer</td>
            </tr>
            <tr>
                <td> Tony</td>
                <td> Software Developer</td>
            </tr>
            <tr>
                <td> Pramod</td>
                <td> Software Developer</td>
            </tr>
            <tr>
                <td> Santosh</td>
                <td> QA Engineer</td>
            </tr>
        </tbody>
        )
    }
}

Table.js

Let's create a new file called Table.js, within this file create a class component called Table and import TableHeader and TableBody class components into it:

import React, { Component } from 'react'

export default class Table extends Component {
    render() {
        return (
            <div>
                <table border = "1">
                    <TableHeader />
                    <TableBody />
                </table>
            </div>
        )
    }
}

App.js

Let's change the App component with the following code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Table from './components/functional-components/Table';

function App() {
  return (
    <div className="App">
      <header className="App-header">
          <Table />
      </header>
    </div>
  );
}

export default App;

Demo

Start React App using npm start and Use http://localhost:3000/ link to access index.html page in a browser:

What's Next?

In this chapter, we have learned about the React class component with an example. In the next chapter, we will learn a very important topic that is JSX in React with an example.

---

❮ Previous Chapter Next Chapter ❯