React a jeho ekosystém

React samotný je pouze knihovna pro tvorbu uživatelského rozhraní. Jeho skutečná síla ale spočívá v širokém ekosystému nástrojů a knihoven, které nám pomáhají řešit složitější problémy jako routing, formuláře, výkonnost nebo vizuální vzhled.

Routing

React sám o sobě neobsahuje žádné řešení pro směrování mezi stránkami. K tomu se nejčastěji používá knihovna React Router.

React Router – základy

React Router nám umožňuje:

• rozdělit aplikaci do více „stránek“ (komponent),
• reagovat na změny v URL,
• vytvářet navigaci,
• a předávat parametry do komponent.

Základní příklad:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Domu from "./Domu";
import Oaplikaci from "./Oaplikaci";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Domu />} />
        <Route path="/o-nas" element={<Oaplikaci />} />
      </Routes>
    </BrowserRouter>
  );
}

Dynamické trasy

Umožňují pracovat s parametry v URL. Například /uzivatel/123:

<Route path="/uzivatel/:id" element={<ProfilUzivatele />} />

A v komponentě získáš id pomocí:

import { useParams } from "react-router-dom";
const { id } = useParams();

Lazy loading & code splitting

Moderní aplikace mohou být velké a načítání všech komponent najednou může zpomalit první zobrazení. Pomocí lazy loadingu můžeme komponenty načítat jen tehdy, když jsou potřeba.

import { lazy, Suspense } from "react";

const Nastaveni = lazy(() => import("./Nastaveni"));

export default function App() {
  return (
    <Suspense fallback={<div>Načítání…</div>}>
      <Nastaveni />
    </Suspense>
  );
}

Tím rozdělíme aplikaci do samostatných chunks, které se načítají postupně (tzv. code splitting).

Formuláře s validací

Správa formulářů bývá v Reactu často komplikovaná. Nejpopulárnějším řešením je dnes kombinace React Hook Form a Zod pro validaci.

React Hook Form

Lehká a výkonná knihovna pro správu formulářů, která se skvěle doplňuje s React hooks.

import { useForm } from "react-hook-form";

const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("jmeno")} />
  <button type="submit">Odeslat</button>
</form>

Validace se Zodem

Pomocí knihovny Zod můžeme definovat typově bezpečné validační schéma:

import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  jmeno: z.string().min(2, "Jméno musí mít alespoň 2 znaky"),
});

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema),
});

<form onSubmit={handleSubmit(data => console.log(data))}>
  <input {...register("jmeno")} />
  {errors.jmeno && <p>{errors.jmeno.message}</p>}
  <button type="submit">Odeslat</button>
</form>

✅ Výhoda: typová bezpečnost + čistý a srozumitelný zápis.

UI knihovny

Stylování aplikace může být časově náročné. Pomocí UI knihoven můžeme využít hotové komponenty.

Shadcn/UI

Shadcn je moderní knihovna komponent postavená na Tailwind CSS. Nabízí:

• čistý design,
• jednoduché přizpůsobení vzhledu,
• přístupnost (a11y) jako základní vlastnost.

import { Button } from "@/components/ui/button";

<Button>Uložit změny</Button>

⚙️ Build nástroje a frameworky

Vite

Vite je moderní nástroj pro vývoj React aplikací. Nabízí:

• extrémně rychlé načítání díky nativním ES modulům,
• okamžitý hot reload,
• jednoduchou konfiguraci.

npm create vite@latest

Vite se doporučuje pro nové projekty místo CRA (Create React App).

Next.js

Next.js je framework nad Reactem, který přidává:

• server-side rendering (SSR),
• statické generování stránek (SSG),
• routing bez konfigurace,
• API routes,
• optimalizaci výkonu a SEO.

Pokud plánuješ stavět větší aplikaci nebo web s vícestránkovou strukturou, Next.js je výbornou volbou.