React Academy · Lekcja

Tworzenie monorepo Nx z aplikacjami React

Tworzenie workspace'u Nx, dodawanie aplikacji React i poznanie grafu projektu.

Tworzenie monorepo Nx z aplikacjami React to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Dlaczego Nx?

Nx to inteligentny system budowania dla monorepo. Zapewnia uruchamianie zadań na podstawie zmienionych elementów (budowanie i testowanie tylko tego, co się zmieniło), buforowanie (niezmienione zadania nie są uruchamiane ponownie) oraz generatory do tworzenia szkieletów aplikacji i bibliotek.

Tworzenie nowego workspace Nx

Należy utworzyć szkielet nowego workspace Nx wstępnie skonfigurowanego dla React.

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

Struktura workspace

Nx organizuje kod w katalogach apps/ (wdrażane aplikacje) i libs/ (współdzielone biblioteki). Każdy projekt ma własny plik project.json z celami zadań.

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

Dodawanie aplikacji React

Należy użyć generatora React w Nx, aby dodać nową aplikację ze wstępnie skonfigurowanymi wszystkimi ustawieniami.

# 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

Uruchamianie zadań

Można uruchamiać budowanie, testy, lintowanie i serwowanie dla poszczególnych projektów lub wszystkich projektów.

# 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

Graf projektu

nx graph otwiera interaktywną wizualizację wszystkich aplikacji i bibliotek oraz ich zależności — pozwala sprawdzić, które projekty zależą od poszczególnych bibliotek.

npx nx graph

Buforowanie w Nx

Nx buforuje lokalnie wyniki zadań. Ponowne uruchomienie niezmienionego zadania natychmiast korzysta z bufora. Nx Cloud rozszerza buforowanie o zdalny bufor współdzielony między członkami zespołu i CI.

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

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

Potoki zadań

Należy zdefiniować zależności zadań w nx.json. Uruchomienie build automatycznie najpierw uruchamia build dla wszystkich zależności nadrzędnych.

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

Tagi do egzekwowania zasad

Otaguj projekty (np. scope:ui, type:app) i użyj reguł ESLint, aby uniemożliwić aplikacjom importowanie wewnętrznego kodu innych aplikacji.

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

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

Aliasy ścieżek TypeScript

Nx automatycznie konfiguruje tsconfig.base.json z aliasami ścieżek, dzięki czemu można importować współdzielone biblioteki jako @myorg/ui zamiast używać rozbudowanych ścieżek względnych.

// 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';

Szybkie sprawdzenie

Co robi nx affected --target=build w monorepo Nx?

Podsumowanie

Utwórz workspace Nx za pomocą create-nx-workspace. Używaj nx generate do tworzenia aplikacji i bibliotek, nx serve/build/test do wykonywania zadań, a nx affected w CI, aby przetwarzać tylko zmienione projekty. Buforowanie sprawia, że niezmienione zadania są kończone natychmiast.

Często zadawane pytania

Czy lekcja „Tworzenie monorepo Nx z aplikacjami React” jest bezpłatna?

Tak — pełny tekst „Tworzenie monorepo Nx z aplikacjami React” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tworzenie monorepo Nx z aplikacjami React”?

Tworzenie workspace'u Nx, dodawanie aplikacji React i poznanie grafu projektu. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Tworzenie monorepo Nx z aplikacjami React”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Tworzenie monorepo Nx z aplikacjami React
Współdzielone biblioteki i pakiety wewnętrzne
Polecenia Nx Affected i buforowanie
Generatory kodu i automatyzacja workspace'u

← Powrót do React Academy