A collection of React components built to practice core concepts: useState, useEffect, custom hooks, controlled inputs, derived state, and real-time data fetching.
https://react-components-red.vercel.app/
Built with Vite. Each component lives in its own folder under src/.
| Component | Demonstrates |
|---|---|
TodoList |
useState for list state, controlled form inputs, list rendering with keys, conditional rendering |
UserSearch |
useEffect + data fetching, debounced input, loading/error states |
BMI Calculator |
Controlled inputs, derived state, basic form validation |
TabSwitcher |
useState for active selection, conditional rendering, component composition |
ColorPicker |
Controlled inputs, useState, dynamic inline styling |
CharacterCounter |
Controlled inputs, derived state, real-time updates |
WindowSize |
Custom hooks, useEffect, browser event listeners (resize), cleanup functions |
- TodoList
- UserSearch
- BMI Calculator
- TabSwitcher
- ColorPicker
- CharacterCounter
- WindowSize