Class Components

info

Modify the code in App.tsx and add following code

A class component is structured in following manner:

import React, { Component } from "react"

class App extends Component {
    
    render() {
        const name = "Class Component" 
        
        return(
            <div>
                <h1>{ name }</h1>
            </div> 
        )        
    } 
    
}

export default App

As soon as you create a class Component, it should always be based on the Component class of React (extends). A class Component always has a render() function. This function takes care of rendering the output.

Breakdown

Line 1: import the required libraries and functions
Line 3: Class extends the React builtin class Component
Line 5: the required render function (required by extending from Component)
Line 8: the effective return statement which renders the output.
Line 17: We need to export the Component in order to use it in other modules

Breakdown​

Breakdown