Erste React + TypeScript Webanwendung erstellen: 7 Schritte fuer Anfaenger

React ist die meistgenutzte JavaScript-Bibliothek fuer Benutzeroberflaechen, und TypeScript hat sich als Standard fuer typsichere Webentwicklung etabliert. Zusammen bilden sie die Grundlage fuer moderne, wartbare und skalierbare Webanwendungen. In dieser Anleitung erstellen Sie Ihre erste React-TypeScript-App von Grund auf — in 7 klar strukturierten Schritten, die Sie direkt umsetzen koennen.

Schritt 1: Entwicklungsumgebung einrichten und Projekt erstellen

Bevor Sie die erste Zeile Code schreiben, muessen Sie Ihre Entwicklungsumgebung vorbereiten. Sie brauchen drei Dinge: Node.js, einen Code-Editor und ein Terminal.

Node.js installieren: Laden Sie Node.js (Version 18 oder hoeher) von nodejs.org herunter. Node.js enthaelt npm, den Paketmanager, mit dem Sie React und alle weiteren Bibliotheken installieren. Pruefen Sie die Installation mit node --version und npm --version im Terminal.

VS Code einrichten: Visual Studio Code ist der beliebteste Editor fuer React-Entwicklung. Installieren Sie die Erweiterungen „TypeScript Vue Plugin" und „ES7+ React/Redux/React-Native snippets" fuer eine bessere Entwicklererfahrung.

Projekt erstellen: Oeffnen Sie Ihr Terminal und fuehren Sie den folgenden Befehl aus:

npx create-vite@latest meine-erste-app --template react-ts cd meine-erste-app npm install npm run dev

Vite ist der moderne Build-Tool-Standard fuer React-Projekte — schneller als Create React App und mit besserer TypeScript-Unterstuetzung. Nach npm run dev laeuft Ihre App unter http://localhost:5173. Oeffnen Sie diese URL im Browser — Sie sollten die Vite-Startseite sehen.

Projektstruktur verstehen: Die wichtigsten Dateien sind src/App.tsx (Ihre Hauptkomponente), src/main.tsx (der Einstiegspunkt), tsconfig.json (TypeScript-Konfiguration) und vite.config.ts (Build-Konfiguration). Die Dateiendung .tsx zeigt an, dass die Datei TypeScript mit JSX-Syntax enthaelt.

Schritt 2: Erste Komponenten mit TypeScript erstellen

Komponenten sind die Bausteine jeder React-Anwendung. In TypeScript definieren Sie die Typen fuer Props und State, was Ihnen sofortiges Feedback bei Fehlern gibt.

Eine einfache Komponente: Erstellen Sie die Datei src/components/Header.tsx:

interface HeaderProps {
  title: string;
  subtitle?: string; // optional
}

export function Header({ title, subtitle }: HeaderProps) {
  return (
    <header>
      <h1>{title}</h1>
      {subtitle && <p>{subtitle}</p>}
    </header>
  );
}

Das interface HeaderProps definiert, welche Daten die Komponente erwartet. title ist erforderlich (Typ string), subtitle ist optional (erkennbar am ?). Wenn Sie die Komponente verwenden und einen falschen Typ uebergeben, zeigt TypeScript sofort einen Fehler an — noch bevor Sie den Browser oeffnen.

Komponente mit State: Erstellen Sie src/components/Counter.tsx:

import { useState } from react;

export function Counter() {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>Zaehler: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>Zuruecksetzen</button>
    </div>
  );
}

useState<number>(0) typisiert den State als Zahl. TypeScript verhindert nun, dass Sie versehentlich einen String oder ein Objekt zuweisen. Das klingt trivial bei einem Zaehler, aber in komplexen Anwendungen verhindert diese Typisierung unzaehlige Laufzeitfehler.

Komponenten verwenden: Aendern Sie src/App.tsx, um Ihre neuen Komponenten einzubinden:

import { Header } from ./components/Header;
import { Counter } from ./components/Counter;

function App() {
  return (
    <div>
      <Header title="Meine erste React-App" subtitle="Mit TypeScript" />
      <Counter />
    </div>
  );
}

export default App;

Schritt 3: Routing mit React Router einrichten

Eine echte Webanwendung hat mehrere Seiten. React Router ist die Standardloesung fuer clientseitiges Routing in React-Anwendungen.

React Router installieren:

npm install react-router-dom

Seiten erstellen: Legen Sie einen Ordner src/pages an und erstellen Sie zwei Seiten:

