Advanced React For Enterprise: React for senior engineers

6h 4m 5s
English
Paid

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!

Read more about the course

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

Next.js & React with ChatGPT - Development Guide (2023)

Next.js & React with ChatGPT - Development Guide (2023)udemy

Category: React.js, Next.js, ChatGPT
Duration 7 hours 6 minutes 49 seconds
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2Kent C. Dodds

Category: TypeScript, React.js
Duration 26 hours 51 minutes 3 seconds
React Formula - Learn Frontend Development

React Formula - Learn Frontend DevelopmentAlvin Zablan

Category: React.js
Duration 23 hours 47 minutes 37 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.Marc Lou

Category: React.js, Next.js
Duration 11 hours 38 minutes 42 seconds
Classic React

Classic ReactBuild UI

Category: React.js
Duration 4 hours 10 minutes 15 seconds
The Modern React 18 Bootcamp - A Complete Developer Guide

The Modern React 18 Bootcamp - A Complete Developer Guideudemy

Category: React.js
Duration 20 hours 35 minutes 57 seconds
Microfrontends with React: A Complete Developer's Guide

Microfrontends with React: A Complete Developer's GuideudemyStephen Grider

Category: React.js
Duration 9 hours 2 minutes 34 seconds
Intro to Shopify App Development with React, Node & GraphQL

Intro to Shopify App Development with React, Node & GraphQLudemy

Category: React.js
Duration 4 hours 10 seconds
React Query (OLD)

React Query (OLD)ui.dev (ex. Tyler McGinnis)

Category: React.js
Duration 7 hours 1 minute 30 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platformudemy

Category: React.js, Next.js, Node.js
Duration 20 hours 25 minutes 13 seconds