Ein React-Projekt initialisieren

Entwicklung mit node.js und npm

  • node.js: JS-Runtime
    • Ausführen des lokalen Enwicklungsservers
    • Unit-Tests
  • npm: Paketmanager
    • zum Verwalten von Abhängigkeiten
    • Pakete im node_modules-Ordner
    • Konfiguration in package.json

Ein React-Projekt initialisieren

Möglichkeiten:

  • create-react-app (meistverwendete Methode)
  • vite
  • next.js (ermöglicht Static Site Generation und serverseitiges Rendering)

Ein React-Projekt initialisieren

Mögliche Befehle zum Initialisieren eines Projekts namens "todolist":

npx create-react-app@latest todolist
npx create-react-app@latest todolist --template typescript

npm create vite@latest

npx create-next-app@latest
npx create-next-app@latest --ts

siehe auch: https://reactjs.org/docs/create-a-new-react-app.html

Ein React-Projekt initialisieren

Beispiel:

npx create-react-app@latest todolist --template typescript
  • verwendet die neueste Version von create-react-app
  • erstellt ein Projekt in einem neuen Ordner namens todolist
  • verwendet die typescript-Projektvorlage

Ein React-Projekt initialisieren

Viele Aspekte können vorkonfiguriert sein:

  • Build-System (z.B. webpack und babel)
  • lokaler Entwicklungsserver
  • Unittest-Framework
  • CSS Module
  • ...

Dateistruktur

Dateistruktur

create-react-app: Standard-Projektstruktur

  • package.json: Konfiguration, Liste an Abhängigkeiten
  • node_modules: Abhängigkeiten
  • public/index.html, src/index.tsx: Einstiegspunkte
  • src/index.css: globale Stildefinitionen
  • src/App.tsx, src/App.css: definierend die App-Komponente

Dateistruktur

grundlegende Dateistruktur für ein einfaches Todolisten-Projekt:

  • src
    • index.tsx
    • index.css
    • App.tsx
    • App.css
    • components
      • AddTodo.tsx
      • AddTodo.css
      • TodoItem.tsx
      • TodoItem.css
      • ...
    • hooks
      • useTodos.ts
    • types.ts

Dateistruktur

https://reactjs.org/docs/faq-structure.html

Verbreitete Zugänge:

  • Gruppieren nach Typ (Komponente / Hook / API-Anbindung / ...)
  • Gruppieren nach Feature / Route

React docs on file structure

Beispielprojekt: bulletproof react

Entwicklungsserver, Build und Deployment

Entwicklungsserver, Build und Deployment

Im Projektordner:

  • npm run start (oder npm start): Startet den lokalen Entwicklungsserver
  • npm run build: Erstellt einen Build (zum Deployen auf einem Webserver)

Entwicklungsserver

Anwendung läuft auf lokalem Entwicklungsserver auf dem Computer (typischerweise localhost:3000)

automatisches Neuladen bei Code-Änderungen

Build und Deployment

Eine React-Anwendung kann bei beliebigen statischen Hosting-Services gehostet werden

Build

Build mit create-react-app:

npm run build

Minifizierter und Optimierter Build wird im build-Ordner generiert

Deployment

einfache Test-Deployments ohne Login:

React Developer Tools

React Developer Tools

Features:

  • Anzeige der Komponentenstruktur
  • Anzeige von State und Props
  • Ändern von State und Props
  • (Performanceanalyse des Renderings von Komponenten)

React Developer Tools

mögliche Zugänge beim Suchen nach Problemen:

  • Ãœberprüfen der State-Update-Logik: State wird basierend auf ausgelösten Events korrekt aktualisiert
  • Ãœberprüfen der Rendering-Logik: State wird wie erwartet gerendert