This repository contains a collection of React projects, each demonstrating different concepts, tools, or features in React development. Click on any project name to navigate directly to its folder.
This repository is designed for learning and experimenting with React. Each folder represents a standalone project, covering a variety of topics such as state management, routing, styling, context API, Redux Toolkit, and more. The projects range from beginner to intermediate level, making this collection a great resource for anyone looking to improve their React skills.
- Clone this repository to your local machine.
- Navigate to any project folder.
- Install dependencies using
npm installoryarn. - Start the development server with
npm startornpm run dev(depending on the project setup). - Explore the code and experiment with the features.
A foundational React project created using Create React App. It demonstrates the basic structure of a React application, including component creation, props, state, and simple event handling. This project is ideal for beginners who want to understand the core concepts of React and how to set up a project from scratch. It also covers folder structure, static assets, and basic styling.
This project is bootstrapped with Vite, a modern build tool that offers fast development and hot module replacement. It showcases how to set up a React project with Vite, highlighting the differences in configuration and performance compared to Create React App. The project includes examples of component usage, state management, and efficient development workflows.
A simple yet effective counter application that demonstrates the use of React state and event handling. Users can increment and decrement a displayed number. This project is perfect for understanding how React manages state updates, re-renders components, and handles user interactions through events.
This project integrates Tailwind CSS with React, showing how to use utility-first CSS classes for rapid UI development. It also demonstrates passing props to components to dynamically change styles and content. The project is useful for learning how to combine modern CSS frameworks with React's component-based architecture.
An interactive app that allows users to change the background color of the page or a component. It covers handling user input, updating state, and applying dynamic styles. This project is a practical example of how React can be used to create engaging and responsive user interfaces.
A password generator tool built with React. Users can customize password length and character types (uppercase, lowercase, numbers, symbols). The project demonstrates form handling, state management, and generating random values. It's a great example of building utility apps with React.
A currency converter application that lets users convert amounts between different currencies. It uses React state and effects to manage input and fetch conversion rates (mocked or real). The project is useful for learning about controlled components, side effects, and API integration in React.
This project demonstrates client-side routing using React Router. It includes multiple pages/components and navigation links, showing how to set up routes, nested routes, and navigation in a React app. It's essential for anyone looking to build multi-page React applications.
A mini project that introduces the React Context API for state sharing across components. It explains how to create a context, provide values, and consume them in deeply nested components. This project is ideal for understanding global state management without external libraries.
A theme switcher app that allows users to toggle between light and dark modes. It demonstrates managing global state (theme), applying conditional styles, and persisting user preferences. The project is a practical example of enhancing user experience with theming in React.
A todo list application that uses the Context API for state management and local storage for data persistence. Users can add, remove, and mark tasks as complete. The project covers advanced state management, context usage, and integrating browser APIs for persistent storage.
A more advanced todo app that leverages Redux Toolkit for state management. It demonstrates setting up Redux slices, actions, reducers, and connecting them to React components. The project is perfect for learning scalable state management in larger React applications.
This folder contains experiments and custom implementations that mimic React features. It may include custom hooks, simplified versions of React's core concepts, or explorations into how React works under the hood. It's a playground for deepening your understanding of React's internals and trying out new ideas.
Feel free to explore each folder for more details and code examples. Contributions and suggestions are welcome!
This project is licensed under the MIT License. See the LICENSE file for details.