Advanced React For Enterprise React for senior engineers

A practical deep dive into building, scaling and maintaining high-quality design systems for software engineers.
Advanced React For Enterprise React for senior engineers
File Size :
2.09 GB
Total length :
6h 3m



Kati Frantz


Last update




Advanced React For Enterprise React for senior engineers

What you’ll learn

Css architecture of frontend codebases
Design patterns for creating reusable react components
Creating maintainable and team effective components with Typescript
Creating, deploying and managing npm packages
Accessibility of custom components & accessibility testing
Performance optimisation for styles in React codebases
Unit and visual regression testing
Storybook and component libraries
Continuous integration and deployments for the modern software engineer

Advanced React For Enterprise React for senior engineers


Basic knowledge of React is required
A little knowledge about testing is recommended but not required
Basic knowledge of Typescript is recommended but not required


Welcome to the React for Senior engineers course !!  Knowledge of React is 100% required for this course. I’ve been working with React.js for over 5 years now, and I am so excited to share with you the skills needed to thrive as a senior React Engineer. Do you want to build and architect react Apps like Microsoft and Github Engineers? This course is for you!We’ll build our very own design system from scratch. This will give us the opportunity to cover senior topics such as:CSS Architecture for react applicationsTypescript and its advantages for frontend engineersDesign systems and atomic design principlesNpm package creation, management and publishingContinuous integration and deployment for the frontend engineerUnit component testingVisual regression testingStorybook and component librariesComponent design patternsMono-repository architecture patternsAccessibility and unit accessibility testing And so much more to come.This course is perfect for you if:You’re a beginner to midlevel react developer looking to learn more advanced conceptsYou want to improve your skills all round as a frontend engineerYou are interested in building design systemsYou want to learn the fundamentals tools you’ll need to become an open source software developerWe’re also going to be adding a whole new section containing advanced react concepts that you’ll find almost nowhere on the internet. We’ll cover advanced topics such as design patterns, hook patters, efficient state management, frontend codebase architecture, best practices for performance, and so much more.Come join me on this fun journey. I can’t wait to share my wealth of knowledge and experience with you. Click the Enrol button now, and change your life forever.


Section 1: Introduction to design systems

Lecture 1 What are design systems

Lecture 2 Atomic Design principles

Lecture 3 Example design systems

Lecture 4 Your role as an engineer in a design system

Section 2: CSS Architecture

Lecture 5 What we’ll build

Lecture 6 Css architecture checklist

Lecture 7 Setup folder and file structure

Lecture 8 Define system variables

Lecture 9 Define foundation colors

Lecture 10 Assignment – Define foundation colors

Lecture 11 Define foundation typography

Lecture 12 Assignment – Define foundation typography

Lecture 13 Define mixins

Lecture 14 Assignment – Define mixins

Lecture 15 Global root and css reset

Lecture 16 Add stylelint and prettier

Lecture 17 Setup husky and pre-commit hooks

Lecture 18 Compile scss to css

Lecture 19 Compile components to css

Section 3: Monorepositories

Lecture 20 Setup mono repository with yarn and lerna

Section 4: Implementation of React

Lecture 21 Add react package to mono repository

Lecture 22 Add rollup to compile react

Lecture 23 Setup a react playground

Lecture 24 Setup dev script for all packages

Lecture 25 Identify atoms, molecules and organisms

Lecture 26 Assignment – Identify atoms, molecules and organisms

Lecture 27 Develop the colour component

Lecture 28 Dynamically generate utility classes

Lecture 29 Assignment – create image atom

Lecture 30 Extract foundation to a separate package

Lecture 31 Spacing component

Lecture 32 The select molecule

Lecture 33 Styles for the select molecule

Lecture 34 Calculate the overlay position

Lecture 35 Style the select option

Lecture 36 Selected option state

Lecture 37 Animate select caret

Lecture 38 Render props for custom option

Section 5: Accessibility for the select component

Lecture 39 Expanded and popup aria attributes

Lecture 40 Control menu items with keyboard

Lecture 41 Accessible keyboard navigation

Section 6: Unit testing atomic components

Lecture 42 Setup babel and jest

Lecture 43 Assignment – Select test cases

Lecture 44 Assignment – Select test cases solution

Lecture 45 Tests for foundations

Section 7: Storybook with react

Lecture 46 Setup storybook

Lecture 47 Select component variants

Lecture 48 Addon knobs

Lecture 49 Addon accessibility

Lecture 50 Visual regression tests with chromatic

Section 8: Publish to npm

Lecture 51 Publish to npm with lerna

Lecture 52 Control published files

Lecture 53 Conventional commits

Lecture 54 Lint commits

Lecture 55 Generate changelogs with lerna

Section 9: Github actions / CI / CD

Lecture 56 Setup github actions workflow

Lecture 57 Fix build issues on CI

Lecture 58 Automate chromatic with github actions

Lecture 59 Deploy storybook to netlify

Beginner to intermediate React developers looking to become senior react developers

Course Information:

Udemy | English | 6h 3m | 2.09 GB
Created by: Kati Frantz

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top