Project Title

This is a React-based application designed to help you learn React through hands-on projects. Starting with the basics, it guides you on how to create simple React functional components and use hooks to manage state. The project includes a variety of sample projects, such as building a to-do list and a clock, making it a practical resource. Whether you're new to React or looking for a refresher, this project is a great starting point. Check out the Branches section of this README file, where each branch focuses on different aspects of learning React.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

You need to install below items before running this project:

• Node.js (https://nodejs.org/en/download/)
• npm (comes with Node.js)
• Git (https://git-scm.com/downloads)

Installing

A step-by-step guide to getting a development environment running.

1. Clone the repository

   git clone https://github.com/yr5913/my-react-app.git
   

2. Navigate to the folder

   cd my-react-app

3. Install dependencies

   npm install

4. Run the Application

   npm run dev
   

Your application will run on port 5173. You can access your application using the link http://localhost:5173/

Branches

1. simple-component -- create a simple component
2. card-component -- create a card component
3. styling-css -- learn how to use different styling such as global, module level and inline css in react
4. props -- using props in react
5. conditional-render -- rendering items based on conditions
6. render-lists -- rendering lists in react components
7. click-events -- handling click events in react
8. hook -- intro to hooks and use of useState hook
9. on-change-event -- working with on change event and useState hook
10. color-picker-app -- building a color picker app using the things learnt so far
11. updater-functions -- use of updater functions in state setter methods
12. object-state -- working with state of objects
13. arrays-state -- working with state of arrays
14. array-of-objects-state -- working with array of objects state
15. todo-list-app -- building a to-do list app using the array of objects state
16. use-effect-hook -- learning the usage of useEffect hook
17. digital-clock-app -- building a digital clock app using react
18. use-context-hook -- usage of useContext hooks to avoid props drilling
19. use-ref-hook -- usage of useRef hook