Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dpvasani/react-intermediate
Welcome to the React-Intermediate repository! This repository is a collection of intermediate-level React projects and exercises, designed to help developers deepen their understanding of React concepts, improve their coding skills, and explore advanced features of the React ecosystem.
https://github.com/dpvasani/react-intermediate
action context-api custom-hook global-state-management hooks localstorage react-router react-router-dom reducer redux-toolkit state-management usecallback useeffect useref usestate
Last synced: 3 months ago
JSON representation
Welcome to the React-Intermediate repository! This repository is a collection of intermediate-level React projects and exercises, designed to help developers deepen their understanding of React concepts, improve their coding skills, and explore advanced features of the React ecosystem.
- Host: GitHub
- URL: https://github.com/dpvasani/react-intermediate
- Owner: dpvasani
- Created: 2024-08-23T20:44:16.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-28T07:46:22.000Z (5 months ago)
- Last Synced: 2024-10-13T23:03:53.950Z (3 months ago)
- Topics: action, context-api, custom-hook, global-state-management, hooks, localstorage, react-router, react-router-dom, reducer, redux-toolkit, state-management, usecallback, useeffect, useref, usestate
- Language: JavaScript
- Homepage:
- Size: 2.93 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Intermediate
Welcome to the **React-Intermediate** repository! This repository is a collection of intermediate-level React projects and exercises, designed to help developers deepen their understanding of React concepts, improve their coding skills, and explore advanced features of the React ecosystem.
## Table of Contents
1. [Introduction](#introduction)
2. [Projects](#projects)
- [04bgChanger](#04bgchanger)
- [05PasswordGenerator](#05passwordgenerator)
- [06currencyConvertor](#06currencyconvertor)
- [07reactRouter](#07reactrouter)
- [08miniContext](#08minicontext)
- [09themeswitcher](#09themeswitcher)
- [10todocontextLocal](#10todocontextlocal)
- [reduxToolkitTodo](#reduxtoolkittodo)
3. [Getting Started](#getting-started)
4. [Installation](#installation)
5. [Usage](#usage)
6. [Contributing](#contributing)
7. [License](#license)
| Sr. No. | Project | Topics Covered |
|---------|--------------------|------------------------------------------------------|
| 1 | 04bgChanger | `useState` hook, event handling |
| 2 | 05PasswordGenerator| `useState`, `useCallback`, `useEffect`, `useRef` |
| 3 | 06currencyConvertor| Custom hooks, state management, side effects |
| 4 | 07reactRouter | React Router, routing, and navigation |
| 5 | 08miniContext | Context API, global state management |
| 6 | 09themeswitcher | Context API, state management, theming |
| 7 | 10todocontextLocal | Context API, local storage, state management |
| 8 | reduxToolkitTodo | Redux Toolkit, state management, actions, reducers |
## Introduction
The **React-Intermediate** repository showcases several projects that cover a range of React concepts, including state management with Redux Toolkit, use of hooks such as `useState`, `useCallback`, `useEffect`, and `useRef`, and advanced topics like the Context API. These projects are intended for developers who have a basic understanding of React and want to move towards more complex and scalable applications.
## Projects
### 04bgChanger
- **Description**: A simple background color changer that utilizes basic React state management to switch between different background colors.
- **Concepts Covered**: `useState` hook, event handling.
### 05PasswordGenerator
- **Description**: A password generator application that demonstrates the use of various hooks to manage state and effects, including `useState`, `useCallback`, `useEffect`, and `useRef`.
- **Concepts Covered**: State management, callback hooks, side effects, references.
### 06currencyConvertor
- **Description**: A currency converter app that uses custom hooks for encapsulating logic related to currency conversion.
- **Concepts Covered**: Custom hooks, state and effect management.
### 07reactRouter
- **Description**: A project focused on implementing React Router for navigating between different components/pages within a React application.
- **Concepts Covered**: React Router, routing and navigation.
### 08miniContext
- **Description**: A mini application that introduces the use of Context API to manage and share state across components without prop drilling.
- **Concepts Covered**: Context API, global state management.
### 09themeswitcher
- **Description**: A theme switcher application that allows users to toggle between different themes using context.
- **Concepts Covered**: Context API, state management, theming.
### 10todocontextLocal
- **Description**: A to-do list application that uses the Context API for state management and stores data locally to maintain the state even after a refresh.
- **Concepts Covered**: Context API, local storage.
### reduxToolkitTodo
- **Description**: A to-do list application utilizing Redux Toolkit for state management, demonstrating how Redux can be used for handling complex state in a scalable manner.
- **Concepts Covered**: Redux Toolkit, state management, actions, reducers.
## Getting Started
To get a copy of this repository and start working on these projects, follow the instructions below.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/dpvasani/React-Intermediate.git
```
2. Navigate to the project directory:
```bash
cd React-Intermediate
```
3. Install the required dependencies:
```bash
npm install
```
## Usage
Each project is contained within its own folder. You can run any project by navigating to its directory and starting the development server:
1. Navigate to the project folder:
```bash
cd
```
2. Start the development server:
```bash
npm start
```
Replace `` with the name of the project directory you wish to run, such as `04bgChanger` or `reduxToolkitTodo`.
## Contributing
Contributions are welcome! If you have any ideas or improvements, feel free to fork the repository, create a new branch, and submit a pull request. Please make sure to follow the existing code style and include appropriate tests where applicable.
1. Fork the repository.
2. Create a new branch: `git checkout -b feature-name`
3. Make your changes and commit them: `git commit -m 'Add feature-name'`
4. Push to the branch: `git push origin feature-name`
5. Open a pull request.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
Enjoy exploring and learning from these intermediate React projects! If you have any questions or need help, feel free to open an issue or reach out.
Happy Coding! 🎉