Skip to main content
CF

Scale React Development with Nx

1h 34m 10s
English
Paid

Starting a new project might seem straightforward, involving creating directories, installing dependencies, and writing code. However, there's much more to consider beyond these basic steps.

Understanding Project Complexity

The nature of the project you're working on significantly impacts your decisions. This complexity increases when dealing with multiple, related projects. For instance, you might operate a customer-facing frontend app, an admin dashboard app, and a shared backend.

Project Challenges

How does this affect your directory structures? How can you efficiently share code between projects? And what happens when you introduce a Design System?

Managing these aspects can be challenging.

Nx: A Solution for Project Complexity

Nx is a powerful tool designed to address these challenges, whether you're developing solo on a small full-stack application or as part of a large development team.

Beyond Folder Structures

Nx provides more than just an opinionated folder structure. It sets up unit and e2e testing environments, prepares bundling and code-splitting with Webpack, and includes stubs for common features like routing.

Dependency Graph Feature

One of Nx's standout features is the Dependency Graph. This tool visually maps the relationships within your application and ensures that compiling, testing, and linting are performed only on affected areas of your project.

Course Overview with Juri Strumpflohner

In this course, Juri Strumpflohner explores these features and more through the development of a React + Storybook + Express app. Even if these aren't your preferred technologies, rest assured; Nx supports the most popular frameworks and libraries, emphasizing workflow over specific implementations.

Embark on Juri's course to determine if the Nx tooling and workflow fit your team and project needs!

Additional

https://github.com/juristr/egghead-scale-react-dev-with-nx/tree/master

About the Author: egghead.io

egghead.io thumbnail

egghead.io is a US-based subscription video platform focused on short, focused screencasts on JavaScript ecosystem topics. Founded in 2012 by John Lindquist (a Google Developer Expert) and run by Joel Hooks, egghead pioneered the short-screencast format that most modern developer-education platforms now use — courses are typically broken into 2-5 minute lessons that each cover one specific concept or API.

The instructor roster includes many of the most cited names in the JavaScript ecosystem — Kent C. Dodds (whose Testing JavaScript launched on egghead before EpicWeb.dev), Andrew Del Prete, Hannah Davis, Lukas Ruebbelke, Tomasz Łakomy, Andy Van Slaars, and many others. Course material covers React, Next.js, TypeScript, Node.js, GraphQL, Vue, the testing tracks, RxJS / observables, and a long list of smaller libraries and tools.

The CourseFlix listing under this source carries over 20 egghead courses spanning that range. Material is paid; egghead itself runs on a monthly / annual subscription on the original platform. The bite-sized format suits developers learning incrementally during work hours rather than committing to multi-hour video sessions.

Watch Online 24 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 24 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Create a new empty Nx Workspace
All Course Lessons (24)
#Lesson TitleDurationAccess
1
Create a new empty Nx Workspace Demo
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
Unlock unlimited learning

Get instant access to all 23 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a basic understanding of React and general JavaScript development. Familiarity with Node.js and npm will also be beneficial, as the course involves using npm packages and setting up a backend API with Express.js. Experience with version control systems like Git is recommended to manage project complexity effectively.
What projects will I build in this course?
Throughout the course, you will work on building a React app and an Express backend API within an Nx workspace. You will also create shared libraries to manage code across multiple projects and explore feature libraries to enhance your React applications. The course involves practical exercises such as generating projects with Nx Console, using Storybook for component development, and setting up Cypress for testing.
Who is the target audience for this course?
This course is designed for React developers looking to manage complex projects more efficiently using Nx. It is suitable for both individual developers and those working in large teams, especially if they are handling multiple interrelated projects, such as a frontend app, an admin dashboard, and a shared backend.
How does this course compare in depth to other React development courses?
This course goes beyond basic React development by focusing on project complexity management using Nx. It provides a deep dive into setting up a monorepo structure, sharing code between projects, and using advanced features like the Dependency Graph. Unlike typical React courses, it also covers building an Express backend and integrating tools like Storybook and Cypress for testing.
What specific tools or platforms does the course cover?
The course covers Nx as the central tool for managing project complexity in React development. It includes hands-on exercises with Nx Console for project generation, Webpack for bundling and code-splitting, Storybook for component development, and Cypress for testing. Additionally, the course utilizes npm for package management and Jest for running tests.
What topics are not covered in this course?
The course does not cover basic React concepts or beginner-level JavaScript programming. It assumes existing knowledge in those areas. Additionally, it does not delve into advanced backend development topics outside of setting up an Express API, nor does it cover other JavaScript frameworks or libraries outside the React ecosystem.
How much time should I expect to commit to completing this course?
The course consists of 24 lessons, each designed to teach specific aspects of managing complex React projects with Nx. While the total runtime is not specified, it's advisable to allocate time for practical exercises alongside the video content. Depending on your familiarity with the topics, you may need additional time to implement and experiment with the concepts in your own projects.