Welcome file

Welcome file.md

📌 React Roadmap for One-Day Session

⏳ Total Duration: ~6-7 Hours

• Introduction (30 mins)
• Core Concepts (2-2.5 hrs)
• Hands-on Project (2.5 hrs)
• Q&A & Best Practices (1 hr)

---

📢 Session Breakdown

1️⃣ Introduction to React (30 mins)

• What is React? Why use it?
• Differences between Vanilla JS & React
• React vs. Other Frameworks (Angular, Vue)
• Setting up the environment (Node.js, npm, Vite/CRA)
• Installing dependencies (npx create-react-app my-app or npm create vite@latest my-app --template react)

---

2️⃣ Core React Concepts (2 - 2.5 hrs)

🔹 JSX & Components (45 mins)

• JSX Basics & why it's needed
• Functional Components vs. Class Components
• Props & Default Props
• Hands-on: Create a simple ProfileCard component with props

🔹 State & Hooks (45 mins)

• useState Hook
• Handling events & state updates
• Hands-on: Create a Counter App using useState

🔹 Effects & API Calls (30 mins)

• useEffect Hook
• Fetching data using fetch() or axios
• Hands-on: Fetch & display user data from a public API (e.g., JSONPlaceholder)

🔹 React Router (30 mins)

• Why use a router?
• Setting up react-router-dom
• Creating multiple pages (Home, About, Contact)
• Hands-on: Basic multi-page app

---

3️⃣ Hands-on Project (2.5 hrs)

🔹 Build a Simple To-Do App

• Setup project folder & install dependencies
• Create components: Header, TaskList, AddTask, Footer
• Use useState to manage tasks
• Add useEffect for local storage (optional)
• Style using Tailwind CSS (optional)
• Bonus: Implement a delete task feature

---

4️⃣ Q&A & Best Practices (1 hr)

• Common mistakes beginners make
• Component structuring & best practices
• When to use context, state management (Redux, Zustand)
• Deployment options (Vercel, Netlify)
• Open floor for questions

---

📌 Requirements for Participants

• Basic HTML, CSS, JavaScript knowledge
• Laptop with Node.js installed
• VS Code & GitHub (optional)