React — Technologie

Czym jest React?

React to biblioteka JavaScript stworzona przez Meta (Facebook) do budowy interfejsów użytkownika. Opiera się na koncepcji komponentów — małych, reużywalnych bloków UI, które zarządzają własnym stanem i renderują się deklaratywnie.

React dominuje rynek frontendu. Jest fundamentem Next.js, Remix, React Native i tysięcy bibliotek. Ogromna społeczność, dojrzały ekosystem i nieograniczone możliwości.

Przykłady kodu

Komponent funkcyjny + hooks

              React + TypeScript
              import { useState, useEffect } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

export function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(r => r.json())
      .then(data => { setUsers(data); setLoading(false); });
  }, []);

  if (loading) return <Skeleton />;

  return (
    <div className="grid gap-4">
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}
            

Custom hook

              React Hook
              function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebounced(value);
    }, delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

// Użycie
const search = useDebounce(query, 300);
            

Server Component (Next.js)

              Next.js RSC
              // app/users/page.tsx — Server Component
export default async function UsersPage() {
  const users = await db.user.findMany({
    orderBy: { createdAt: 'desc' },
    take: 20,
  });

  return (
    <main className="container py-8">
      <h1>Użytkownicy</h1>
      <Suspense fallback={<Loading />}>
        <UserTable users={users} />
      </Suspense>
    </main>
  );
}
            

Ocena kompetencji

Ekosystem

99%

Społeczność

100%

Wydajność

88%

DX (Developer Experience)

92%

SEO (z Next.js)

95%

Łatwość nauki

78%

Co potrafi React

SPA & Web Apps

Single Page Applications z client-side routing. React Router, TanStack Router.

SSR / SSG (Next.js)

Server-side rendering, static generation, ISR. SEO-friendly, szybki TTFB.

Design Systems

shadcn/ui, Radix, Headless UI. Buduj reużywalne komponenty z Storybook.

State Management

Zustand, Jotai, Redux Toolkit, TanStack Query. Każdy pattern obsłużony.

React Native

Ten sam React na iOS i Android. Expo, NativeWind, React Navigation.

Full-stack (Next.js)

API routes, Server Actions, middleware. Jeden deploy = front + back.

Kiedy wybrać React?

Idealny gdy: budujesz web app (SPA, dashboard, SaaS), potrzebujesz SEO (Next.js), chcesz ogromny ekosystem bibliotek, budujesz design system.

Nie najlepszy gdy: budujesz prostą stronę bez interakcji (lepiej Astro), potrzebujesz natywnej wydajności mobilnej (lepiej Flutter/Swift).