You're using the slow version of egghead. Click here to try the faster version! ⚡️

Scale React Development with Nx

ClockIcon1h 34m
reactReact
>=16.13.1
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.7
Juri Strumpflohner

Juri Strumpflohner

Architect 👨‍💻 @nrwl_io 🐳🦄 • Google Dev Expert #GDE •🎓 @eggheadio • ❤ JS, Angular • 📝 blogger • 🗣️ speaker • @cypress_io Ambassador • nx.app • nx.dev

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.

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!

What you'll learn

  • CheckIconGenerating projects from scratch with Nx
  • CheckIconAdd Storybook to a React app
  • CheckIconCreating & sharing libraries between apps
  • CheckIconGenerating a backend API with a proxy for local development
  • CheckIconExploring an app's relationships via the Dependency Graph visualizer
  • CheckIconPreparing for unit testing with Jest and e2e testing with Cypress

Prerequisites

  • ChevronRightIcon

    Command line familiarity

  • ChevronRightIcon

    Node.js & npm installed

  • ChevronRightIcon

    Familiarity with React & Express will be helpful

Juri Strumpflohner

Juri Strumpflohner

Architect 👨‍💻 @nrwl_io 🐳🦄 • Google Dev Expert #GDE •🎓 @eggheadio • ❤ JS, Angular • 📝 blogger • 🗣️ speaker • @cypress_io Ambassador • nx.app • nx.dev

Community Notes

Read helpful summaries and further explanations of this course, made by learners just like you.

View Notes