// App.jsx (created with: npm create vite@latest my-app -- --template react)
function Welcome({ name }) {
  return <h1 className="title">Hello, {name}!</h1>;
}

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

function Status({ isOnline }) {
  return (
    <p>
      {isOnline ? "Online" : "Offline"}
      {isOnline && <span> ●</span>}
    </p>
  );
}
// ternary for either/or, && for show-or-hide

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Add</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

import { useState } from "react";

function Item({ name, onAdd }) {
  return <button onClick={() => onAdd(name)}>Add {name}</button>;
}

export default function Cart() {
  const [items, setItems] = useState([]);
  const add = (name) => setItems([...items, name]);   // new array, not push
  return (
    <div>
      <Item name="Pen" onAdd={add} />
      <Item name="Book" onAdd={add} />
      <p>Cart: {items.join(", ") || "empty"}</p>
    </div>
  );
}

import { useState } from "react";

export default function Todos() {
  const [text, setText] = useState("");
  const [todos, setTodos] = useState([]);

  function handleSubmit(e) {
    e.preventDefault();
    if (!text.trim()) return;
    setTodos([...todos, { id: Date.now(), text }]);
    setText("");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button>Add</button>
      <ul>{todos.map((t) => <li key={t.id}>{t.text}</li>)}</ul>
    </form>
  );
}

import { useEffect, useState } from "react";

export default function Users() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((r) => r.json())
      .then(setUsers)
      .catch(() => setError("Could not load users"));
  }, []);   // empty array: run once after first render

  if (error) return <p>{error}</p>;
  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

First React Project: Movie Watchlist
Components:
  App → SearchBar, MovieList → MovieCard, Watchlist
State:
  query (string), results (array), watchlist (array)
Features:
  ☐ Search movies from a public API
  ☐ Show results as cards
  ☐ Add/remove from watchlist
  ☐ Save watchlist in localStorage
  ☐ Loading and error messages
Deploy: Netlify / Vercel / GitHub Pages

Component Map (draw before coding)
App
├── Header
├── SearchBar        props: onSearch
├── MovieList        props: movies, onAdd
│   └── MovieCard    props: movie, onAdd
└── Watchlist        props: items, onRemove
State lives in App and flows down as props.

React Basics Checklist
☐ Create a project with Vite
☐ Write components with JSX
☐ Pass and use props
☐ useState for changing data
☐ Handle click and form events
☐ Render lists with keys
☐ Fetch data with useEffect
☐ Show loading and error states
☐ Deploy the app