https://github.com/zeeshanali90233/react-js-learning-projects
React Js Learning Concepts
https://github.com/zeeshanali90233/react-js-learning-projects
components contextapi forms hooks learning props reactjs routing statevariables zeeshanali90233
Last synced: 14 days ago
JSON representation
React Js Learning Concepts
- Host: GitHub
- URL: https://github.com/zeeshanali90233/react-js-learning-projects
- Owner: zeeshanali90233
- Created: 2025-07-30T20:44:42.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-10-16T14:24:36.000Z (8 months ago)
- Last Synced: 2025-10-17T17:27:24.132Z (8 months ago)
- Topics: components, contextapi, forms, hooks, learning, props, reactjs, routing, statevariables, zeeshanali90233
- Language: JavaScript
- Homepage: http://zeeshan.p2pclouds.net/
- Size: 197 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# 🚀 React JS Vite Learning Projects
> A comprehensive collection of React.js learning projects built with Vite, covering fundamental concepts to advanced topics.
## 📚 Table of Contents
- [Overview](#overview)
- [Projects](#projects)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running Projects](#running-projects)
- [Learning Path](#learning-path)
- [Technologies Used](#technologies-used)
- [Contributing](#contributing)
- [Author](#author)
## 🎯 Overview
This repository contains a progressive series of React.js projects designed to help learn React concepts from basics to advanced topics. Each project focuses on specific React features and best practices, built with Vite for fast development experience.
## 📁 Projects
### 1. 🔄 State Variables
**Location:** `01_State_Variables/`
- **Focus:** React useState hook
- **Topics:** Component state management, state updates, re-rendering
- **Key Concepts:** useState, state initialization, functional updates
### 2. 📝 Forms
**Location:** `02_Forms/`
- **Focus:** Form handling in React
- **Topics:** Controlled components, form validation, event handling
- **Key Concepts:** onChange, onSubmit, form state management
### 3. 🧩 Components
**Location:** `03_Components/`
- **Focus:** Component composition and structure
- **Topics:** Creating reusable components, component hierarchy
- **Key Concepts:** JSX, component props, component composition
### 4. 🎁 Props
**Location:** `04_Props/`
- **Focus:** Data passing between components
- **Topics:** Props drilling, prop types, default props
- **Key Concepts:** Component communication, data flow
### 5. 🌐 Context API
**Location:** `05_Context API/`
- **Focus:** Global state management
- **Topics:** Context creation, providers, consumers
- **Key Concepts:** useContext, createContext, avoiding prop drilling
### 6. 🪝 Hooks
**Location:** `06_Hooks/`
- **Focus:** React hooks ecosystem
- **Topics:** Built-in hooks, custom hooks, hook rules
- **Key Concepts:** useEffect, useReducer, useMemo, useCallback
### 7. 🛤️ Routing-1
**Location:** `07_Routing-1/`
- **Focus:** Basic routing concepts
- **Topics:** Single Page Applications, route setup
- **Key Concepts:** React Router basics, navigation
### 8. 🚦 Routing-2
**Location:** `08_Routing-2/`
- **Focus:** Advanced routing features
- **Topics:** Dynamic routes, nested routing, route guards
- **Key Concepts:** useParams, useNavigate, protected routes
### 9. 🌟 API Fetching + React Bootstrap (Final Project)
**Location:** `09_API_Fetching_React_Bootstrap_Final/`
- **Focus:** Complete application with external APIs
- **Topics:** Data fetching, UI frameworks, real-world application
- **Key Concepts:** fetch/axios, Bootstrap integration, loading states
## 🚀 Getting Started
### Prerequisites
Before running these projects, make sure you have:
- **Node.js** (version 16.0 or higher)
- **npm** or **yarn** package manager
- **Git** for version control
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/zeeshanali90233/react-js-learning-projects.git
cd react-js-learning-projects
```
2. **Navigate to any project directory:**
```bash
cd 01_State_Variables
```
3. **Install dependencies:**
```bash
npm install
```
### Running Projects
Each project can be run independently:
```bash
# Navigate to the project directory
cd 01_State_Variables
# Install dependencies (if not already done)
npm install
# Start the development server
npm run dev
# Open browser and visit http://localhost:5173
```
## 📈 Learning Path
Follow this recommended sequence for optimal learning:
```
01_State_Variables → 02_Forms → 03_Components → 04_Props →
05_Context_API → 06_Hooks → 07_Routing-1 → 08_Routing-2 →
09_API_Fetching_React_Bootstrap_Final
```
Each project builds upon concepts from previous projects, creating a comprehensive learning experience.
## 🛠️ Technologies Used
- **⚛️ React.js** - Frontend library for building user interfaces
- **⚡ Vite** - Next generation frontend tooling
- **📦 npm** - Package manager
- **🎨 CSS3** - Styling and layouts
- **🟨 JavaScript (ES6+)** - Programming language
- **🅱️ React Bootstrap** - UI framework (Final project)
## 📋 Available Scripts
In each project directory, you can run:
- `npm run dev` - Starts the development server
- `npm run build` - Builds the app for production
- `npm run preview` - Preview the production build locally
- `npm run lint` - Run ESLint for code quality
## 🤝 Contributing
Contributions are welcome! Feel free to:
1. Fork the project
2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📝 Notes
- Each project includes its own README with specific instructions
- Projects are built with Vite for fast development experience
- Code follows React best practices and modern JavaScript standards
- All projects are responsive and mobile-friendly
## 👨💻 Author
**Zeeshan Ali**
- GitHub: [@zeeshanali90233](https://github.com/zeeshanali90233)
- Email: zeeshanali90233@gmail.com
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
---
🌟 Happy Learning! 🌟
If you found this helpful, please give it a ⭐️