A curated collection of React projects built to explore and practice modern web development concepts.
Each project focuses on a specific skill, from state management to conditional rendering and styled components.
This repository contains React exercises developed as part of my learning journey in modern web development.
- Clone the repository
git clone https://github.com/your-username/react-exercises.git - Install dependencies
npm install - Start the project
npm start
📝 Quiz
An interactive quiz application with multiple-choice questions.
Features:
- Dynamic question rendering
- Real-time score tracking
- Final result display
A component that demonstrates React’s useReducer hook for managing complex state in a to-do list application.
Features:
- Add, edit, and delete tasks
- Mark tasks as completed
- Centralized state management using reducer logic
- Clean UI for task interaction
A component that demonstrates how to control a video element using React state and effects.
Features:
- Play and pause video programmatically
- Syncs video playback with component state
- Demonstrates useRef and useEffect for DOM manipulation
A simple interactive chat application with message history.
Features:
- User name input and validation
- Real-time message sending and display
- Message history with user/bot distinction
- Responsive and modern UI
An exercise demonstrating how to combine React Context API with the useReducer hook for advanced state management.
Features:
- Global context for managing a list of posts
- Uses reducer logic for predictable state updates
- Persists posts in local storage
- Example of dispatching actions from any component
- Clean separation of context and reducer logic
A fun rating system where users can evaluate using emojis.
Features:
- Emoji-based rating selection
- Instant visual feedback
- Simple and intuitive interface
🧑🎓 Student Grades
A grade management tool that displays and calculates student performance.
Features:
- Student list rendering
- Grade calculation and results
- Organized layout for readability
A responsive photo gallery application.
Features:
- Image grid layout
- Responsive design
- Interactive navigation
An app that shows different greetings depending on conditions (like time or user input).
Features:
- Conditional rendering
- Personalized messages
✍️ Full Name
A simple form to display and update a user's full name.
Features:
- Real-time input handling
- Dynamic text display
A component that demonstrates React’s useEffect for side effects and cleanup. Features:
- Logs messages on mount and unmount
- Shows how to use cleanup functions in useEffect
A component that demonstrates React’s useEffect for handling side effects in functional components.
Features:
- Executes code when the component mounts and updates
- Demonstrates dependency arrays in useEffect
- Shows how to perform actions like logging or fetching data
- Includes cleanup logic to prevent memory leaks
A simple exercise demonstrating the use of React Context API.
Features:
- Displays the number of online users
- "Ban all" button that resets the counter
- Uses
Context.ProvideranduseContextto share state
A simple exercise demonstrating the use of React Context API to handle user authentication state.
Features:
- Provides a global context for the logged-in user
- Displays the current logged user information
- Example of consuming context with
useContext - Clean and minimal structure for learning purposes
A simple exercise demonstrating how to implement a dark/light theme toggle using React Context API.
Features:
- Global theme state managed via context
- Toggle between dark and light modes
- Example of custom context provider and consumer
- Minimal UI with a theme switch button
- React → Component-based UI
- TypeScript → Static typing & safer code
- Tailwind CSS → Utility-first styling
- Next.js → Framework setup
This repository is licensed under the MIT License.