0Pricing
React Academy · Lezione

Creazione di un monorepo Nx con app React

Crei un workspace Nx, aggiunga app React e comprenda il grafo del progetto.

Creazione di un monorepo Nx con app React è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Perché Nx?

Nx è un sistema di build intelligente per i monorepo. Fornisce l'esecuzione dei task basata sulle modifiche, eseguendo build e test solo di ciò che è cambiato, il caching, che evita di rieseguire i task invariati, e generatori per creare lo scheletro di app e librerie.

Creare un nuovo workspace Nx

Crei un nuovo workspace Nx con configurazione preimpostata per React.

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

Struttura del workspace

Nx organizza il codice in apps/ (applicazioni distribuibili) e libs/ (librerie condivise). Ogni progetto ha il proprio project.json con i target dei task.

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

Aggiungere un'app React

Usi il generatore React di Nx per aggiungere una nuova app con tutta la configurazione già predisposta.

# 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

Eseguire i task

Esegua build, test, lint e serve per singoli progetti o per tutti i progetti.

# 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

Grafo dei progetti

nx graph apre una visualizzazione interattiva di tutte le app e librerie e delle relative dipendenze: può vedere quali progetti dipendono da quali librerie.

npx nx graph

Caching di Nx

Nx memorizza nella cache locale gli output dei task. Se riesegue un task invariato, il risultato viene recuperato immediatamente dalla cache. Nx Cloud estende il caching a una cache remota condivisa tra i membri del team e la 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

Pipeline dei task

Definisca le dipendenze tra i task in nx.json. L'esecuzione di build esegue automaticamente prima build per tutte le dipendenze a monte.

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

Tag per l'applicazione delle regole

Contrassegni i progetti (ad esempio, scope:ui, type:app) e utilizzi le regole ESLint per impedire alle app di importare il codice interno di altre app.

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

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

Alias dei percorsi TypeScript

Nx configura automaticamente tsconfig.base.json con alias dei percorsi, così può importare le librerie condivise come @myorg/ui invece di utilizzare percorsi relativi profondi.

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

Verifica rapida

Che cosa fa nx affected --target=build in un monorepo Nx?

Riepilogo

Crei un workspace Nx con create-nx-workspace. Utilizzi nx generate per app e librerie, nx serve/build/test per le attività e nx affected nella CI per elaborare solo i progetti modificati. La memorizzazione nella cache fa sì che le attività invariate restituiscano immediatamente il risultato.

Domande Frequenti

La lezione «Creazione di un monorepo Nx con app React» è gratuita?

Sì — il testo completo di «Creazione di un monorepo Nx con app React» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Creazione di un monorepo Nx con app React»?

Crei un workspace Nx, aggiunga app React e comprenda il grafo del progetto. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Creazione di un monorepo Nx con app React»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Creazione di un monorepo Nx con app React
  2. Librerie condivise e package interni
  3. Comandi Nx Affected e caching
  4. Code generator e automazione del workspace
← Torna a React Academy