https://github.com/abdullah-niaz/react
https://github.com/abdullah-niaz/react
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/abdullah-niaz/react
- Owner: Abdullah-Niaz
- Created: 2024-08-24T07:07:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-28T11:59:17.000Z (about 1 year ago)
- Last Synced: 2025-03-09T20:59:49.316Z (7 months ago)
- Language: JavaScript
- Size: 341 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧭 React Beginner Roadmap (2025 Edition)
---
## 🟢 1. **Prerequisites (Before React)**
Make sure you're confident in:
### ✅ HTML & CSS
- Semantic HTML
- Flexbox & Grid
- Forms
- Media Queries
### ✅ JavaScript (ES6+)
- `let`, `const`, arrow functions
- `map`, `filter`, `reduce`
- Spread/rest operators
- Destructuring
- Callbacks, Promises, async/await
- `this`, closures, scope, hoisting
- DOM manipulation
### ✅ Git & GitHub
- Clone, commit, push, pull
- Creating branches
- README writing
---
## 🟡 2. **React Core Concepts**
> 🎯 Goal: Understand the core building blocks of React.
### 📦 Environment Setup
- Install Node.js & npm
- Create a project using:
```bash
npx create-react-app my-app
```
or use **Vite** for a faster setup:
```bash
npm create vite@latest
```
### 📘 JSX (JavaScript XML)
- Embedding expressions
- Differences from HTML (e.g., `className` vs `className`)
### 🔥 Components
- Functional components
- Props
- Reusability
### 🔄 State Management (Local)
- `useState` hook
- Updating and rendering state
### 📢 Event Handling
- Handling user input
- Passing functions as props
### 🌐 Conditional Rendering
- `if/else`, ternary operator
- `&&` short-circuit
### 🔁 Lists and Keys
- Rendering lists with `.map()`
- Importance of unique `key`
### 🎨 Styling in React
- CSS Modules
- Inline Styles
- Styled Components (optional)
- TailwindCSS (optional)
---
## 🔵 3. **React Intermediate Concepts**
> 🎯 Goal: Build apps that can manage UI logic better.
### 🪝 React Hooks (Core)
- `useEffect` for side effects (API calls, event listeners)
- `useRef` for accessing DOM or persisting values
- `useContext` for prop drilling avoidance
### 📡 Fetching Data
- Using `fetch` or `axios`
- Loading and error states
### 🧩 Forms and Controlled Components
- `onChange`, `value` in inputs
- Controlled vs Uncontrolled forms
- Form validation (optional: libraries like Formik/Yup)
### 🗂️ Component Reusability and Composition
- Children props
- Higher Order Components (HOC)
- Custom Hooks
---
## 🟠 4. **React Routing & Navigation**
> 🎯 Goal: Build multipage apps.
### 🧭 React Router DOM
- Installation:
```bash
npm install react-router-dom
```
- Basic Routing: ``, ``, ``
- Route Parameters
- Navigation: `useNavigate()`
- Nested Routes
- 404 Pages
---
## 🔴 5. **React Advanced Concepts**
> 🎯 Goal: Create scalable and performant React apps.
### 📦 Global State Management
- Context API
- Redux Toolkit or Zustand (recommended)
- When to use global state?
### 💡 Code Splitting & Lazy Loading
- `React.lazy`, `Suspense`
### 🚀 Performance Optimization
- `React.memo`, `useMemo`, `useCallback`
- Virtualization (React Window)
### 🧪 Testing (Optional but Useful)
- Unit Testing with Jest
- Component Testing with React Testing Library
---
## 🟣 6. **Project Ideas for Practice**
| Level | Project Idea | Concepts Covered |
| ----- | --------------------------- | ------------------------------------------ |
| 🔰 | Counter App | useState, Events |
| 🟡 | Todo List | Lists, Forms, State |
| 🟠 | Weather App (API) | useEffect, Fetch API |
| 🔵 | Quiz App | Conditional Rendering, State, Events |
| 🔴 | Blog App with Routing | Router, Forms, Context API |
| 🟣 | Expense Tracker with Charts | Local Storage, useEffect, Third-party libs |
---
## 🟤 7. **Bonus Tools & Tips**
### 💼 Developer Tools
- React Developer Tools (Chrome Extension)
- VSCode Extensions: ESLint, Prettier, React Snippets
### 📦 UI Libraries
- Material UI
- Chakra UI
- Tailwind CSS
### 🧰 Other Tools
- Vite (Fast React dev server)
- Figma (for UI design)
- Netlify / Vercel (for deployment)
---
## ✅ 8. **Deploy Your App**
- Build using:
```bash
npm run build
```
- Deploy using:
- Netlify
- Vercel
- GitHub Pages
---
## 📚 9. **Learning Resources**
- **Docs**: [https://react.dev/](https://react.dev/)
- **YouTube**:
- `freeCodeCamp React Course`
- `Codevolution`
- `Web Dev Simplified`
- `chai ur code`
- **Practice**:
- [frontendmentor.io](https://www.frontendmentor.io/)
- [devchallenges.io](https://devchallenges.io/)
- [codewell.cc](https://www.codewell.cc
-
## For Now covered topics :
- Introduction to React v19
- JSX and Rendering Elements
- Components and Props
- State and Lifecycle
- Handling Events
- Conditional Rendering
- Styled Components
- Object Based Styling
- Template literal Styling
- Event Handling
- Passing Event Handlers as a Props
- Event Propagation
- Capturing Phase
- Target Phase
- Bubbling Phase
- states & how state works
- Derived States
- **Project:** Toggle Switch (Palying with States)