🚀 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
• Projects
• Getting Started
• Prerequisites
• Installation
• Running Projects
• Learning Path
• Technologies Used
• Contributing
• 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:

   git clone https://github.com/zeeshanali90233/react-js-learning-projects.git
   cd react-js-learning-projects

2. Navigate to any project directory:

   cd 01_State_Variables

3. Install dependencies:

   npm install

Running Projects

Each project can be run independently:

# 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
• Email: [email protected]

📄 License

This project is open source and available under the MIT License.

---

🌟 Happy Learning! 🌟

If you found this helpful, please give it a ⭐️