8fa7065cf1
This PR updates examples in `.md` files (both docs and blog posts) to use positional args. Nx 20 changes the position arg to be either `directory` for apps/libs or `path` for artifacts (e.g. components). So before you'd do this: ``` nx g app myapp --directory=apps/myapp nx g lib mylib --directory=libs/mylib nx g lib mylib --directory=libs/nested/mylib nx g lib @acme/foo --directory=libs/@acme/foo --importPath=@acme/foo nx g component foo --directory=libs/ui/src/foo --pascalCaseFiles ``` Will now be simplified to ``` nx g app apps/myapp nx g lib libs/mylib nx g lib libs/nested/mylib nx g lib libs/@acme/foo # name and import path are both "@acme/foo" nx g component libs/ui/src/foo/Foo ``` For cases where `name` and `importPath` need to be changed, you can always manually specify them. ``` nx g lib libs/nested/foo # name is foo nx g lib libs/nested/foo --name=nested-foo # specify name with prefix nx g lib libs/@acme/foo --name # use "foo" as name and don't match importPath nx g lib libs/@internal/foo --importPath=@acme/foo # different importPath from name <!-- If this is a particularly complex change or feature addition, you can request a dedicated Nx release for this pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate. --> ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #
4.0 KiB
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 @nx/react
Generating a new Workspace
To create a new workspace with React, run npx create-nx-workspace@latest --preset=react-standalone.
{% callout type="note" title="React Tutorials" %} For a full tutorial experience, follow the React Standalone Tutorial or the React Monorepo Tutorial {% /callout %}
Installation
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
Make sure to install the @nx/react version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.
{% /callout %}
In any Nx workspace, you can install @nx/react by running the following command:
{% tabs %} {% tab label="Nx 18+" %}
nx add @nx/react
This will install the correct version of @nx/react.
{% /tab %} {% tab label="Nx < 18" %}
Install the @nx/react package with your package manager.
npm add -D @nx/react
{% /tab %} {% /tabs %}
Using the @nx/react Plugin
Creating Applications and Libraries
You can add a new application with the following:
nx g @nx/react:app apps/my-new-app
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 libs/my-new-lib
# If you want the library to be buildable or publishable to npm
nx g @nx/react:lib libs/my-new-lib --bundler=vite
nx g @nx/react:lib libs/my-new-lib --bundler=rollup
nx g @nx/react:lib libs/my-new-lib \
--publishable \
--importPath=@myorg/my-new-lib
Read more about building and publishing libraries here.
Creating Components
Adding a component to an existing project can be done with:
nx g @nx/react:component libs/my-new-lib/src/lib/my-new-component
# Note: If you want to export the component
# from the library use --export
nx g @nx/react:component libs/my-new-lib/src/lib/my-new-component --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
nx g @nx/react:hook libs/my-new-lib/src/lib/my-new-hook
Replace my-new-lib with the name of your project.
Using React
Testing Projects
You can run unit tests with:
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:
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:
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 project.json file.
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.