React — Class Components

Basic Class Component

import React, { Component } from 'react';

class Welcome extends Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

// Usage
<Welcome name="John" />

State in Class Components

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

Lifecycle Methods

class Timer extends Component {
    constructor(props) {
        super(props);
        this.state = { seconds: 0 };
    }

    componentDidMount() {
        this.interval = setInterval(() => {
            this.setState({ seconds: this.state.seconds + 1 });
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        return <p>Seconds: {this.state.seconds}</p>;
    }
}

Event Handling

class Form extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        console.log('Form submitted');
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

Class Component Examples

// Todo item component
class TodoItem extends Component {
    render() {
        return (
            <li>
                <span>{this.props.text}</span>
                <button onClick={() => this.props.onDelete(this.props.id)}>
                    Delete
                </button>
            </li>
        );
    }
}

// Todo list component
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = { todos: [] };
    }

    addTodo = (text) => {
        this.setState({
            todos: [...this.state.todos, { id: Date.now(), text }]
        });
    }

    deleteTodo = (id) => {
        this.setState({
            todos: this.state.todos.filter(todo => todo.id !== id)
        });
    }

    render() {
        return (
            <div>
                <input onKeyPress={(e) => {
                    if (e.key === 'Enter') {
                        this.addTodo(e.target.value);
                        e.target.value = '';
                    }
                }} />
                <ul>
                    {this.state.todos.map(todo => (
                        <TodoItem
                            key={todo.id}
                            {...todo}
                            onDelete={this.deleteTodo}
                        />
                    ))}
                </ul>
            </div>
        );
    }
}

Mini Practice

Write React code that:

1. Creates a class component with state
2. Implements lifecycle methods
3. Handles events in a class component
4. Creates a todo list with class components

Up Next

Next: Learn about Function Components.