React Intro

// ===== The model in three ideas =====
// 1. Components: small, reusable pieces of UI built from JSX
// 2. Props in, state owned; data flows down, events bubble up
// 3. The UI is a function of state — set state, React re-renders

// ===== A first component =====
function Hello({ name }) {
  return <h1>Hello, {name}</h1>;
}

// ===== State + events =====
import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

// ===== Composition =====
function App() {
  return (
    <main>
      <Hello name="world" />
      <Counter />
    </main>
  );
}

// ===== What React is NOT =====
// - Not a framework (no router, no data layer baked in)
// - Not opinionated about CSS or build (use Vite / Next / Remix to wrap)
// - Not magic — it diffs; you choose state shape and update timing

// ===== Where React shines =====
// - Interactive UIs where state changes constantly
// - Large component trees with shared design language
// - Teams wanting reuse across web + React Native

// ===== Where to start =====
// Vite + React + TypeScript:
//   npm create vite@latest my-app -- --template react-ts
//   cd my-app && npm i && npm run dev

// ===== Patterns to internalise =====
// - Single source of truth: each piece of state lives in exactly one component
// - Lift state up to the lowest common parent
// - Derive what you can; useState what you must
// - Effects for sync with the outside world; never for derived data

// ===== Pitfalls =====
// - Treating state as a mutable object (mutate -> setState({...}))
// - Putting derived values in state instead of computing in render
// - useEffect for everything; most cases are derived state or event handlers
// - Skipping keys on lists -> incorrect diffing

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