class-based-components

Class-Based to Functional Components

Demo project showcasing React component patterns, Error Boundaries, and Context API usage.

Note: This project was originally written with class-based components and has been modernized to use functional components with hooks. The ErrorBoundary component remains class-based as React does not support functional error boundaries.

Tech Stack

• React 19.2 - UI library
• React DOM 19.2 - DOM rendering
• React Scripts 5.0.1 - Build tooling (Create React App)
• CSS Modules - Scoped styling

Features

• User Filtering - Search and filter users in real-time
• Error Boundaries - Graceful error handling with fallback UI
• Context API - Global state management using React.createContext
• React Hooks - useState, useEffect, useContext for state management

Project Structure

class-based-components/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── components/
│   │   ├── context/
│   │   │   └── users-context.js    # React Context for users
│   │   ├── ErrorBoundary.js        # Class-based error boundary
│   │   ├── User.js                 # Individual user component
│   │   ├── User.module.css
│   │   ├── UserFinder.js           # User search/filter component
│   │   ├── UserFinder.module.css
│   │   ├── Users.js                # Users list component
│   │   └── Users.module.css
│   ├── App.js
│   ├── index.css
│   └── index.js
├── .gitignore
├── package.json
└── readme.md

Available Scripts

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Run tests
npm test

Modernization Notes

This project demonstrates the conversion from class-based to functional components:

Class-Based	Functional Equivalent
constructor() & this.state	useState()
componentDidMount()	useEffect(() => {}, [])
componentDidUpdate()	useEffect(() => {}, [deps])
componentWillUnmount()	useEffect(() => { return cleanup }, [])
static contextType	useContext()

Exception: ErrorBoundary must remain a class component because React does not support the componentDidCatch lifecycle method in functional components.

---

Back to Top