Class-based Components

Simple App Using Class-based Component

Class based component is an alternative to functional component in react. Here, we use render() method to process logic & display content.

App.js

import React from "react"

// Class-based Component
class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

export default App

index.js

index.html

We can place all the logic within render()method & display content in return()function.

App.js

import React from "react"

// Class-based Component
class App extends React.Component {
    render() {
        // Logic Goes Here
        const date = new Date()
        const hours = date.getHours()
        let timeOfDay
        
        if (hours < 12) {
            timeOfDay = "morning"
        } else if (hours >= 12 && hours < 17) {
            timeOfDay = "afternoon"
        } else {
            timeOfDay = "night"
        }
        
        // Display Output
        return (
            <h1>Good {timeOfDay} to you, sir or madam!</h1>
        )
    }
}

export default App

index.js

index.html

Props in Class-based Component

InClassbased component this keyword should always precede props

index.js

import React, {Component} from "react"
import ReactDOM from "react-dom"

// App Component
class App extends React.Component {
    render() {
        return (
            <div>
                <Header username="John" />
            </div>
        )    
    }
}

// Header Component
class Header extends React.Component {
    render() {
        return (
            <header>
                // Using 'this' with 'props'
                <p>Welcome, {this.props.username}!</p>
            </header>
        )    
    }
}


ReactDOM.render(<App />, document.getElementById("root"))

index.html

In Class based components we don't explicitly pass props as a function argument like we used to do in function-based component.