Advanced React For Enterprise: React for senior engineers

Course Curriculum

Chapter 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

Chapter 2: CSS Architecture

Lecture 1: What we'll build

Lecture 2: Css architecture checklist

Lecture 3: Setup folder and file structure

Lecture 4: Define system variables

Lecture 5: Define foundation colors

Lecture 6: Assignment – Define foundation colors

Lecture 7: Define foundation typography

Lecture 8: Assignment – Define foundation typography

Lecture 9: Define mixins

Lecture 10: Assignment – Define mixins

Lecture 11: Global root and css reset

Lecture 12: Add stylelint and prettier

Lecture 13: Setup husky and pre-commit hooks

Lecture 14: Compile scss to css

Lecture 15: Compile components to css

Chapter 3: Monorepositories

Lecture 1: Setup mono repository with yarn and lerna

Chapter 4: Implementation of React

Lecture 1: Add react package to mono repository

Lecture 2: Add rollup to compile react

Lecture 3: Setup a react playground

Lecture 4: Setup dev script for all packages

Lecture 5: Identify atoms, molecules and organisms

Lecture 6: Assignment – Identify atoms, molecules and organisms

Lecture 7: Develop the colour component

Lecture 8: Dynamically generate utility classes

Lecture 9: Assignment – create image atom

Lecture 10: Extract foundation to a separate package

Lecture 11: Spacing component

Lecture 12: The select molecule

Lecture 13: Styles for the select molecule

Lecture 14: Calculate the overlay position

Lecture 15: Style the select option

Lecture 16: Selected option state

Lecture 17: Animate select caret

Lecture 18: Render props for custom option

Chapter 5: Accessibility for the select component

Lecture 1: Expanded and popup aria attributes

Lecture 2: Control menu items with keyboard

Lecture 3: Accessible keyboard navigation

Chapter 6: Unit testing atomic components

Lecture 1: Setup babel and jest

Lecture 2: Assignment – Select test cases

Lecture 3: Assignment – Select test cases solution

Lecture 4: Tests for foundations

Chapter 7: Storybook with react

Lecture 1: Setup storybook

Lecture 2: Select component variants

Lecture 3: Addon knobs

Lecture 4: Addon accessibility

Lecture 5: Visual regression tests with chromatic

Chapter 8: Publish to npm

Lecture 1: Publish to npm with lerna

Lecture 2: Control published files

Lecture 3: Conventional commits

Lecture 4: Lint commits

Lecture 5: Generate changelogs with lerna

Chapter 9: Github actions / CI / CD

Lecture 1: Setup github actions workflow

Lecture 2: Fix build issues on CI

Lecture 3: Automate chromatic with github actions

Lecture 4: Deploy storybook to netlify