{"id":30503749,"url":"https://github.com/zeeshanali90233/react-js-learning-projects","last_synced_at":"2026-05-18T15:11:36.337Z","repository":{"id":307367878,"uuid":"1029303604","full_name":"zeeshanali90233/React-JS-Learning-Projects","owner":"zeeshanali90233","description":"React Js Learning Concepts","archived":false,"fork":false,"pushed_at":"2025-10-16T14:24:36.000Z","size":202,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-17T17:27:24.132Z","etag":null,"topics":["components","contextapi","forms","hooks","learning","props","reactjs","routing","statevariables","zeeshanali90233"],"latest_commit_sha":null,"homepage":"http://zeeshan.p2pclouds.net/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeeshanali90233.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-30T20:44:42.000Z","updated_at":"2025-10-16T14:24:41.000Z","dependencies_parsed_at":"2025-08-25T13:42:32.835Z","dependency_job_id":"3a7923b3-65a4-4c16-a25a-3111d459d48a","html_url":"https://github.com/zeeshanali90233/React-JS-Learning-Projects","commit_stats":null,"previous_names":["zeeshanali90233/react-js-learning-projects"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zeeshanali90233/React-JS-Learning-Projects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshanali90233%2FReact-JS-Learning-Projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshanali90233%2FReact-JS-Learning-Projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshanali90233%2FReact-JS-Learning-Projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshanali90233%2FReact-JS-Learning-Projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeeshanali90233","download_url":"https://codeload.github.com/zeeshanali90233/React-JS-Learning-Projects/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshanali90233%2FReact-JS-Learning-Projects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33181936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","contextapi","forms","hooks","learning","props","reactjs","routing","statevariables","zeeshanali90233"],"created_at":"2025-08-25T13:42:28.052Z","updated_at":"2026-05-18T15:11:31.329Z","avatar_url":"https://github.com/zeeshanali90233.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 React JS Vite Learning Projects\n\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)\n\n\u003e A comprehensive collection of React.js learning projects built with Vite, covering fundamental concepts to advanced topics.\n\n## 📚 Table of Contents\n\n- [Overview](#overview)\n- [Projects](#projects)\n- [Getting Started](#getting-started)\n- [Prerequisites](#prerequisites)\n- [Installation](#installation)\n- [Running Projects](#running-projects)\n- [Learning Path](#learning-path)\n- [Technologies Used](#technologies-used)\n- [Contributing](#contributing)\n- [Author](#author)\n\n## 🎯 Overview\n\nThis 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.\n\n## 📁 Projects\n\n### 1. 🔄 State Variables\n**Location:** `01_State_Variables/`\n- **Focus:** React useState hook\n- **Topics:** Component state management, state updates, re-rendering\n- **Key Concepts:** useState, state initialization, functional updates\n\n### 2. 📝 Forms\n**Location:** `02_Forms/`\n- **Focus:** Form handling in React\n- **Topics:** Controlled components, form validation, event handling\n- **Key Concepts:** onChange, onSubmit, form state management\n\n### 3. 🧩 Components\n**Location:** `03_Components/`\n- **Focus:** Component composition and structure\n- **Topics:** Creating reusable components, component hierarchy\n- **Key Concepts:** JSX, component props, component composition\n\n### 4. 🎁 Props\n**Location:** `04_Props/`\n- **Focus:** Data passing between components\n- **Topics:** Props drilling, prop types, default props\n- **Key Concepts:** Component communication, data flow\n\n### 5. 🌐 Context API\n**Location:** `05_Context API/`\n- **Focus:** Global state management\n- **Topics:** Context creation, providers, consumers\n- **Key Concepts:** useContext, createContext, avoiding prop drilling\n\n### 6. 🪝 Hooks\n**Location:** `06_Hooks/`\n- **Focus:** React hooks ecosystem\n- **Topics:** Built-in hooks, custom hooks, hook rules\n- **Key Concepts:** useEffect, useReducer, useMemo, useCallback\n\n### 7. 🛤️ Routing-1\n**Location:** `07_Routing-1/`\n- **Focus:** Basic routing concepts\n- **Topics:** Single Page Applications, route setup\n- **Key Concepts:** React Router basics, navigation\n\n### 8. 🚦 Routing-2\n**Location:** `08_Routing-2/`\n- **Focus:** Advanced routing features\n- **Topics:** Dynamic routes, nested routing, route guards\n- **Key Concepts:** useParams, useNavigate, protected routes\n\n### 9. 🌟 API Fetching + React Bootstrap (Final Project)\n**Location:** `09_API_Fetching_React_Bootstrap_Final/`\n- **Focus:** Complete application with external APIs\n- **Topics:** Data fetching, UI frameworks, real-world application\n- **Key Concepts:** fetch/axios, Bootstrap integration, loading states\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nBefore running these projects, make sure you have:\n\n- **Node.js** (version 16.0 or higher)\n- **npm** or **yarn** package manager\n- **Git** for version control\n\n### Installation\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/zeeshanali90233/react-js-learning-projects.git\n   cd react-js-learning-projects\n   ```\n\n2. **Navigate to any project directory:**\n   ```bash\n   cd 01_State_Variables\n   ```\n\n3. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n\n### Running Projects\n\nEach project can be run independently:\n\n```bash\n# Navigate to the project directory\ncd 01_State_Variables\n\n# Install dependencies (if not already done)\nnpm install\n\n# Start the development server\nnpm run dev\n\n# Open browser and visit http://localhost:5173\n```\n\n## 📈 Learning Path\n\nFollow this recommended sequence for optimal learning:\n\n```\n01_State_Variables → 02_Forms → 03_Components → 04_Props → \n05_Context_API → 06_Hooks → 07_Routing-1 → 08_Routing-2 → \n09_API_Fetching_React_Bootstrap_Final\n```\n\nEach project builds upon concepts from previous projects, creating a comprehensive learning experience.\n\n## 🛠️ Technologies Used\n\n- **⚛️ React.js** - Frontend library for building user interfaces\n- **⚡ Vite** - Next generation frontend tooling\n- **📦 npm** - Package manager\n- **🎨 CSS3** - Styling and layouts\n- **🟨 JavaScript (ES6+)** - Programming language\n- **🅱️ React Bootstrap** - UI framework (Final project)\n\n## 📋 Available Scripts\n\nIn each project directory, you can run:\n\n- `npm run dev` - Starts the development server\n- `npm run build` - Builds the app for production\n- `npm run preview` - Preview the production build locally\n- `npm run lint` - Run ESLint for code quality\n\n## 🤝 Contributing\n\nContributions are welcome! Feel free to:\n\n1. Fork the project\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📝 Notes\n\n- Each project includes its own README with specific instructions\n- Projects are built with Vite for fast development experience\n- Code follows React best practices and modern JavaScript standards\n- All projects are responsive and mobile-friendly\n\n## 👨‍💻 Author\n\n**Zeeshan Ali**\n- GitHub: [@zeeshanali90233](https://github.com/zeeshanali90233)\n- Email: zeeshanali90233@gmail.com\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e🌟 Happy Learning! 🌟\u003c/h3\u003e\n  \u003cp\u003eIf you found this helpful, please give it a ⭐️\u003c/p\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeeshanali90233%2Freact-js-learning-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeeshanali90233%2Freact-js-learning-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeeshanali90233%2Freact-js-learning-projects/lists"}