---

🔰 Overview of the 4-Day React.js Workflow

---

📅 DAY 1 – React Basics & Components

✅ Topics Covered:

• What is React?

• Setting up React with Vite

• JSX syntax

• Functional Components

• Props

• Event Handling

🛠 Setup (Vite):

npm create vite@latest react-app -- --template react
cd react-app
npm install
npm run dev

---

📌 JSX & Components

// App.jsx
function Welcome() {
  return <h1>Hello, React Learners!</h1>;
}

export default function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

💡 Explanation:

• JSX is like HTML in JavaScript.

• Welcome is a reusable functional component.

---

📌 Props

function Greet(props) {
  return <h2>Hello, {props.name}</h2>;
}

// App.jsx
<Greet name="Keshav" />

---

📌 Event Handling

function ButtonClick() {
  const handleClick = () => {
    alert("Button was clicked!");
  };
  return <button onClick={handleClick}>Click Me</button>;
}

---

🛠 🧪 Mini Project 1: “Introduction Card App”

Goal: Create a reusable component to display name, image, and a short bio using props.

jsxCopyEditfunction Card({ name, image, bio }) {
  return (
    <div>
      <img src={image} width="100" />
      <h3>{name}</h3>
      <p>{bio}</p>
    </div>
  );
}

// App.jsx
<Card
  name="Keshav"
  image="https://via.placeholder.com/100"
  bio="Frontend Developer"
/>

✅ Skills Used: JSX, Props, Functional Components

📅 DAY 2 – State, useState & Lists

✅ Topics Covered:

• State in React

• useState Hook

• Conditional Rendering

• Lists and Keys

---

📌 useState Hook

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

---

📌 Conditional Rendering

function LoginStatus({ isLoggedIn }) {
  return <h3>{isLoggedIn ? "Welcome Back!" : "Please Login"}</h3>;
}

---

📌 List Rendering

const fruits = ["Apple", "Banana", "Cherry"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

---

🛠 🧪 Mini Project 2: “To-Do List App”

Goal: Allow user to add and delete tasks.

jsxCopyEditfunction TodoApp() {
  const [task, setTask] = useState("");
  const [list, setList] = useState([]);

  const addTask = () => {
    setList([...list, task]);
    setTask("");
  };

  const deleteTask = (index) => {
    setList(list.filter((_, i) => i !== index));
  };

  return (
    <>
      <input value={task} onChange={(e) => setTask(e.target.value)} />
      <button onClick={addTask}>Add</button>
      <ul>
        {list.map((t, i) => (
          <li key={i}>
            {t} <button onClick={() => deleteTask(i)}>❌</button>
          </li>
        ))}
      </ul>
    </>
  );
}

✅ Skills Used: useState, lists, rendering, dynamic data handling

📅 DAY 3 – useEffect, Forms & Controlled Components

✅ Topics Covered:

• useEffect Hook

• Fetching Data (JSONPlaceholder)

• Forms in React

• Controlled vs Uncontrolled Components

---

📌 useEffect & Fetch

import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

---

📌 Forms & Controlled Inputs

function ContactForm() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello, ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

---

🛠 🧪 Mini Project 3: “User Finder App”

Goal: Fetch and display users from API and filter them with input.

jsxCopyEditfunction UserFinder() {
  const [users, setUsers] = useState([]);
  const [query, setQuery] = useState("");

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <>
      <input
        placeholder="Search user"
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {users
          .filter((user) => user.name.toLowerCase().includes(query.toLowerCase()))
          .map((user) => <li key={user.id}>{user.name}</li>)}
      </ul>
    </>
  );
}

✅ Skills Used: useEffect, API handling, filters, controlled components

📅 DAY 4 – Routing & Mini Project

✅ Topics Covered:

• React Router

• Routing Pages

• Mini Project (e.g., Contact Manager)

---

📌 React Router Setup

npm install react-router-dom

// App.jsx
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

---

🧩 Mini Project: Contact Manager App

Features:

• Add contact

• List contact

• Delete contact

---

📌 ContactManager.jsx

import { useState } from "react";

function ContactManager() {
  const [contacts, setContacts] = useState([]);
  const [input, setInput] = useState("");

  const addContact = () => {
    setContacts([...contacts, input]);
    setInput("");
  };

  const deleteContact = (index) => {
    const newList = contacts.filter((_, i) => i !== index);
    setContacts(newList);
  };

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addContact}>Add</button>
      <ul>
        {contacts.map((c, i) => (
          <li key={i}>
            {c} <button onClick={() => deleteContact(i)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

---

✅ Final Recap & Deployment Tips

• Use Netlify/Vercel to deploy.

• Push code to GitHub.

• Build static site: npm run build.

🧩 🎓 Final Project: “Contact Manager App”

Features:

• Add, display, delete contacts

• Use React Router for page navigation

---

🛠 Project Structure:

bashCopyEdit/src
  ├── components/
  │     └── ContactForm.jsx
  │     └── ContactList.jsx
  ├── pages/
  │     └── Home.jsx
  │     └── About.jsx
  └── App.jsx

---

🧱 App.jsx

jsxCopyEdit<BrowserRouter>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

---

🧱 ContactForm.jsx

jsxCopyEditfunction ContactForm({ onAdd }) {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd(name);
    setName("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        placeholder="Contact name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button>Add</button>
    </form>
  );
}

---

🧱 ContactList.jsx

jsxCopyEditfunction ContactList({ contacts, onDelete }) {
  return (
    <ul>
      {contacts.map((c, i) => (
        <li key={i}>
          {c} <button onClick={() => onDelete(i)}>❌</button>
        </li>
      ))}
    </ul>
  );
}

---

✅ Final Project Outcome:

• Demonstrates React fundamentals

• Full page navigation

• Real-world use of state, props, forms, and routing

---

✅ Suggested Deployment

• Host on Netlify or Vercel

• Build using:

bashCopyEditnpm run build

---

🧾 Summary

---

Thank you