Nx and React illustration

Nx and React

Nx is a suite of powerful, extensible dev tools that help you develop, test, build, and scale with React and React frameworks like Gatsby, Next.js, React Native, etc.

React is the most popular JavaScript UI library, and for good reasons. A key benefit of React is the ability to learn once, and write anywhere. Once you understand React’s declarative, component-based API, then you can apply that to any application, and at any organization.

On the other hand, the tooling around React is fragmented. When you create a new workspace, you have to choose between a multitude of CLI tools: Create React App, Create React Native App, Gatsby CLI, Next.js CLI, boilerplate projects, etc. After your workspace has been created, the tooling becomes even more fragmented.

Nx is a set of tools that provides a standardized and integrated development experience for all of your React workspaces. Develop your applications using your preferred React flavor, and we’ll provide all the rest.

Just like the React library, with Nx you learn once and develop anywhere. You can get started right away by creating an Nx workspace, or learn more about the benefits Nx provides when building React applications.

Create a React Workspace with Nx

npx create-nx-workspace --preset=react
Modern Angular illustration

Once you’ve created your React workspace, follow the steps in this tutorial to learn how to add testing, share code, view dependency graphs, and much, much more.

Nx React App Tutorial

Tooling

Nx and React illustration

Modern Testing and Linting Tools

With Nx, modern testing and linting tools are included and configured out-of-the-box. This includes:

  • Jest Jest is a zero-config JavaScript testing framework that prioritizes simplicity. With robust documentation and a feature-full API, Jest is a great solution for JS developers looking for a powerful, modern testing toolkit.
  • Cypress Cypress supplies fast, reliable E2E testing for anything that runs in the browser. Cypress includes time travel debugging, readable errors and stack traces, real-time reloads, and more.
  • ESLint ESLint uses static analysis to identify problems in your code, many of which are fixed automatically in a syntax-aware manner. ESLint is highly configurable; customize your linting preprocess code, use custom parsers, or write your own rules.
Learn Once,
Develop Anywhere
Convention Over
Configuration
Modern Component Design Tools
Nx Uses Computation
Caching

Code once, develop anywhere

Nx provides a standardized development experience no matter which flavor of React you choose: Gatsby, Next.js, React Native, or just plain React. Generate code, run tests, and perform builds with the same commands across all your apps. Developers should feel right at home when working on any Nx workspace, thanks to consistent layout and tooling.

Modern Angular development experience illustration

Nx Integrated Development Experience

Nx provides a modern dev experience that is more integrated. Nx adds a high-quality VS Code plugin which helps you use the build tool effectively, generate components in folders, and much more.

Nx also supports optional free cloud support with Nx Cloud as well as GitHub integration. Share links with your teammates where everyone working on a project can examine detailed build logs and get insights about how to improve your project and build.

Learn More About Nx

To learn more about Nx and how Nx can increase your dev and build efficiency and modernize your apps stack, check out the following resources:

You can also follow Nx Dev Tools on Twitter to keep up with latest news, feature announcements, and resources from the Nx Core Team.

These Companies use Nx

American Airlines uses Nx from Nrwl
American Tire Distributors uses Nx from Nrwl
Anthem uses Nx from Nrwl
Audi uses Nx from Nrwl
BlackRock uses Nx from Nrwl
Cisco uses Nx from Nrwl
CapitalOne uses Nx from Nrwl
Cigna uses Nx from Nrwl
FedEx uses Nx from Nrwl
FICO uses Nx from Nrwl
Accenture uses Nx from Nrwl
GM uses Nx from Nrwl
Datasite uses Nx from Nrwl
Microsoft uses Nx from Nrwl
RedHat uses Nx from Nrwl
SatcomDirect uses Nx from Nrwl
TMobile uses Nx from Nrwl
Viacom uses Nx from Nrwl