// src/pages/Home.tsx
export function Home() {
  return (
    <div>
      <h2>Startseite</h2>
      <p>Willkommen bei meiner ersten React-TypeScript-App!</p>
    </div>
  );
}

// src/pages/About.tsx
export function About() {
  return (
    <div>
      <h2>Ueber mich</h2>
      <p>Diese App wurde mit React und TypeScript erstellt.</p>
    </div>
  );
}

Router konfigurieren: Aktualisieren Sie src/App.tsx:

import { BrowserRouter, Routes, Route, Link } from react-router-dom;
import { Header } from ./components/Header;
import { Home } from ./pages/Home;
import { About } from ./pages/About;

function App() {
  return (
    <BrowserRouter>
      <Header title="Meine App" />
      <nav>
        <Link to="/">Start</Link>
        <Link to="/about">Ueber mich</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Jetzt koennen Sie zwischen den Seiten navigieren, ohne dass die gesamte Seite neu geladen wird. React Router uebernimmt das Rendering der richtigen Komponente basierend auf der URL.

Schritt 4: State Management mit Context API

Wenn mehrere Komponenten auf die gleichen Daten zugreifen muessen, brauchen Sie eine zentrale State-Verwaltung. Fuer kleine bis mittlere Apps reicht die React Context API — ohne externe Bibliotheken.

Context erstellen: Erstellen Sie src/context/ThemeContext.tsx:

import { createContext, useContext, useState, ReactNode } from react;

interface ThemeContextType {
  isDark: boolean;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [isDark, setIsDark] = useState(true);

  const toggleTheme = () => setIsDark(prev => !prev);

  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) throw new Error(useTheme muss innerhalb von ThemeProvider verwendet werden);
  return context;
}

Der ThemeProvider verwaltet den State zentral. Der Custom Hook useTheme bietet typsicheren Zugriff auf den Context — und wirft einen klaren Fehler, wenn er ausserhalb des Providers verwendet wird. Das ist ein Muster, das Sie in professionellen React-Anwendungen ueberall sehen werden.

Context verwenden: Wickeln Sie Ihre App in den Provider und nutzen Sie den Hook in Komponenten:

// In src/main.tsx
import { ThemeProvider } from ./context/ThemeContext;

// ...
<ThemeProvider>
  <App />
</ThemeProvider>

// In einer beliebigen Komponente:
import { useTheme } from ../context/ThemeContext;

function ThemeToggle() {
  const { isDark, toggleTheme } = useTheme();
  return (
    <button onClick={toggleTheme}>
      {isDark ? Helles Design : Dunkles Design}
    </button>
  );
}

Schritt 5: API-Anbindung mit Fetch und TypeScript

Die meisten Webanwendungen kommunizieren mit einem Backend oder einer externen API. TypeScript macht API-Aufrufe sicherer, indem die Antwortdaten typisiert werden.

Typen fuer API-Daten definieren: Erstellen Sie src/types/index.ts:

export interface User {
  id: number;
  name: string;
  email: string;
  role: admin | user | guest;
}

export interface ApiResponse<T> {
  data: T;
  total: number;
  page: number;
}

Custom Hook fuer API-Aufrufe: Erstellen Sie src/hooks/useApi.ts:

import { useState, useEffect } from react;

export function useApi<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) throw new Error(Netzwerkfehler);
        const result: T = await response.json();
        setData(result);
      } catch (err) {
        setError(err instanceof Error ? err.message : Unbekannter Fehler);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}

Hook verwenden: In einer Komponente koennen Sie den Hook so nutzen:

import { useApi } from ../hooks/useApi;
import { User } from ../types;

export function UserList() {
  const { data: users, loading, error } = useApi<User[]>(
    https://jsonplaceholder.typicode.com/users
  );

  if (loading) return <p>Laden...</p>;
  if (error) return <p>Fehler: {error}</p>;

  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name} — {user.email}</li>
      ))}
    </ul>
  );
}

Der generische Typ <T> im Hook ermoeglicht volle Typsicherheit: TypeScript weiss, dass users vom Typ User[] ist und bietet Autovervollstaendigung fuer user.name, user.email usw.

Schritt 6: Styling mit Tailwind CSS

Tailwind CSS ist das beliebteste Utility-First-CSS-Framework und funktioniert hervorragend mit React und TypeScript. Es ermoeglicht schnelles, konsistentes Styling ohne separate CSS-Dateien.

Tailwind installieren:

