Kapitel 19: React Ökosystem

In diesem Kapitel lernen wir das React-Ökosystem kennen.

---

19.1 UI-Komponenten-Bibliotheken

1️⃣ Ant Design (AntD)

Features:

• Umfangreiche UI-Komponenten
• Enterprise-Design
• Gute Dokumentation (Chinesisch/Englisch)

Installation:

pnpm add antd

Verwendung:

import { Button, DatePicker } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary">Primary Button</Button>
      <DatePicker />
    </div>
  );
}

---

2️⃣ Material UI (MUI)

Features:

• Folgt Material Design
• Anpassbar
• Große Community

Installation:

pnpm add @mui/material @emotion/react @emotion/styled

Verwendung:

import { Button, TextField } from '@mui/material';

function App() {
  return (
    <div>
      <TextField label="Name" variant="outlined" />
      <Button variant="contained" color="primary">
        Absenden
      </Button>
    </div>
  );
}

---

3️⃣ Chakra UI

Features:

• Einfach und modular
• Barrierefrei (Accessibility)
• Dunkelmodus-Unterstützung

Installation:

pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Verwendung:

import { Button, Input } from '@chakra-ui/react';

function App() {
  return (
    <div>
      <Input placeholder="Name" />
      <Button colorScheme="blue">Absenden</Button>
    </div>
  );
}

---

19.2 React Mobile-Entwicklung

📱 React Native

Was ist React Native?

• Framework zum Erstellen von mobilen Apps (iOS & Android)
• Verwendet React für die Entwicklung

Features:

• Cross-Platform: Ein Codebase für iOS und Android
• Native Performance: Verwendet native Komponenten
• Hot Reloading: Schnelle Entwicklung

Installation:

# Expo CLI (empfohlen für Anfänger)
npx create-expo-app mein-projekt

# React Native CLI
npx react-native init mein-projekt

Beispiel (React Native):

import { Text, View, Button } from 'react-native';

function App() {
  return (
    <View>
      <Text>Hallo React Native!</Text>
      <Button title="Klick mich" onPress={() => alert('Hallo!')} />
    </View>
  );
}

export default App;

Unterschied zu React:

Merkmal	React (Web)	React Native (Mobile)
Komponenten	<div>, <p>	<View>, <Text>
Stile	CSS / stylesheets	JavaScript-Objekte
Plattform	Browser	iOS / Android

---

19.3 TypeScript mit React

📘 Warum TypeScript?

Vorteile:

• Typensicherheit: Fehler werden früh erkannt
• Bessere IDE-Unterstützung: Autovervollständigung
• Einfacheres Refactoring

---

📦 Installation

# Vite + React + TypeScript
pnpm create vite mein-projekt -- --template react-ts

# Create React App + TypeScript
npx create-react-app mein-projekt --template typescript

---

🔧 TypeScript mit React verwenden

1. Typisierte Props

// Props-Interface definieren
interface UserProps {
  name: string;
  age: number;
  isLoggedIn: boolean;
}

// Funktionale Komponente mit Typisierung
function User({ name, age, isLoggedIn }: UserProps) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Alter: {age}</p>
      <p>Status: {isLoggedIn ? 'Eingeloggt' : 'Ausgeloggt'}</p>
    </div>
  );
}

export default User;

2. Typisierter State

import { useState } from 'react';

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

function App() {
  const [user, setUser] = useState<User | null>(null);
  const [users, setUsers] = useState<User[]>([]);

  return (
    <div>
      {/* ... */}
    </div>
  );
}

3. Typisierte Event-Handler

function App() {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('Formular abgesendet');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={handleChange} />
      <button type="submit">Absenden</button>
    </form>
  );
}

4. Typisierte Hooks

import { useState, useEffect } from 'react';

interface Post {
  id: number;
  title: string;
  body: string;
}

function App() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then((data: Post[]) => {
        setPosts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Lädt...</p>;

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

---

19.4 Nützliche Tools

🔧 ESLint (Code-Qualität)

Installation:

pnpm add -D eslint eslint-plugin-react eslint-plugin-react-hooks

.eslintrc.json:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "plugins": ["react", "react-hooks"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

---

🎨 Prettier (Code-Formatierung)

Installation:

pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc.json:

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}

---

🧪 Jest (Testing)

Installation:

pnpm add -D jest @testing-library/react @testing-library/jest-dom

Beispiel-Test:

import { render, screen } from '@testing-library/react';
import App from './App';

test('rendert die Überschrift', () => {
  render(<App />);
  const heading = screen.getByText(/hallo react/i);
  expect(heading).toBeInTheDocument();
});

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ UI-Komponenten-Bibliotheken (AntD, MUI, Chakra UI)
• ✅ React Native (Mobile-Entwicklung)
• ✅ TypeScript mit React verwenden
• ✅ Nützliche Tools (ESLint, Prettier, Jest)

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir lernen:

• Lernressourcen für React
• Offizielle Dokumentation
• Empfohlene Tutorials

Bereit für Lernressourcen? → Kapitel 20: Lernressourcen