Revolutionize Your React dev flow with Nx

Building, Scaling, and Optimizing React Applications Made Simple
Katerina Skroumpelou
Product Advocate at Nx
Nx logo
+
Nx Cloud logo
+
React logo
=
❤️⚡️


slides: react-nx.netlify.app

Hello, I’m Katerina! 💅

👩‍💻 Product Advocate + Engineer at Nx - nx.dev
🎯 Google Developer Expert for Angular & Maps
👥 Women Techmakers Ambassador
🎤 Speaker + Instructor
❤️ Loves:
🐱 Cats
⛰️ Mountains
🍫 Chocolate
Find me at:
🐦 @psybercity - 🦋 @psyber.city - 💻 psyber.city
Me on Olympus

Some credit

  • I created these slides using Sli.dev, antfu’s code slides tool
  • I shamelessly used bolt.new to do so - and it was a-ma-zing
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024

Scaling and Optimizing React Apps Isn't Easy

Developers often rely on many external tools to manage builds, dependencies, and workflows.
Webpack
Jest
Vite
ESLint
Babel
npm

Nx: The Missing Piece for React Developers

Nx brings cohesion to the React ecosystem, simplifying development with powerful automation and tooling integration.
Nx logo
React
Vite
Vitest
Next.js
Playwright
Remix

my babies

My babies

Why React Developers Love Nx

Code Generators

> nx g @nx/react:app_

Automatic Migrations

Workspace Insights

Briefly: What Nx Brings

Run Tasks

Cache Task Results

Explore Your Workspace

Generate Code

Automate Updates

Enforce Boundaries

Manage Releases

@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024

Nx Supercharges React Development

Next.js
Remix
Vite
Jest & Vitest
Playwright

Streamline Development with Nx

Testing Made Simple

$ nx test
$ nx e2e

Seamless Jest and Cypress integration for unit and E2E testing

Optimized Builds

$ nx build
$ nx release

Build deployable apps or publishable libraries with ease

SSR & Module Federation

$nx g @nx/react:setup-ssr
$nx serve host-app
$nx g @nx/react:remote

Generate SSR apps and federate modules effortlessly

Code Generators That Save Time

Speed up development with powerful generators

Applications

$ nx g @nx/react:app my-app

Libraries

$ nx g @nx/react:lib shared-ui

Components

$ nx g @nx/react:component button

Hooks

$ nx g @nx/react:hook use-auth
Generate
Build
Test
Deploy

Taking Your Project to the Next Level: Nx Cloud

React logo
Nx logo

Built for Scale

Lightning Fast

Intelligent Insights

Run Only Affected Tasks

Optimize builds by running only tasks affected by a PR.

Smart Task Execution

  • Analyzes dependency graph
  • Identifies affected projects
  • Skips unnecessary builds
Dependency Graph Example
Dependency Graph Example
Pink nodes indicate affected projects
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024

Remote Caching (Nx Replay)

Accelerate Team Development

Key Benefits

  • Share task results across teams
  • Eliminate redundant operations
  • Reduce CI/CD pipeline times
Nx logo

Distributed Task Execution (Nx Agents)

Distribute tasks across machines for faster builds
Nx logo

my babies #2

My babies #2

Atomizer: E2E Test Optimization

Automatically split and parallelize E2E tests.

Smart Test Distribution

  • Automatic test splitting
  • Parallel execution
  • Optimal resource usage
Original Test Files:
src/e2e/app1.cy.ts
src/e2e/app2.cy.ts
src/e2e/app3.cy.ts
src/e2e/app4.cy.ts
Atomizer Split:
e2e-ci--src/e2e/app1.cy.ts
e2e-ci--src/e2e/app2.cy.ts
e2e-ci--src/e2e/app3.cy.ts
e2e-ci--src/e2e/app4.cy.ts
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024

Atomizer in Action

Atomizer Example
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024

Auto-Rerun Flaky Tasks

Identify and re-run flaky tasks to ensure build stability.

Automatic Recovery

  • Detects flaky tests
  • Automatic retries
  • Failure analysis
Failed
Retrying
Success

AI Enhancements

Use AI to explain errors, allocate resources efficiently, and save costs.

Error Analysis

Intelligent error explanations and solutions

Resource Optimization

Smart allocation of computing resources

Cost Savings

AI-driven cost optimization

@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024
1 / 31