Advanced React For Enterprise: React for senior engineers

6h 4m 5s
English
Paid
October 4, 2024

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!

More

We'll build our very own design system from scratch. This will give us the opportunity to cover senior topics such as:

  1. CSS Architecture for react applications

  2. Typescript and its advantages for frontend engineers

  3. Design systems and atomic design principles

  4. Npm package creation, management and publishing

  5. Continuous integration and deployment for the frontend engineer

  6. Unit component testing

  7. Visual regression testing

  8. Storybook and component libraries

  9. Component design patterns

  10. Mono-repository architecture patterns

  11. 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.


Watch Online Advanced React For Enterprise: React for senior engineers

Join premium to watch
Go to premium
# Title Duration
1 What are design systems 06:35
2 Atomic Design principles 08:33
3 Example design systems 05:34
4 Your role as an engineer in a design system 05:03
5 What we'll build 04:06
6 Css architecture checklist 01:50
7 Setup folder and file structure 02:50
8 Define system variables 09:27
9 Define foundation colors 07:35
10 Assignment - Define foundation colors 01:54
11 Define foundation typography 02:01
12 Assignment - Define foundation typography 01:11
13 Define mixins 03:43
14 Assignment - Define mixins 03:13
15 Global root and css reset 06:32
16 Add stylelint and prettier 07:16
17 Setup husky and pre-commit hooks 03:57
18 Compile scss to css 06:49
19 Compile components to css 09:22
20 Setup mono repository with yarn and lerna 10:08
21 Add react package to mono repository 04:02
22 Add rollup to compile react 04:43
23 Setup a react playground 10:31
24 Setup dev script for all packages 03:53
25 Identify atoms, molecules and organisms 03:32
26 Assignment - Identify atoms, molecules and organisms 00:52
27 Develop the colour component 05:01
28 Dynamically generate utility classes 08:47
29 Assignment - create image atom 01:06
30 Extract foundation to a separate package 07:02
31 Spacing component 15:23
32 The select molecule 11:10
33 Styles for the select molecule 11:52
34 Calculate the overlay position 07:11
35 Style the select option 03:32
36 Selected option state 08:35
37 Animate select caret 02:18
38 Render props for custom option 07:41
39 Expanded and popup aria attributes 03:25
40 Control menu items with keyboard 16:53
41 Accessible keyboard navigation 09:53
42 Setup babel and jest 07:24
43 Assignment - Select test cases 01:00
44 Assignment - Select test cases solution 09:22
45 Tests for foundations 05:06
46 Setup storybook 07:53
47 Select component variants 04:06
48 Addon knobs 09:07
49 Addon accessibility 07:40
50 Visual regression tests with chromatic 05:57
51 Publish to npm with lerna 07:31
52 Control published files 06:57
53 Conventional commits 04:44
54 Lint commits 03:06
55 Generate changelogs with lerna 06:11
56 Setup github actions workflow 06:36
57 Fix build issues on CI 07:15
58 Automate chromatic with github actions 04:44
59 Deploy storybook to netlify 04:25

Similar courses to Advanced React For Enterprise: React for senior engineers

The Official React Query Course - query.gg

The Official React Query Course - query.gg

Duration 3 hours 38 minutes 28 seconds
PHP Symfony 4 API Platform + React.js Full Stack Masterclass

PHP Symfony 4 API Platform + React.js Full Stack Masterclass

Duration 19 hours 24 minutes 17 seconds
React and Laravel: Breaking a Monolith to Microservices

React and Laravel: Breaking a Monolith to Microservices

Duration 15 hours 7 minutes 45 seconds
Scale React Development with Nx

Scale React Development with Nx

Duration 1 hour 34 minutes 10 seconds
My first Remix app

My first Remix app

Duration 5 hours 44 seconds
Crack the Frontend Interview with React

Crack the Frontend Interview with React

Duration 1 hour 6 minutes 53 seconds
Stripe Payments JavaScript Course

Stripe Payments JavaScript Course

Duration 1 hour 29 minutes 26 seconds
Zero to Full Stack Hero

Zero to Full Stack Hero

Duration 101 hours 29 minutes 59 seconds
Server side rendering with Next + React

Server side rendering with Next + React

Duration 29 hours 43 minutes 19 seconds
Storybook for building React apps

Storybook for building React apps

Duration 3 hours 16 minutes 25 seconds