7dd63866ae
* docs(testing): add overview docs for cypress and jest * docs(nx-plugin): add overview docs to map
2.8 KiB
2.8 KiB
Nx Plugin for React
The Nx Plugin for React contains schematics for managing React applications and libraries within an Nx workspace. It provides:
- Integration with libraries such as Jest, Cypress, and Storybook.
- Scaffolding for state management with Redux Toolkit libraries.
- Scaffolding for creating buildable libraries that can be published to npm.
- Utilities for automatic workspace refactoring.
Adding the React plugin
Adding the React plugin to a workspace can be done with the following:
#yarn
yarn add -D @nrwl/react
#npm
npm install -D @nrwl/react
Note: You can create a new workspace that has React set up by doing
npx create-nx-workspace@latest --preset=react
The file structure for a React application looks like:
myorg/
├── apps/
│ ├── myapp/
│ │ ├── src/
│ │ │ ├── app/
│ │ │ ├── assets/
│ │ │ ├── environments/
│ │ │ ├── favicon.ico
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── polyfills.ts
│ │ │ └── styles.css
│ │ ├── browserslist
│ │ ├── jest.config.js
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.json
│ │ └── tsconfig.spec.json
│ └── myapp-e2e/
│ ├── src/
│ │ ├── fixtures/
│ │ │ └── example.json
│ │ ├── integration/
│ │ │ └── app.spec.ts
│ │ ├── plugins/
│ │ │ └── index.ts
│ │ └── support/
│ │ ├── app.po.ts
│ │ ├── commands.ts
│ │ └── index.ts
│ ├── cypress.json
│ ├── tsconfig.e2e.json
│ └── tsconfig.json
├── libs/
├── tools/
├── README.md
├── workspace.json
├── nx.json
├── package.json
└── tsconfig.json
See Also
Schematics
- application - Create an React application
- component - Create an React library
- library - Create an React library
- redux - Generate a Redux slice for a project
- storybook-configuration - Set up Storybook for a react library