Zum Hauptinhalt springen

⚛️ Was ist React?

📖 Definition​

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, entwickelt von Facebook (Meta). Sie verwendet komponentenbasierte Architektur für wiederverwendbare UI und Virtual DOM für effiziente Bildschirm-Updates. Deklarative Programmierung vereinfacht die Verwaltung komplexer UIs.

🎯 Einfache Analogie​

LEGO-Bausteine​

React-Komponenten = LEGO-Bausteine
├─ Kleine Bausteine kombinieren
├─ Gleiche Bausteine mehrfach wiederverwenden
├─ Komplexe Strukturen einfach bauen
└─ Einzelne Bausteine bei Bedarf ersetzen

<House>
  <Roof />
  <Wall />
  <Door />
  <Window />
</House>

⚙️ Kernkonzepte​

Komponenten-Struktur​

// Funktionale Komponente (moderner Ansatz)
function Welcome({ name }) {
  return <h1>Hallo, {name}!</h1>;
}

// Verwendung
<Welcome name="Hans" />

Zustandsverwaltung​

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Erhöhen
      </button>
    </div>
  );
}

useEffect Hook​

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);  // Ausführen wenn userId sich ändert

  return <div>{user?.name}</div>;
}

💡 Wichtige Beispiele​

Listen-Rendering​

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Sport', done: false },
    { id: 2, text: 'Lernen', done: true }
  ]);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Formular-Handhabung​

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // API-Aufruf...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" onChange={handleChange} />
      <input name="password" type="password" onChange={handleChange} />
      <button type="submit">Anmelden</button>
    </form>
  );
}

🤔 Häufig gestellte Fragen​

F1. Warum React verwenden?​

// ❌ Vanilla JS (komplex)
const button = document.createElement('button');
button.addEventListener('click', () => {
  // Manuelle DOM-Manipulation
});

// ✅ React (einfach)
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

F2. Was ist JSX?​

A: JavaScript + XML-Syntax für React-Elemente:

// JSX
const element = <h1 className="title">Hallo</h1>;

// Umgewandelt in
React.createElement('h1', { className: 'title' }, 'Hallo');

F3. Was sind Hooks?​

A: Funktionen, die State und Lifecycle in funktionalen Komponenten ermöglichen:

useState    // Zustandsverwaltung
useEffect   // Seiteneffekte (API-Aufrufe)
useContext  // Context-Zugriff
useRef      // DOM-Zugriff
useMemo     // Memoisierung
useCallback // Funktions-Memoisierung

🎬 Zusammenfassung​

  • Komponenten: Wiederverwendbare UI-Blöcke
  • Virtual DOM: Effiziente Updates
  • JSX: Intuitive Syntax
  • Hooks: Mächtige funktionale Komponenten

Erstellen Sie interaktive Anwendungen mit React! ⚛️