# Python: a function takes input and returns output
def greet(name: str) -> str:
    return f"Hello, {name}"

print(greet("Asha"))

# React: a component takes props and returns UI
# (see the next tab) — the same idea applied to the screen

// Greeting.jsx
export default function Greeting({ name }) {
  return <h2>Hello, {name}</h2>;
}

// App.jsx
import Greeting from "./Greeting";

export default function App() {
  return (
    <main>
      <Greeting name="Asha" />
      <Greeting name="Ravi" />
    </main>
  );
}

# pip install fastapi uvicorn
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["http://localhost:5173"],
                   allow_methods=["*"], allow_headers=["*"])

tasks = [{"id": 1, "title": "Learn React", "done": False}]

class TaskIn(BaseModel):
    title: str

@app.get("/tasks")
def list_tasks():
    return tasks

@app.post("/tasks", status_code=201)
def add_task(task: TaskIn):
    new = {"id": len(tasks) + 1, "title": task.title, "done": False}
    tasks.append(new)
    return new

# Run: uvicorn main:app --reload

import { useEffect, useState } from "react";

const API = "http://localhost:8000";

export default function Tasks() {
  const [tasks, setTasks] = useState([]);
  const [title, setTitle] = useState("");
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(`${API}/tasks`)
      .then((r) => r.json())
      .then(setTasks)
      .catch(() => setError("Could not load tasks"));
  }, []);

  async function addTask(e) {
    e.preventDefault();
    const r = await fetch(`${API}/tasks`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title }),
    });
    const created = await r.json();
    setTasks((prev) => [...prev, created]);
    setTitle("");
  }

  if (error) return <p>{error}</p>;
  return (
    <section>
      <form onSubmit={addTask}>
        <input value={title} onChange={(e) => setTitle(e.target.value)} />
        <button type="submit">Add</button>
      </form>
      <ul>{tasks.map((t) => <li key={t.id}>{t.title}</li>)}</ul>
    </section>
  );
}

from fastapi import FastAPI
from pydantic import BaseModel
import joblib

app = FastAPI()
model = joblib.load("price_model.joblib")   # a trained scikit-learn model

class House(BaseModel):
    area_sqft: float
    bedrooms: int

@app.post("/predict")
def predict(h: House):
    price = model.predict([[h.area_sqft, h.bedrooms]])[0]
    return {"predicted_price": round(float(price), 2)}

import { useState } from "react";

export default function PricePredictor() {
  const [area, setArea] = useState(1000);
  const [beds, setBeds] = useState(2);
  const [result, setResult] = useState(null);

  async function predict(e) {
    e.preventDefault();
    const r = await fetch("http://localhost:8000/predict", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ area_sqft: Number(area), bedrooms: Number(beds) }),
    });
    setResult(await r.json());
  }

  return (
    <form onSubmit={predict}>
      <label>Area (sq ft) <input type="number" value={area} onChange={(e) => setArea(e.target.value)} /></label>
      <label>Bedrooms <input type="number" value={beds} onChange={(e) => setBeds(e.target.value)} /></label>
      <button type="submit">Predict</button>
      {result && <p>Estimated price: {result.predicted_price}</p>}
    </form>
  );
}

Week 1: Modern JavaScript — let/const, arrow functions, arrays, fetch, async/await
Week 2: React basics — components, props, JSX, lists with keys
Week 3: State and forms — useState, controlled inputs, events
Week 4: Data fetching — useEffect, loading and error states
Week 5: Connect to your FastAPI or Django API, handle CORS
Week 6: Build and deploy one full feature end to end

Python               JavaScript
list                 array
dict                 object
f"Hi {name}"         `Hi ${name}`
[x*2 for x in xs]    xs.map(x => x * 2)
async def / await    async function / await
None                 null / undefined

Full feature checklist
☐ Python API endpoint with validation
☐ CORS configured for the dev origin
☐ React page that lists data
☐ Form that creates data
☐ Loading and error states
☐ README with run steps for both parts