This repository provides a structured learning path through a collection of React.js projects and notes, helping you grasp the fundamentals and delve deeper into advanced concepts. Each project progresses in difficulty, starting with basic building blocks and leading to more intricate applications.
Project Name | Description | Difficulty |
---|---|---|
01_basicreact | Covers core React concepts like components, props, and state. | Beginner |
01_vite-react | Demonstrates setting up React with Vite. | Beginner |
02_react-starts-from-here | Offers a starter point for building your own React app. | Beginner |
03_customReact | Explores creating a custom React renderer. | Advanced |
04_counter-app-project | Builds a simple counter app using React hooks. | Beginner |
05_tailwind-and-props | Showcases using Tailwind CSS and props in React. | Intermediate |
06_bgChanger | Manipulates state in React to change the background color. | Intermediate |
07_passwordGenerator | Implements a password generator using React hooks. | Intermediate |
08_todo | Builds a practical todo application using React. | Intermediate |
09_tictactoe | Creates a tic-tac-toe game to test your understanding. | Advanced |
10_reactRouter | Introduces React Router for managing navigation in your app. | Intermediate |
11_weatherApp | Fetches weather data from OpenWeatherMap API to build a weather app. | Advanced |
12_useContext | Explores the concept of props drilling and useContext. | Advanced |
13_currencyConverter | Explores the concept of custom Hooks with a simple currency converter app. | Advanced |
Additional Resources:
- Each project's
Readme.md
file provides more detailed information and instructions. - The
.idea
directory contains IDE-specific files for your convenience.
- Clone the repository:
git clone https://github.com/prakhar0711/Learn-React-Js.git
- Install dependencies:
cd Learn-React-Js npm install
- Open your preferred IDE and start learning!
We welcome contributions to this repository! Feel free to fork the repository and submit pull requests with your improvements.
- After completing
04_counter-app-project
, consider reading thereact-fiber-architecture
README: https://github.com/acdlite/react-fiber-architecture for deeper insights into React's internal workings.
- Background Changer (06_bgChanger): https://github.com/prakhar0711/Learn-React-Js/assets/110115604/5257da96-0fd3-400f-89c2-8d16f942c9be
- Password Generator (07_passwordGenerator): https://github.com/prakhar0711/Learn-React-Js/assets/110115604/b579c6ff-ed7d-4b27-ac86-4464e405ba94
- Weather App (11_weatherApp): https://github.com/prakhar0711/Learn-React-Js/assets/110115604/fd9c97d6-1467-4808-b6dd-4b59fd70e11e
- Currency Converter (13_currencyConverter): https://github.com/prakhar0711/Learn-React-Js/assets/110115604/b58a2812-0c4c-430d-a303-977061c6415c