English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 6 Hours | 2.34 GB
A practical deep dive into building, scaling and maintaining high-quality design systems for software engineers.
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 applications
- Typescript and its advantages for frontend engineers
- Design systems and atomic design principles
- Npm package creation, management and publishing
- Continuous integration and deployment for the frontend engineer
- Unit component testing
- Visual regression testing
- Storybook and component libraries
- Component design patterns
- Mono-repository architecture patterns
- Accessibility 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 concepts
- You want to improve your skills all round as a frontend engineer
- You are interested in building design systems
- You want to learn the fundamentals tools you’ll need to become an open source software developer
We’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.
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
Table of Contents
Introduction to design systems
1 What are design systems
2 Atomic Design principles
3 Example design systems
4 Your role as an engineer in a design system
CSS Architecture
5 What we’ll build
6 Css architecture checklist
7 Setup folder and file structure
8 Define system variables
9 Define foundation colors
10 Assignment – Define foundation colors
11 Define foundation typography
12 Assignment – Define foundation typography
13 Define mixins
14 Assignment – Define mixins
15 Global root and css reset
16 Add stylelint and prettier
17 Setup husky and pre-commit hooks
18 Compile scss to css
19 Compile components to css
Monorepositories
20 Setup mono repository with yarn and lerna
Implementation of React
21 Add react package to mono repository
22 Add rollup to compile react
23 Setup a react playground
24 Setup dev script for all packages
25 Identify atoms, molecules and organisms
26 Assignment – Identify atoms, molecules and organisms
27 Develop the colour component
28 Dynamically generate utility classes
29 Assignment – create image atom
30 Extract foundation to a separate package
31 Spacing component
32 The select molecule
33 Styles for the select molecule
34 Calculate the overlay position
35 Style the select option
36 Selected option state
37 Animate select caret
38 Render props for custom option
Accessibility for the select component
39 Expanded and popup aria attributes
40 Control menu items with keyboard
41 Accessible keyboard navigation
Unit testing atomic components
42 Setup babel and jest
43 Assignment – Select test cases
44 Assignment – Select test cases solution
45 Tests for foundations
Storybook with react
46 Setup storybook
47 Select component variants
48 Addon knobs
49 Addon accessibility
50 Visual regression tests with chromatic
Publish to npm
51 Publish to npm with lerna
52 Control published files
53 Conventional commits
54 Lint commits
55 Generate changelogs with lerna
Github actions CI CD
56 Setup github actions workflow
57 Fix build issues on CI
58 Automate chromatic with github actions
59 Deploy storybook to netlify
Resolve the captcha to access the links!