0Pricing
React Academy · Lektion

Ein Nx-Monorepo mit React-Apps erstellen

Erstellen Sie einen Nx-Workspace, fügen Sie React-Apps hinzu und verstehen Sie den Projektgraphen.

Ein Nx-Monorepo mit React-Apps erstellen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Nx?

Nx ist ein intelligentes Build-System für Monorepos. Es bietet die auf Änderungen basierte Ausführung von Tasks (nur Geändertes wird gebaut/getestet), Caching (unveränderte Tasks werden nicht erneut ausgeführt) und Generatoren zum Erstellen von Apps und Bibliotheken.

Einen neuen Nx-Workspace erstellen

Erstellen Sie ein neues, für React vorkonfiguriertes Nx-Workspace-Grundgerüst.

# Create workspace:
npx create-nx-workspace@latest myorg --preset=react-monorepo
# or for Next.js:
npx create-nx-workspace@latest myorg --preset=next

Workspace-Struktur

Nx organisiert Code in apps/ (bereitstellbare Anwendungen) und libs/ (gemeinsam verwendete Bibliotheken). Jedes Projekt besitzt eine eigene project.json mit Task-Zielen.

myorg/
  apps/
    web/           # React SPA
    admin/         # Admin React SPA
    api/           # NestJS backend
  libs/
    ui/            # shared UI components
    data-access/   # data fetching hooks
    utils/         # shared utilities
  nx.json          # workspace config
  package.json     # single package.json

Eine React-App hinzufügen

Verwenden Sie den Nx-React-Generator, um eine neue App mit vollständig vorbereiteter Konfiguration hinzuzufügen.

# Add a new React app:
npx nx generate @nx/react:app customer-portal

# Add a Next.js app:
npx nx generate @nx/next:app marketing

Tasks ausführen

Führen Sie Build, Tests, Linting und Serve für einzelne Projekte oder für alle Projekte aus.

# Serve a specific app:
npx nx serve web

# Build all apps:
npx nx run-many --target=build --all

# Test a specific library:
npx nx test ui

Projektgraph

nx graph öffnet eine interaktive Visualisierung aller Apps und Bibliotheken sowie ihrer Abhängigkeiten – Sie sehen, welche Projekte von welchen Bibliotheken abhängen.

npx nx graph

Nx-Caching

Nx speichert Task-Ausgaben lokal im Cache. Wird ein unveränderter Task erneut ausgeführt, wird das Ergebnis sofort aus dem Cache verwendet. Nx Cloud erweitert das Caching um einen Remote-Cache, der von Teammitgliedern und der CI gemeinsam genutzt wird.

# First run: builds and caches
npx nx build web  # ~30s

# Second run (no changes): cache hit
npx nx build web  # <1s — served from cache

Task-Pipelines

Definieren Sie Task-Abhängigkeiten in nx.json. Beim Ausführen von build wird automatisch zuerst build für alle vorgelagerten Abhängigkeiten ausgeführt.

// nx.json
{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"], // run dependency builds first
      "cache": true
    },
    "test": {
      "cache": true
    }
  }
}

Tags zur Durchsetzung

Versehen Sie Projekte mit Tags (z. B. scope:ui, type:app) und verwenden Sie ESLint-Regeln, um zu verhindern, dass Apps den internen Code anderer Apps importieren.

// project.json
{
  "tags": ["scope:web", "type:app"]
}

// .eslintrc.json
{
  "rules": {
    "@nx/enforce-module-boundaries": ["error", {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
      ]
    }]
  }
}

TypeScript-Pfad-Aliase

Nx konfiguriert tsconfig.base.json automatisch mit Pfad-Aliasen, sodass Sie gemeinsame Bibliotheken als @myorg/ui statt über lange relative Pfade importieren.

// tsconfig.base.json (auto-generated)
{
  "compilerOptions": {
    "paths": {
      "@myorg/ui": ["libs/ui/src/index.ts"],
      "@myorg/utils": ["libs/utils/src/index.ts"]
    }
  }
}

// Usage in apps:
import { Button } from '@myorg/ui';

Kurztest

Was bewirkt nx affected --target=build in einem Nx-Monorepo?

Zusammenfassung

Erstellen Sie mit create-nx-workspace einen Nx-Workspace. Verwenden Sie nx generate für Apps und Bibliotheken, nx serve/build/test für Tasks und nx affected in CI, um nur geänderte Projekte zu verarbeiten. Durch das Caching werden unveränderte Tasks sofort abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Ein Nx-Monorepo mit React-Apps erstellen“ kostenlos?

Ja — der vollständige Text von „Ein Nx-Monorepo mit React-Apps erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Ein Nx-Monorepo mit React-Apps erstellen“?

Erstellen Sie einen Nx-Workspace, fügen Sie React-Apps hinzu und verstehen Sie den Projektgraphen. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Ein Nx-Monorepo mit React-Apps erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Ein Nx-Monorepo mit React-Apps erstellen
  2. Gemeinsame Libraries und interne Packages
  3. Nx-Affected-Befehle und Caching
  4. Code-Generatoren und Workspace-Automatisierung
← Zurück zu React Academy