This repository contains example React projects organized from beginner-friendly to more advanced topics. Each project folder has a fully working React app focused on a specific concept or feature. The code is meant both to be run locally and to be read as a reference. Whether you are a student just starting out or a developer looking to brush up on your skills, you will find hands-on examples to learn from.
The projects cover a variety of topics. They start with basic setup and simple components, and move on to things like state management (Context API and Redux Toolkit), routing, theme toggling, and more. By exploring the folders one by one, you will get a practical understanding of React. Feel free to start at the beginning or jump to topics that interest you the most.
- 01_basics – Basic React setup and starter examples
- 05_password_generator – Password generator project
- 12MegaProject – Larger multi-page app with routing
- currency_converter – Simple currency converter (has some bugs)
- customReact – Experiments with custom React logic and components
- mini_context_Api – Learning the Context API (includes diagram)
- redux-toolkit – Full example using Redux Toolkit for state management
- rouing_practise – React Router practice projects
- themeswitcher – Theme switching example (light/dark mode)
- todocontextlocal – Todo app using Context API and localStorage
- Running Locally – How to run the projects on your computer
- Using this Repository – Tips for beginners and developers on how to use this repo
The 01_basics folder contains the simplest React examples to help you get started. It shows how to set up a new React application (for example, with Create React App) and includes very basic examples of components, JSX, props, and state. If you are new to React, this folder is a great first stop to check your environment and learn the fundamentals. Feel free to run the code and try modifying the examples to see how React works.
The 05_password_generator folder contains a fun project that builds a random password generator. It demonstrates how to handle user input and state in React. You will see how to generate random characters, update state, and respond to button clicks. Try running this project and experiment with the code: for example, change the password length or character set to customize the generator and learn more about React events and state.
The 12MegaProject folder is a larger, multi-page React application that demonstrates React Router (client-side routing). It shows how to organize a bigger project with multiple views or pages. This example app includes several components and routes to simulate a real-world website structure. Exploring this project will help you understand how to use React Router for navigation and how to split your app into modular parts.
The currency_converter folder contains a simple currency converter app. It demonstrates working with input, calculations, and displaying results. Note that this example intentionally contains some bugs; fixing them can be a valuable learning experience. Try running the app and exploring the code: you can practice debugging and improving the project as you learn more about React.
The customReact folder has experiments with custom React logic and components. For example, you might find code that implements custom hooks or tries to mimic some React behavior. This is more advanced and shows how you can extend or customize React. It’s a great place to learn about how React works under the hood and to try building your own small React-like utilities.
The mini_context_Api folder focuses on React’s Context API for sharing state between components. It includes a small diagram (in Excalidraw format) illustrating how context flows through the app. By examining this project, you’ll learn how to use the Context API to pass data without prop drilling. This example is useful for managing global or shared state in a React application.
The redux-toolkit folder is a full example using Redux Toolkit for state management. Redux Toolkit is a modern approach to Redux that reduces boilerplate. This project shows how to set up the Redux store, create slices, and connect them to React components. It’s a great resource if you want to see Redux best practices in action.
The rouing_practise folder contains practice projects for React Router. It helps you learn how to create routes, link between pages, and handle navigation in a React app. Use this folder to experiment with routing basics and see different routing patterns.
The themeswitcher folder demonstrates how to implement theme switching (for example, light mode and dark mode) in a React app. It may use React state or context to toggle between themes. This example shows how to change the app’s appearance dynamically and is useful for learning how to manage styling and theme state.
The todocontextlocal folder has a Todo list application that uses the Context API and browser localStorage. You’ll see how to build a simple todo list, manage its state using context (so that multiple components can share the todo data), and save the list in the user’s browser. This is a practical example combining state management and data persistence.
To run any project locally, follow these steps:
-
Ensure you have Node.js and npm (or Yarn) installed.
-
Clone this repository and navigate into it:
git clone https://github.com/yourusername/React.git cd React -
Install dependencies in a project folder (for example, 01_basics):
cd 01_basics npm install -
Start the app:
npm start
-
View in browser: The app will open at http://localhost:5173. If that port is in use, look at the terminal output for the actual URL.
-
Stop the server: When you’re done, press Ctrl+C in the terminal to stop the development server.
(Use yarn install and yarn start instead of npm if you prefer Yarn.)
The projects in this repository are organized by topic and difficulty, but you can explore them in any order. Each project is self-contained, so feel free to jump around and look at whatever interests you.
For beginners:
- Start with the 01_basics project to understand the basic React setup.
- Next, try the simpler projects like 05_password_generator and currency_converter to practice working with state and events.
- Then move on to examples like mini_context_Api and redux-toolkit to learn about state management with Context and Redux.
- Run the examples, read the code, and try making small changes. This hands-on practice will help reinforce what you learn.
For experienced developers:
- Explore the topics that interest you most. For instance, look at the redux-toolkit folder to see how Redux can be used in a modern app, or check customReact for interesting experiments with React internals.
- Use these examples as a reference or starting point for your own projects. You can copy patterns or techniques you find useful.
- Feel free to fix the bugs in the currency converter or add features – improving these examples can be a good challenge if you’re already comfortable with React.
Remember, the goal of this repository is learning by example. Look at how each project is built, experiment with the code, and try out new ideas. Happy coding!