React Academy · Leçon

Créer un monorepo Nx avec des applications React

Initialisez un espace de travail Nx, ajoutez des applications React et découvrez le graphe du projet.

Leçon 1 sur 412 étapes

Créer un monorepo Nx avec des applications React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Pourquoi Nx ?

Nx est un système de compilation intelligent pour les monodépôts. Il fournit l’exécution des tâches selon les projets affectés (ne compiler et tester que ce qui a changé), la mise en cache (ne jamais relancer les tâches inchangées) et des générateurs pour créer la structure des applications et des bibliothèques.

Créer un espace de travail Nx

Générez un nouvel espace de travail Nx préconfiguré pour React.

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

Structure de l’espace de travail

Nx organise le code en apps/ (applications déployables) et libs/ (bibliothèques partagées). Chaque projet possède son propre project.json avec les cibles de ses tâches.

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

Ajouter une application React

Utilisez le générateur React de Nx pour ajouter une nouvelle application avec toute la configuration déjà connectée.

# 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

Exécuter les tâches

Lancez la compilation, les tests, l’analyse statique et le serveur pour des projets individuels ou pour l’ensemble des projets.

# 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

Graphe des projets

nx graph ouvre une visualisation interactive de toutes les applications et bibliothèques ainsi que de leurs dépendances — vous pouvez voir quels projets dépendent de quelles bibliothèques.

npx nx graph

Mise en cache avec Nx

Nx met en cache localement les résultats des tâches. La relance d’une tâche inchangée utilise instantanément le cache. Nx Cloud étend la mise en cache à un cache distant partagé entre les membres de l’équipe et 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

Enchaînements de tâches

Définissez les dépendances entre les tâches dans nx.json. L’exécution de build lance automatiquement la tâche build pour toutes les dépendances en amont.

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

Balises d’application des règles

Étiquetez les projets (par exemple, scope:ui et type:app) et utilisez les règles ESLint pour empêcher les applications d’importer le code interne d’autres applications.

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

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

Alias de chemins TypeScript

Nx configure automatiquement tsconfig.base.json avec des alias de chemins afin que vous puissiez importer les bibliothèques partagées comme @myorg/ui, plutôt qu’au moyen de chemins relatifs profonds.

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

Vérification rapide

Que fait la commande nx affected --target=build dans un dépôt monolithique Nx ?

Réponds-y dans la leçon interactive

Récapitulatif

Créez un espace de travail Nx avec create-nx-workspace. Utilisez nx generate pour les applications et les bibliothèques, nx serve/build/test pour les tâches, et nx affected dans l’intégration continue afin de ne traiter que les projets modifiés. La mise en cache permet de renvoyer instantanément le résultat des tâches inchangées.

Gratuit pour commencer

Apprends React avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 88
Leçons: 324

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Créer un monorepo Nx avec des applications React » est-elle gratuite ?

Oui — le texte complet de « Créer un monorepo Nx avec des applications React » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer un monorepo Nx avec des applications React » ?

Initialisez un espace de travail Nx, ajoutez des applications React et découvrez le graphe du projet. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Créer un monorepo Nx avec des applications React » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Créer un monorepo Nx avec des applications React
Bibliothèques partagées et paquets internes
Commandes Nx Affected et mise en cache
Générateurs de code et automatisation de l’espace de travail

← Retour à React Academy