From c153e04e2aef8cd1e747803203ee1e26e252232d Mon Sep 17 00:00:00 2001 From: Darshan Vasani <109815626+dpvasani@users.noreply.github.com> Date: Wed, 28 Aug 2024 13:16:22 +0530 Subject: [PATCH] Create README.md --- README.md | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..d49d62d --- /dev/null +++ b/README.md @@ -0,0 +1,134 @@ +# 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! 🎉