The React plugin contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:
- Integration with libraries such as Jest, Cypress, and Storybook.
- Generators for applications, libraries, components, hooks, and more.
- Library build support for publishing packages to npm or other registries.
- Utilities for automatic workspace refactoring.
Setting Up React
To create a new workspace with React, run
npx create-nx-workspace@latest --preset=react-standalone.
To add the React plugin to an existing workspace, run one of the following:
For npm users npm install -D @nx/react For yarn users yarn add -D @nx/react
Creating Applications and Libraries
You can add a new application with the following:
To start the application in development mode, run
nx serve my-new-app.
And add a new library as follows:
nx g @nx/react:lib my-new-lib If you want the library to be buildable or publishable to npm nx g @nx/react:lib my-new-lib --bundler=vite nx g @nx/react:lib my-new-lib --bundler=rollup nx g @nx/react:lib my-new-lib \ --publishable \ --importPath=@myorg/my-new-lib
Read more about building and publishing libraries here.
Adding a component to an existing project can be done with:
nx g @nx/react:component my-new-component \ --project=my-new-app Note: If you want to export the component from the library use --export nx g @nx/react:component my-new-component \ --project=my-new-lib \ --export
my-new-lib with the name of your projects.
If you want to add a new hook, run the following
my-new-lib with the name of your project.
You can run unit tests with:
nx test my-new-app nx test my-new-lib
my-new-app with the name or your project. This command works for both applications and libraries.
You can also run E2E tests for applications:
nx e2e my-new-app-e2e
my-new-app-e2e with the name or your project with
React applications can be build with:
nx build my-new-app
And if you generated a library with
--bundler specified, then you can build a library as well:
nx build my-new-lib
The output is in the
dist folder. You can customize the output folder by setting
outputPath in the project's
The application in
dist is deployable, and you can try it out locally with:
npx http-server dist/apps/my-new-app
The library in
dist is publishable to npm or a private registry.