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
2. Projects
   • 04bgChanger
   • 05PasswordGenerator
   • 06currencyConvertor
   • 07reactRouter
   • 08miniContext
   • 09themeswitcher
   • 10todocontextLocal
   • reduxToolkitTodo
3. Getting Started
4. Installation
5. Usage
6. Contributing
7. License

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:

   git clone https://github.com/dpvasani/React-Intermediate.git
   

2. Navigate to the project directory:

   cd React-Intermediate
   

3. Install the required dependencies:

   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:

   cd <project-folder>
   

2. Start the development server:

   npm start
   

Replace <project-folder> 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 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! 🎉