Modul 11c: Mit React starten

lock

Bevorstehend

Lerne React - das meistgenutzte JavaScript-Framework der Welt

Ziele dieses Moduls

Sie koennen eine interaktive Web-App mit React erstellen und verstehen State und Props
Kreieren

React von Meta (Facebook) ist das beliebteste Framework weltweit. Es wird von Facebook, Instagram, Netflix, Airbnb und tausenden anderen Firmen verwendet.

Warum React?

Vorteile:

✅ Grösste Community und Job-Markt
✅ Riesiges Ökosystem (Libraries für alles!)
✅ JSX - HTML-ähnliche Syntax in JavaScript
✅ React Native für Mobile Apps (gleiche Skills!)
✅ Von Meta entwickelt und supported

Herausforderung: Etwas steiler Einstieg als Svelte/Vue, aber sehr lohnenswert!

Schritt 1: CodeSandbox verwenden

Öffne codesandbox.io/s/new und wähle 'React' als Template. CodeSandbox ist ein vollwertiger Online-Editor.

Eine einfache React-Komponente:

import { useState } from 'react'
import './App.css'

function App() {
  const [name, setName] = useState('Welt')
  const [count, setCount] = useState(0)

  function increment() {
    setCount(count + 1)  // State updaten mit setter!
  }

  return (
    <div className="App">
      <h1>Hallo {name}!</h1>
      <p>Du hast {count} mal geklickt.</p>
      <button onClick={increment}>+1</button>
    </div>
  )
}

export default App

React-Besonderheiten:

useState(): Hook für State-Management (gibt [value, setter] zurück)
JSX: HTML in JavaScript (braucht className statt class!)
Event-Handling: onClick (camelCase!), Funktion als Wert
Kein Template: Alles ist JavaScript/JSX
CSS separat: Import via import './App.css'

Challenge

Projekt: Meine Lieblingsfilme-App

Baue die gleiche App wie bei Svelte und Vue, aber mit React:

Features:

Liste von Filmen anzeigen
Film hinzufügen (Formular)
Film löschen
Nach Genre filtern
Responsive Design

import { useState } from 'react'
import './App.css'

function App() {
  const [movies, setMovies] = useState([
    { id: 1, title: 'Inception', year: 2010, genre: 'Sci-Fi' },
    { id: 2, title: 'The Matrix', year: 1999, genre: 'Sci-Fi' },
    { id: 3, title: 'Pulp Fiction', year: 1994, genre: 'Crime' },
  ])

  const [newTitle, setNewTitle] = useState('')
  const [newYear, setNewYear] = useState('')
  const [newGenre, setNewGenre] = useState('Sci-Fi')
  const [filterGenre, setFilterGenre] = useState('Alle')

  function addMovie(e) {
    e.preventDefault()
    if (newTitle && newYear) {
      setMovies([...movies, {
        id: Date.now(),
        title: newTitle,
        year: parseInt(newYear),
        genre: newGenre
      }])
      setNewTitle('')
      setNewYear('')
    }
  }

  function deleteMovie(id) {
    setMovies(movies.filter(m => m.id !== id))
  }

  const filteredMovies = filterGenre === 'Alle' 
    ? movies 
    : movies.filter(m => m.genre === filterGenre)

  return (
    <div className="App">
      <h1>Meine Lieblingsfilme</h1>

      <div className="filter">
        <label>
          Genre: 
          <select value={filterGenre} onChange={(e) => setFilterGenre(e.target.value)}>
            <option>Alle</option>
            <option>Sci-Fi</option>
            <option>Crime</option>
            <option>Drama</option>
          </select>
        </label>
      </div>

      <div className="movies">
        {filteredMovies.map(movie => (
          <div key={movie.id} className="movie-card">
            <h3>{movie.title}</h3>
            <p>{movie.year} • {movie.genre}</p>
            <button onClick={() => deleteMovie(movie.id)}>Löschen</button>
          </div>
        ))}
      </div>

      <form onSubmit={addMovie}>
        <h2>Film hinzufügen</h2>
        <input 
          value={newTitle} 
          onChange={(e) => setNewTitle(e.target.value)} 
          placeholder="Titel" 
          required 
        />
        <input 
          value={newYear} 
          onChange={(e) => setNewYear(e.target.value)} 
          type="number" 
          placeholder="Jahr" 
          required 
        />
        <select value={newGenre} onChange={(e) => setNewGenre(e.target.value)}>
          <option>Sci-Fi</option>
          <option>Crime</option>
          <option>Drama</option>
        </select>
        <button type="submit">Hinzufügen</button>
      </form>
    </div>
  )
}

export default App

Note

React-Spezialitäten im Code:

.map() - Loop über Arrays (braucht key-Prop!)
Controlled Components: value + onChange für Inputs
Immutability: State nie direkt ändern, immer neues Array/Object erstellen ([...movies, newMovie])
Arrow Functions: Bei Events oft nötig: () => deleteMovie(id)

Tutorial: Das offizielle React-Tutorial: react.dev/learn (ca. 2-3 Stunden, aber sehr gut!)

React vs. Svelte/Vue: React ist expliziter (mehr Code für gleiche Funktion), aber sehr transparent und flexibel.

Reflection

Vergleich der drei Frameworks:

Aspekt	Svelte	Vue	React
Einstieg	⭐⭐⭐ Einfach	⭐⭐ Mittel	⭐ Steiler
Syntax	Sehr intuitiv	Klar strukturiert	JSX (gewoehnungsbeduerftig)
Job-Markt	Klein, wachsend	Gross	Sehr gross
Performance	Exzellent	Sehr gut	Gut
Oekosystem	Klein	Mittel-Gross	Riesig

Welches Framework wählen?

Svelte: Du willst schnell loslegen und magst einfache Syntax
Vue: Du suchst Balance zwischen Einfachheit und Features
React: Du willst maximale Job-Chancen und Community-Support