Scale React Development with Nx
On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code. But there's a bit more to it than just those three steps.
Read more about the course
The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend app, an admin dashboard app, and a single backend used for both.
How does this change your directory structures? How should you share code between projects? What happens when you add a Design System into the mix?
It can get hard to keep things straight in your head.
Nx is a tool that aims to solve these problems for you, whether you're working solo on a small full-stack app or on a dev team of thousands.
It's not just an opinionated folder structure. When you create an app with Nx, it generates unit and e2e test setups as well as preparing bundling and code-splitting with Webpack, and stubbing out common features like routing.
One of the coolest features of Nx is its Dependency Graph. The graph can visually show you the relationship between the parts of your application, and is optimized to ensure that compiling, testing, and linting only happens in the affected areas of your project.
In this course, Juri Strumpflohner demonstrates these features and more through the iterative creation of a React + Storybook + Express app. Don't worry if this isn't your preferred stack! Nx supports the most popular frameworks & libraries on the web.
More importantly, the focus of this course is more on the workflow than the implementation.
Watch Juri's course, and see if the Nx tooling & workflow is right for you and your team!
Watch Online Scale React Development with Nx
| # | Title | Duration |
|---|---|---|
| 1 | Create a new empty Nx Workspace | 03:37 |
| 2 | Generate a new React app with Nx | 04:52 |
| 3 | Generate new Projects for Nx with Nx Console | 02:11 |
| 4 | Running a React App in the Browser with Nx | 04:15 |
| 5 | Install and use external npm packages in an Nx Workspace | 03:26 |
| 6 | Add Styling to a React app inside an Nx workspace | 03:22 |
| 7 | Configure Assets for my React app in an Nx Workspace | 02:07 |
| 8 | Create a Shared React Library in an Nx Workspace | 04:20 |
| 9 | Generate a TypeScript library in an Nx Workspace | 03:45 |
| 10 | Use the Nx Dependency Graph to Visualize your Monorepo Structure | 03:14 |
| 11 | Create React Feature Libraries in an Nx Workspace | 05:58 |
| 12 | Create an Express Backend API in an Nx Workspace | 04:31 |
| 13 | Use Run Commands to launch the API and App of an Nx Workspace | 03:51 |
| 14 | Connect to an Express.js API from a React app in an Nx Workspace | 03:09 |
| 15 | Share and Reuse functionality with libraries in Nx | 04:12 |
| 16 | Share code between a React Frontend and Node.js Backend Application in Nx | 04:06 |
| 17 | Use Storybook to Develop React Components in Nx | 05:37 |
| 18 | Use Cypress and Storybook to test your React Components in Isolation | 04:04 |
| 19 | Run Jest tests for a React app with Nx | 03:47 |
| 20 | Building your React app with Nx | 02:19 |
| 21 | Linting a React app with Nx | 01:43 |
| 22 | Scale CI runs with Nx Affected Commands | 04:52 |
| 23 | Speed up with Nx computation Caching | 04:32 |
| 24 | Update your Nx workspace with Nx migrations | 06:20 |
Similar courses to Scale React Development with Nx
The Official React Query Course - query.ggui.dev (ex. Tyler McGinnis)
MERN Stack Front To Back: Full Stack React, Redux & Node.js.udemyBrad Traversy
Instagram Clone Coding 3.0Nomad Coders
Intro to Shopify App Development with React, Node & GraphQLudemy
MERN React Node Next.js Multi User SEO Blogging Platformudemy
React Simplified - Beginnerwebdevsimplified.com
Master Class: React + Typescript 2021 Web Developmentudemy
React Fundamentalsui.dev (ex. Tyler McGinnis)
