React – komponenty i stan

<div id="root"></div>

<script type="importmap">
{ "imports": {
  "react": "https://esm.sh/react@19.3.1",
  "react-dom/client": "https://esm.sh/react-dom@19.3.1/client"
} }
</script>
<script src="https://unpkg.com/@babel/standalone@7.29.10/babel.min.js"></script>

<script type="text/babel" data-type="module" data-presets="react">
import React from 'react';
import { createRoot } from 'react-dom/client';

const uczen = { imie: 'Ola', oceny: [5, 4, 6, 3] };
const srednia = uczen.oceny.reduce((suma, o) => suma + o, 0) / uczen.oceny.length;

function App() {
  const zagrozona = srednia < 2;
  return (
    <>
      {/* komentarz w JSX */}
      <h2 className="naglowek">Karta ucznia: {uczen.imie}</h2>
      <p style={{ color: zagrozona ? 'crimson' : 'green', fontWeight: 'bold' }}>
        Średnia: {srednia.toFixed(2)} {srednia >= 4.75 && '– wyróżnienie'}
      </p>
      <p>{uczen.oceny.length > 0 ? `Ocen: ${uczen.oceny.length}` : 'Brak ocen'}</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(<App />);
</script>

<div id="root"></div>

<script type="importmap">
{ "imports": {
  "react": "https://esm.sh/react@19.3.1",
  "react-dom/client": "https://esm.sh/react-dom@19.3.1/client"
} }
</script>
<script src="https://unpkg.com/@babel/standalone@7.29.10/babel.min.js"></script>

<script type="text/babel" data-type="module" data-presets="react">
import React from 'react';
import { createRoot } from 'react-dom/client';

function KartaProduktu({ nazwa, cena, dostepny = true }) {
  return (
    <article style={{ border: '1px solid #ccc', borderRadius: 8, padding: 10, marginBottom: 8 }}>
      <strong>{nazwa}</strong> – {cena.toFixed(2)} zł
      {!dostepny && <span style={{ color: 'crimson' }}> (niedostępny)</span>}
    </article>
  );
}

function Ramka({ tytul, children }) {
  return (
    <section>
      <h2 style={{ margin: '0 0 8px' }}>{tytul}</h2>
      {children}
    </section>
  );
}

function App() {
  return (
    <Ramka tytul="Promocje tygodnia">
      <KartaProduktu nazwa="Słuchawki" cena={199} />
      <KartaProduktu nazwa="Kabel USB-C" cena={24.9} dostepny={false} />
      <KartaProduktu nazwa="Podkładka" cena={15} />
    </Ramka>
  );
}

createRoot(document.getElementById('root')).render(<App />);
</script>

<div id="root"></div>

<script type="importmap">
{ "imports": {
  "react": "https://esm.sh/react@19.3.1",
  "react-dom/client": "https://esm.sh/react-dom@19.3.1/client"
} }
</script>
<script src="https://unpkg.com/@babel/standalone@7.29.10/babel.min.js"></script>

<script type="text/babel" data-type="module" data-presets="react">
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

function Licznik() {
  const [liczba, setLiczba] = useState(0);
  console.log('render Licznik, liczba =', liczba); // zobacz w konsoli, kiedy React wywołuje funkcję

  function dodajDwa() {
    setLiczba((poprzednia) => poprzednia + 1); // forma funkcyjna – bezpieczna przy kilku zmianach
    setLiczba((poprzednia) => poprzednia + 1);
  }

  return (
    <p>
      <button onClick={() => setLiczba(liczba + 1)}>+1</button>{' '}
      <button onClick={dodajDwa}>+2</button>{' '}
      <button onClick={() => setLiczba(0)}>Reset</button>{' '}
      Kliknięto: <strong>{liczba}</strong>
    </p>
  );
}

function Szczegoly() {
  const [widoczne, setWidoczne] = useState(false);
  return (
    <div>
      <button onClick={() => setWidoczne(!widoczne)}>
        {widoczne ? 'Ukryj' : 'Pokaż'} szczegóły
      </button>
      {widoczne && <p>Egzamin INF.03: część praktyczna trwa 150 minut, próg 75%.</p>}
    </div>
  );
}

function App() {
  return (
    <>
      <Licznik />
      <Szczegoly />
    </>
  );
}

createRoot(document.getElementById('root')).render(<App />);
</script>

<div id="root"></div>

<script type="importmap">
{ "imports": {
  "react": "https://esm.sh/react@19.3.1",
  "react-dom/client": "https://esm.sh/react-dom@19.3.1/client"
} }
</script>
<script src="https://unpkg.com/@babel/standalone@7.29.10/babel.min.js"></script>

<script type="text/babel" data-type="module" data-presets="react">
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const START = [
  { id: 1, tekst: 'Powtórzyć pętle', zrobione: true },
  { id: 2, tekst: 'Zrobić arkusz 01.2025', zrobione: false },
  { id: 3, tekst: 'Przeczytać o useState', zrobione: false },
];

function App() {
  const [zadania, setZadania] = useState(START);

  function przelacz(id) {
    setZadania(zadania.map((z) => (z.id === id ? { ...z, zrobione: !z.zrobione } : z)));
  }
  function usun(id) {
    setZadania(zadania.filter((z) => z.id !== id));
  }

  const pozostalo = zadania.filter((z) => !z.zrobione).length;

  return (
    <>
      <p>Pozostało: <strong>{pozostalo}</strong> z {zadania.length}</p>
      <ul>
        {zadania.map((z) => (
          <li key={z.id} style={{ textDecoration: z.zrobione ? 'line-through' : 'none' }}>
            <input type="checkbox" checked={z.zrobione} onChange={() => przelacz(z.id)} />{' '}
            {z.tekst}{' '}
            <button onClick={() => usun(z.id)}>Usuń</button>
          </li>
        ))}
      </ul>
      {zadania.length === 0 && <p>Wszystko zrobione.</p>}
    </>
  );
}

createRoot(document.getElementById('root')).render(<App />);
</script>

<div id="root"></div>

<script type="importmap">
{ "imports": {
  "react": "https://esm.sh/react@19.3.1",
  "react-dom/client": "https://esm.sh/react-dom@19.3.1/client"
} }
</script>
<script src="https://unpkg.com/@babel/standalone@7.29.10/babel.min.js"></script>

<script type="text/babel" data-type="module" data-presets="react">
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  const [tekst, setTekst] = useState('');
  const [priorytet, setPriorytet] = useState('normalny');
  const [pilne, setPilne] = useState(false);
  const [zadania, setZadania] = useState([]);

  const poprawne = tekst.trim().length >= 3;

  function dodaj(e) {
    e.preventDefault(); // formularz nie przeładuje strony
    if (!poprawne) return;
    setZadania([...zadania, { id: Date.now(), tekst: tekst.trim(), priorytet, pilne }]);
    setTekst('');       // czyścisz pole przez stan, nie przez input.value = ''
    setPilne(false);
  }

  return (
    <>
      <form onSubmit={dodaj}>
        <input
          value={tekst}
          onChange={(e) => setTekst(e.target.value)}
          placeholder="Co masz zrobić? (min. 3 znaki)"
        />{' '}
        <select value={priorytet} onChange={(e) => setPriorytet(e.target.value)}>
          <option value="niski">niski</option>
          <option value="normalny">normalny</option>
          <option value="wysoki">wysoki</option>
        </select>{' '}
        <label>
          <input type="checkbox" checked={pilne} onChange={(e) => setPilne(e.target.checked)} /> pilne
        </label>{' '}
        <button type="submit" disabled={!poprawne}>Dodaj</button>
      </form>
      {tekst.length > 0 && !poprawne && <p style={{ color: 'crimson' }}>Za krótki opis.</p>}
      <ul>
        {zadania.map((z) => (
          <li key={z.id}>
            {z.pilne && '!!! '}{z.tekst} <small>({z.priorytet})</small>
          </li>
        ))}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(<App />);
</script>

<div id="root"></div>

<script type="importmap">
{ "imports": {
  "react": "https://esm.sh/react@19.3.1",
  "react-dom/client": "https://esm.sh/react-dom@19.3.1/client"
} }
</script>
<script src="https://unpkg.com/@babel/standalone@7.29.10/babel.min.js"></script>

<script type="text/babel" data-type="module" data-presets="react">
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

// Dziecko 1: ma własny, lokalny stan pola, ale gotowe zadanie oddaje rodzicowi
function Formularz({ onDodaj }) {
  const [tekst, setTekst] = useState('');
  function wyslij(e) {
    e.preventDefault();
    if (tekst.trim() === '') return;
    onDodaj(tekst.trim()); // zdarzenie "w górę"
    setTekst('');
  }
  return (
    <form onSubmit={wyslij}>
      <input value={tekst} onChange={(e) => setTekst(e.target.value)} placeholder="Nowe zadanie" />{' '}
      <button>Dodaj</button>
    </form>
  );
}

// Dziecko 2: nie ma stanu – tylko wyświetla to, co dostało
function Lista({ zadania, onPrzelacz, onUsun }) {
  if (zadania.length === 0) return <p>Brak zadań w tym widoku.</p>;
  return (
    <ul>
      {zadania.map((z) => (
        <li key={z.id}>
          <label style={{ textDecoration: z.zrobione ? 'line-through' : 'none' }}>
            <input type="checkbox" checked={z.zrobione} onChange={() => onPrzelacz(z.id)} /> {z.tekst}
          </label>{' '}
          <button onClick={() => onUsun(z.id)}>Usuń</button>
        </li>
      ))}
    </ul>
  );
}

// Dziecko 3: przyciski filtra – też bez własnego stanu
function Filtr({ aktywny, onZmien }) {
  return ['wszystkie', 'aktywne', 'zrobione'].map((f) => (
    <button key={f} onClick={() => onZmien(f)} disabled={f === aktywny} style={{ marginRight: 6 }}>
      {f}
    </button>
  ));
}

// Rodzic: jedyny właściciel danych
function App() {
  const [zadania, setZadania] = useState([
    { id: 1, tekst: 'Zrobić arkusz 01.2025', zrobione: false },
    { id: 2, tekst: 'Powtórzyć pętle', zrobione: true },
  ]);
  const [filtr, setFiltr] = useState('wszystkie');

  const dodaj = (tekst) => setZadania([...zadania, { id: Date.now(), tekst, zrobione: false }]);
  const przelacz = (id) => setZadania(zadania.map((z) => (z.id === id ? { ...z, zrobione: !z.zrobione } : z)));
  const usun = (id) => setZadania(zadania.filter((z) => z.id !== id));

  const widoczne = zadania.filter((z) =>
    filtr === 'wszystkie' ? true : filtr === 'aktywne' ? !z.zrobione : z.zrobione
  );

  return (
    <>
      <Formularz onDodaj={dodaj} />
      <p><Filtr aktywny={filtr} onZmien={setFiltr} /></p>
      <Lista zadania={widoczne} onPrzelacz={przelacz} onUsun={usun} />
    </>
  );
}

createRoot(document.getElementById('root')).render(<App />);
</script>

<div id="root"></div>

<script type="importmap">
{ "imports": {
  "react": "https://esm.sh/react@19.3.1",
  "react-dom/client": "https://esm.sh/react-dom@19.3.1/client"
} }
</script>
<script src="https://unpkg.com/@babel/standalone@7.29.10/babel.min.js"></script>

<script type="text/babel" data-type="module" data-presets="react">
import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

function ZadaniaZApi({ uzytkownik }) {
  const [zadania, setZadania] = useState([]);
  const [laduje, setLaduje] = useState(true);
  const [blad, setBlad] = useState(null);

  useEffect(() => {
    let aktualne = true; // chroni przed odpowiedzią, która przyszła po zmianie użytkownika

    async function pobierz() {
      setLaduje(true);
      setBlad(null);
      try {
        const odp = await fetch(`https://jsonplaceholder.typicode.com/todos?userId=${uzytkownik}&_limit=5`);
        if (!odp.ok) throw new Error(`HTTP ${odp.status}`);
        const dane = await odp.json();
        if (aktualne) setZadania(dane);
      } catch (e) {
        if (aktualne) setBlad(e.message);
      } finally {
        if (aktualne) setLaduje(false);
      }
    }
    pobierz();

    return () => { aktualne = false; }; // funkcja czyszcząca – React wywoła ją przed kolejnym efektem
  }, [uzytkownik]); // powtórz, gdy zmieni się użytkownik

  if (laduje) return <p>Ładowanie…</p>;
  if (blad) return <p style={{ color: 'crimson' }}>Błąd: {blad}</p>;
  return (
    <ul>
      {zadania.map((z) => (
        <li key={z.id}>{z.completed ? '[x]' : '[ ]'} {z.title}</li>
      ))}
    </ul>
  );
}

function App() {
  const [uzytkownik, setUzytkownik] = useState(1);
  return (
    <>
      <label>
        Użytkownik:{' '}
        <select value={uzytkownik} onChange={(e) => setUzytkownik(Number(e.target.value))}>
          {[1, 2, 3].map((n) => <option key={n} value={n}>{n}</option>)}
        </select>
      </label>
      <ZadaniaZApi uzytkownik={uzytkownik} />
    </>
  );
}

createRoot(document.getElementById('root')).render(<App />);
</script>