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
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.
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
For migrating existing workspace, see our Create React App migration guide or "Adding Nx to Yarn/Lerna monorepo" migration guide.
Modern Testing and Linting Tools
With Nx, modern testing and linting tools are included and configured out-of-the-box. This includes:
- 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.
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.
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:
- Nx React Documentation
- Free Nx Workspaces video course
- Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor Savkin
- Tune into regular Nx Office Hours livestreams
- Nx Cloud
You can also follow Nx Dev Tools on Twitter to keep up with latest news, feature announcements, and resources from the Nx Core Team.