První React aplikace přes Vite · Programuj s Martinem

Založíš opravdový React projekt, spustíš ho a zorientuješ se v tom, co vzniklo.

Ukaž mi to: založení projektu

Vite (čte se „vít”, francouzsky „rychle”) je nástroj, který ti připraví hotovou kostru React projektu. Otevři terminál a přesuň se tam, kde chceš projekt mít (třeba na Plochu):

cd Desktop
npm create vite@latest muj-react-web -- --template react

Vite se možná na něco zeptá – potvrď Enter. Pak:

cd muj-react-web
npm install
npm run dev -- --port 3901

npm install stáhne všechno, co projekt potřebuje (chvíli to trvá – stahuje se React a jeho pomocníci do složky node_modules).
npm run dev -- --port 3901 spustí vývojový server. V terminálu se objeví adresa http://localhost:3901. Otevři ji v prohlížeči.

Vidíš točící se logo a nadpis „Vite + React”? Gratuluju – tvoje první React aplikace běží! 🎉

💡

Co je localhost? „Server” běžící jen ve tvém počítači. Vidíš ho jen ty – je to tvoje soukromá zkušebna. A nejlepší část: když změníš kód a uložíš, stránka se sama okamžitě obnoví. Konec věčného F5!

Prohlídka projektu

Otevři složku muj-react-web ve VS Code (Soubor → Otevřít složku). Vypadá to jako hodně souborů, ale důležité jsou pro tebe jen tři:

Soubor	Co to je
`index.html`	jediné HTML na celém webu – skoro prázdné, jen `<div id="root">`
`src/main.jsx`	startér: vezme aplikaci a vloží ji do toho divu
`src/App.jsx`	hlavní komponenta – tady budeš psát
`src/App.css`	styly – obyčejné CSS, jak ho znáš

Zbytku si zatím nevšímej (node_modules nikdy neotvírej ani nemaž, package.json je seznam balíčků projektu).

První zásah do kódu

Otevři src/App.jsx. Smaž všechno a napiš:

function App() {
  const jmeno = "Kuba";

  return (
    <div>
      <h1>Ahoj, tady {jmeno}!</h1>
      <p>Tohle je moje první React aplikace.</p>
    </div>
  );
}

export default App;

Ulož – a stránka v prohlížeči se sama změnila. Co tu vidíš:

Komponenta App je funkce, která vrací HTML (tomu zápisu se říká JSX).
{jmeno} – složené závorky vkládají do HTML JavaScript. Cokoli: proměnnou, výpočet {2 + 3}, i podmínku.
export default App – „tuhle komponentu nabízím ostatním souborům” (bere si ji main.jsx).

JSX má dvě zvláštnosti, na které si zvykneš: místo class se píše className (class je v JavaScriptu zabrané slovo) a komponenta musí vracet jeden obalový prvek (proto ten <div> okolo).

Teď ty 💪

Založ projekt podle návodu a rozběhni ho.
Uprav App.jsx: nadpis se tvým jménem, odstavec o tom, co stavíš, a proměnnou vek, kterou vypíšeš ve větě Je mi {vek} let.
Zkus schválně smazat zavírací značku a podívej se, jak chyba vypadá – Vite ti ji ukáže přímo v prohlížeči i s číslem řádku. Pak ji oprav.
Vypni server (Ctrl+C v terminálu) a znovu ho zapni (npm run dev -- --port 3901) – ať si osvojíš celý cyklus.

✅

Kontrola: Projekt běží na localhost, umíš ho vypnout a zapnout, a když upravíš App.jsx a uložíš, prohlížeč se sám překreslí. Vývojářský kolotoč se točí!

Co si z téhle lekce odnést

npm create vite@latest založí projekt, npm install stáhne balíčky, npm run dev spustí localhost.
Píše se v src/App.jsx: komponenta = funkce vracející JSX, {} vkládá JavaScript do HTML.
V JSX: className místo class, vždy jeden obalový prvek.