The React plugin for Nx 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.

![React Logo](/shared/react-logo.png)

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`.

To add the React plugin to an existing workspace, run one of the following:

```bash
# For npm users
npm install -D @nrwl/react

# For yarn users
yarn add -D @nrwl/react
```

### Creating Applications and Libraries

You can add a new application with the following:

```bash
nx g @nrwl/react:app my-new-app
```

To start the application in development mode, run `nx serve my-new-app`.

And add a new library as follows:

```bash
nx g @nrwl/react:lib my-new-lib

# If you want the library to be buildable or publishable to npm
nx g @nrwl/react:lib my-new-lib --buildable
nx g @nrwl/react:lib my-new-lib \
--publishable \
--importPath=@myorg/my-new-lib
```

Read more about [building and publishing libraries here](/more-concepts/buildable-and-publishable-libraries).

### Creating Components

Adding a component to an existing project can be done with:

```bash
nx g @nrwl/react:component my-new-component \
--project=my-new-app

# Note: If you want to export the component
# from the library use  --export
nx g @nrwl/react:component my-new-component \
--project=my-new-lib \
--export
```

Replace `my-new-app` and `my-new-lib` with the name of your projects.

### Creating Hooks

If you want to add a new hook, run the following

```bash
nx g @nrwl/react:hook my-new-hook --project=my-new-lib
```

Replace `my-new-lib` with the name of your project.

## Using React

### Testing Projects

You can run unit tests with:

```bash
nx test my-new-app
nx test my-new-lib
```

Replace `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:

```bash
nx e2e my-new-app-e2e
```

Replace `my-new-app-e2e` with the name or your project with `-e2e` appended.

### Building Projects

React applications can be build with:

```bash
nx build my-new-app
```

And if you generated a library with `--buildable`, then you can build a library as well:

```bash
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 `project.json` file.

The application in `dist` is deployable, and you can try it out locally with:

```bash
npx http-server dist/apps/my-new-app
```

The library in `dist` is publishable to npm or a private registry.

## More Documentation

- [Using Cypress](/packages/cypress)
- [Using Jest](/packages/jest)
- [Using Storybook](/storybook/overview-react)


Overview

module-federation-dev-server

This option allows you to whitelist services that are allowed to access the dev server.

Base url for the application being built.

List of remote applications to run in development mode (i.e. using serve target).

Whether to reload the page on change, using live-reload.

Number of workers to use for type checking.

Memory limit for type checking service process in `MB`.

Public URL where the application will be served.

SSL certificate to use for serving `HTTPS`.

Watches for changes and rebuilds application.

Module Federation Dev Server

init

Init React Plugin

application

Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`

Use class components instead of functional components

Use class components instead of functional component.

Test runner to use for end to end (E2E) tests.

Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.

Generate JavaScript files rather than TypeScript files.

Use pascal case component file name (e.g. `App.tsx`).

Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.

Skip setting the project as the default project. When `false` (the default), the project is set as the default project only if there is no default project already set.

Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).

Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.

Creates an application with strict mode and strict type checking.

Create a React Application

library

Create a React Library for an Nx workspace.

Generate a library with routes and add them to `myapp`

The application project to add the library route to.

When `true`, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).

The library name used to import it, like `@myorg/my-awesome-lib`.

Do not update `tsconfig.json` for development experience.

Whether to enable tsconfig strict mode or not.

Create a React Library

component

Generate a component in the `mylib` library

Generate a class component in the `mylib` library

Create the component under this directory (can be nested).

When true, the component is exported from the project `index.ts` (if it exists).

Create component at the source root rather than its own directory.

Use pascal case directory name (e.g. `App/App.tsx`).

When true, does not create `spec.ts` test files for the new component.

Create a React Component

redux

Create a Redux state slice for a React project.

The application project to add the slice to.

The name of the folder used to contain/group the generated Redux files.

The name of the project to add the slice to. If it is an application, then the store configuration will be updated too.

Create Redux state

Set up storybook for a React app or library.

storybook-configuration

Set up Storybook for a React app or library.

A directory where the Cypress project will be placed. Placed at the root by default.

Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.

Automatically generate `*.stories.ts` files for components declared in this project?

Paths to ignore when looking for components.

Generate JavaScript story files rather than TypeScript story files.

Project for which to generate Storybook configuration.

Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.

React Storybook Configure

Generate storybook story for a React component

component-story

Generate storybook story for a react component.

Relative path to the component file from the library root.

Create component story

Create stories/specs for all components declared in an app or library.

stories

Generate stories/specs for all components declared in a project.

The Cypress project to generate the stories under. This is inferred from `project` by default.

Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator.

Generate React Storybook stories

Create a Cypress spec for a UI component that has a story.

component-cypress-spec

Relative path to the component file from the library root?

The Cypress project to generate the stories under. By default, inferred from `project`.

The project name for which to generate tests.

Create component Cypress spec

hook

Create a React component using Hooks in a dedicated React project.

Create the hook under this directory (can be nested).

When true, the hook is exported from the project `index.ts` (if it exists).

Create hook at the source root rather than its own directory.

Use pascal case directory name (e.g. `useHook/useHook.ts`).

Use pascal case hook file name (e.g. `useHook.ts`).

When true, does not create `spec.ts` test files for the new hook.

Create a React Hook for Nx

host

Create Module Federation configuration files for given React Host Application.

The port for the dev server of the remote app.

Test runner to use for end to end (e2e) tests.

Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss

The name of the host application to generate the Module Federation configuration

Use pascal case component file name (e.g. App.tsx).

A list of remote application names that the host application should consume.

Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons.

Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).

Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json

Creates an application with strict mode and strict type checking

Generate Module Federation Setup for React Host App

remote

Create Module Federation configuration files for given React Remote Application.

Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss.

The host / shell application for this remote.

The name of the remote application to generate the Module Federation configuration

Generate Module Federation Setup for React Remote App

Setup Cypress component testing for a React project

cypress-component-configuration

Add a Cypress component testing configuration to an existing project.

Add component testing to your react project

Add component testing to your react project and generate component tests for your existing components

A build target used to configure Cypress component testing in the format of `project:target[:configuration]`. The build target should be from a React app. If not provided we will try to infer it from your projects usage.

Generate default component tests for existing components in the project

The name of the project to add cypress component testing configuration to

Add Cypress component testing

Generate a Cypress component test for a React component

component-test

Add a Cypress component test for a component.

Create a cypress component test for FancyComponent

Path to component, from the project source root

The name of the project the component is apart of

Add Cypress component test

Set up Tailwind configuration for a project.

setup-tailwind

Adds the Tailwind CSS configuration files for a given React project and installs, if needed, the packages required for Tailwind CSS to work.

Initialize Tailwind configuration for the `my-app` project.

The name of the target used to build the project. This option is not needed in most cases.

The name of the project to add the Tailwind CSS setup for.

Skips formatting the workspace after the generator completes.

Do not add dependencies to `package.json`.

@nrwl/react:hook

Usage

Examples

Options

directory

export

flat

js

name

project

pascalCaseFiles

pascalCaseDirectory

skipTests