Crear un monorepo Nx con aplicaciones React
Genere un workspace de Nx, añada aplicaciones React y comprenda el grafo del proyecto.
Crear un monorepo Nx con aplicaciones React es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Por qué Nx?
Nx es un sistema inteligente de compilación para monorepos. Proporciona ejecución de tareas basada en proyectos afectados (solo compila o prueba lo que cambió), caché (nunca vuelve a ejecutar tareas sin cambios) y generadores para crear la estructura de aplicaciones y bibliotecas.
Creación de un nuevo workspace de Nx
Cree la estructura de un nuevo workspace de Nx preconfigurado para React.
# Create workspace:
npx create-nx-workspace@latest myorg --preset=react-monorepo
# or for Next.js:
npx create-nx-workspace@latest myorg --preset=nextEstructura del workspace
Nx organiza el código en apps/ (aplicaciones desplegables) y libs/ (bibliotecas compartidas). Cada proyecto tiene su propio project.json con los targets de sus tareas.
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.jsonAdición de una aplicación de React
Utilice el generador de React de Nx para añadir una aplicación nueva con toda la configuración preparada.
# Add a new React app:
npx nx generate @nx/react:app customer-portal
# Add a Next.js app:
npx nx generate @nx/next:app marketingEjecución de tareas
Ejecute build, test, lint y serve para proyectos individuales o para todos los proyectos.
# 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 uiGrafo del proyecto
nx graph abre una visualización interactiva de todas las aplicaciones y bibliotecas, junto con sus dependencias, para que pueda ver qué proyectos dependen de cada biblioteca.
npx nx graphCaché de Nx
Nx almacena en caché los resultados de las tareas localmente. Al volver a ejecutar una tarea sin cambios, la caché responde al instante. Nx Cloud amplía esta función con una caché remota compartida entre los miembros del equipo y CI.
# First run: builds and caches
npx nx build web # ~30s
# Second run (no changes): cache hit
npx nx build web # <1s — served from cachePipelines de tareas
Defina las dependencias de las tareas en nx.json. Al ejecutar build, se ejecuta automáticamente primero build para todas las dependencias ascendentes.
// nx.json
{
"targetDefaults": {
"build": {
"dependsOn": ["^build"], // run dependency builds first
"cache": true
},
"test": {
"cache": true
}
}
}Etiquetas para aplicar restricciones
Etiquete los proyectos (por ejemplo, scope:ui, type:app) y use reglas de ESLint para impedir que las aplicaciones importen código interno de otras aplicaciones.
// project.json
{
"tags": ["scope:web", "type:app"]
}
// .eslintrc.json
{
"rules": {
"@nx/enforce-module-boundaries": ["error", {
"depConstraints": [
{ "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
]
}]
}
}Alias de rutas de TypeScript
Nx configura automáticamente tsconfig.base.json con alias de rutas para que importe bibliotecas compartidas como @myorg/ui en lugar de usar rutas relativas profundas.
// 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';Comprobación rápida
¿Qué hace nx affected --target=build en un monorepo de Nx?
Repaso
Cree un espacio de trabajo de Nx con create-nx-workspace. Use nx generate para las aplicaciones y bibliotecas, nx serve/build/test para las tareas y nx affected en CI para procesar únicamente los proyectos modificados. El almacenamiento en caché garantiza que las tareas sin cambios devuelvan el resultado al instante.
Preguntas frecuentes
¿La lección «Crear un monorepo Nx con aplicaciones React» es gratis?
Sí — el texto completo de «Crear un monorepo Nx con aplicaciones React» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Crear un monorepo Nx con aplicaciones React»?
Genere un workspace de Nx, añada aplicaciones React y comprenda el grafo del proyecto. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Crear un monorepo Nx con aplicaciones React»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Crear un monorepo Nx con aplicaciones React
- Bibliotecas compartidas y paquetes internos
- Comandos Affected y caché de Nx
- Generadores de código y automatización del workspace