npm install -D tailwindcss @tailwindcss/vite

Vite-Konfiguration anpassen: Oeffnen Sie vite.config.ts und fuegen Sie das Tailwind-Plugin hinzu:

import { defineConfig } from vite;
import react from @vitejs/plugin-react;
import tailwindcss from @tailwindcss/vite;

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

CSS-Import hinzufuegen: Ersetzen Sie den Inhalt von src/index.css durch:

@import "tailwindcss";

Komponente mit Tailwind stylen:

export function Card({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
      <h3 className="text-xl font-bold text-gray-900 mb-3">{title}</h3>
      <div className="text-gray-600 leading-relaxed">{children}</div>
    </div>
  );
}

Tailwind-Klassen werden direkt im JSX geschrieben — kein Wechsel zwischen Dateien. Die Klassen sind selbsterklaerend: bg-white setzt den Hintergrund auf Weiss, rounded-xl rundet die Ecken, p-6 setzt ein Padding von 1.5rem. Der Vorteil gegenueber klassischem CSS: Sie sehen das Styling direkt im Code, ohne zwischen Dateien zu springen.

Schritt 7: Build und Deployment

Ihre App ist fertig — jetzt muss sie online gehen. Vite erstellt optimierte Produktionsdateien, und Vercel ermoeglicht kostenloses Deployment mit einem einzigen Befehl.

Produktions-Build erstellen:

npm run build

Dieser Befehl erstellt einen optimierten Build im Ordner dist/. TypeScript wird zu JavaScript kompiliert, der Code wird minifiziert, und CSS wird optimiert. Pruefen Sie den Build lokal mit npm run preview.

Deployment mit Vercel: Vercel ist die einfachste Loesung fuer React-Deployments. Installieren Sie die Vercel CLI und deployen Sie:

npm install -g vercel
vercel

Vercel erkennt automatisch, dass es sich um ein Vite-Projekt handelt, und konfiguriert das Deployment entsprechend. Nach wenigen Sekunden erhalten Sie eine URL, unter der Ihre App oeffentlich erreichbar ist.

Alternative: GitHub Pages. Wenn Sie kein Vercel nutzen moechten, koennen Sie Ihre App auch auf GitHub Pages deployen. Fuegen Sie base: '/repo-name/' zur vite.config.ts hinzu und nutzen Sie GitHub Actions fuer automatisches Deployment bei jedem Push.

Umgebungsvariablen: Erstellen Sie eine .env-Datei fuer Konfiguration:

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=Meine React App

In Ihrem Code greifen Sie mit import.meta.env.VITE_API_URL darauf zu. Beachten Sie: Nur Variablen mit dem Praefix VITE_ werden im Client-Code verfuegbar — das schuetzt sensible Daten.

Naechste Schritte und Ressourcen

Sie haben jetzt eine vollstaendige React-TypeScript-Webanwendung erstellt — mit Komponenten, Routing, State Management, API-Anbindung, Styling und Deployment. Hier sind die naechsten Schritte, um Ihre Faehigkeiten zu vertiefen:

• Testing hinzufuegen: Installieren Sie Vitest und React Testing Library (npm install -D vitest @testing-library/react), um automatisierte Tests fuer Ihre Komponenten zu schreiben.
• Formularvalidierung: Nutzen Sie Bibliotheken wie React Hook Form mit Zod fuer typsichere Formularvalidierung.
• Server-State: Fuer komplexe API-Interaktionen ersetzen Sie den Custom Hook durch TanStack Query (React Query), das Caching, Retry-Logik und optimistische Updates mitbringt.
• Next.js ausprobieren: Wenn Sie serverseitiges Rendering, statische Generierung und API-Routes brauchen, ist Next.js der naechste logische Schritt. Es baut auf React auf und unterstuetzt TypeScript nativ.
• Portfolio aufbauen: Nutzen Sie die gelernte Technologie, um ein persoenliches Portfolio-Projekt zu erstellen — das ist der beste Beweis fuer Ihre Faehigkeiten bei Bewerbungen.

React und TypeScript sind die gefragtesten Frontend-Skills auf dem deutschen Arbeitsmarkt. Laut Bitkom werden in Deutschland ueber 109.000 IT-Fachkraefte gesucht — Frontend-Entwickler mit React- und TypeScript-Erfahrung gehoeren zu den meistgesuchten Profilen. Die Investition in diese Faehigkeiten zahlt sich nicht nur technisch, sondern auch beruflich aus.