@nx/react

What is @nx/react?

@nx/react is a package that provides tools and utilities for building React applications within the Nx workspace. It helps in managing, building, and testing React applications and libraries efficiently.

What are @nx/react's main functionalities?

Create React Application

This command generates a new React application within the Nx workspace. It sets up the necessary files and configurations to get started with a React project.

npx nx generate @nx/react:application my-app

Create React Library

This command generates a new React library within the Nx workspace. It is useful for creating reusable components or utilities that can be shared across multiple applications.

npx nx generate @nx/react:library my-lib

Run React Application

This command starts a development server for the specified React application, enabling live reloading and easy development.

npx nx serve my-app

Build React Application

This command builds the specified React application for production, optimizing the output for deployment.

npx nx build my-app

Test React Application

This command runs the unit tests for the specified React application using Jest, ensuring the code is functioning as expected.

npx nx test my-app

Other packages similar to @nx/react

create-react-app

Create React App is a popular tool for setting up a new React project with a single command. It provides a pre-configured build setup with Webpack, Babel, and other tools. Unlike @nx/react, it does not offer monorepo support or the ability to manage multiple applications and libraries within a single workspace.

react-scripts

React Scripts is a set of scripts and configuration used by Create React App. It abstracts away the configuration of Webpack, Babel, and other tools. While it simplifies the setup of a React project, it does not provide the advanced workspace management features of @nx/react.

lerna

Lerna is a tool for managing JavaScript projects with multiple packages. It optimizes the workflow around managing multi-package repositories. While it can be used with React projects, it does not provide the specific React tooling and generators that @nx/react offers.

storybook

Storybook is a tool for developing UI components in isolation for React and other frameworks. It provides a great environment for building and testing components, but it does not offer the full project management and build capabilities of @nx/react.

README

---

Nx: Smart Monorepos · Fast CI

Nx is a build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.

This package is a React plugin for Nx.

Getting Started

Creating an Nx Workspace

Using npx

npx create-nx-workspace

Using npm init

npm init nx-workspace

Using yarn create

yarn create nx-workspace

Adding Nx to an Existing Repository

Run:

npx nx@latest init

Documentation & Resources

• Nx.Dev: Documentation, Guides, Tutorials
• Intro to Nx
• Official Nx YouTube Channel
• Blog Posts About Nx