React Monorepo Tutorial

In this tutorial you’ll learn how to use React with Nx in a monorepo setup.

What will you learn?

• how to create a new React application
• how to run a single task (i.e. serve your app) or run multiple tasks in parallel
• how to leverage code generators to scaffold components
• how to modularize your codebase and impose architectural constraints for better maintainability
• how to speed up CI with Nx Cloud ⚡

Why Use an Nx Monorepo?

Nx works along side your existing tooling to improve your experience developing in a monorepo. You can also use code generators that Nx provides to quickly spin up a new project that is pre-configured with industry standard tooling. In this tutorial, we’ll set up a monorepo that leverages the same tooling you would typically use without Nx, but Nx will enable you to focus your time on the features of your application rather than the tooling that surrounds it.

We’ll use npm/yarn/pnpm workspaces to link projects and TypeScript project references to incrementally typecheck the repository. Nx works well whether you have a single version policy or have each project separately define their dependencies, but in this tutorial we’ll define all dependencies in a single package.json at the root of the repository.

Nx generators will automatically configure new projects with useful tools like Prettier, ESLint and Jest. Those generators will also make sure that each project is referenced correctly in the root workspaces property and the tsconfig references properties accurately reflect the dependencies of each project.

Nx Plugins are optional packages that extend the capabilities of Nx, catering to various specific technologies. For instance, we have plugins tailored to React (e.g., @nx/react), Vite (@nx/vite), Cypress (@nx/cypress), and more. These plugins offer additional features, making your development experience more efficient and enjoyable when working with specific tech stacks.

Features we’ll use in this monorepo:

• Install dependencies at the root by default
• Scaffold new code with generators
• Updates dependencies with automated migrations

Visit our “Why Nx” page for more details.

Final Code

Here’s the source code of the final result for this tutorial.