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

Add React Storybook to a Project

Add React Storybook to a Projectegghead

Category: React.js
Duration 3 minutes 36 seconds
The complete React Fullstack course ( 2021 edition )

The complete React Fullstack course ( 2021 edition )udemy

Category: React.js, MongoDB
Duration 76 hours 58 minutes 6 seconds
The essential guide to Firebase with React.

The essential guide to Firebase with React.udemy

Category: React.js, Firebase
Duration 31 hours 20 minutes 9 seconds
React and NodeJS: A Practical Guide with Typescript

React and NodeJS: A Practical Guide with Typescriptudemy

Category: TypeScript, React.js, Node.js
Duration 6 hours 54 minutes 59 seconds
React Query

React Queryui.dev (ex. Tyler McGinnis)

Category: React.js
Duration 7 hours 1 minute 30 seconds
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejsudemy

Category: React.js, Next.js, Node.js, MongoDB, Socket.IO
Duration 13 hours 2 minutes 12 seconds
Testing React Apps with React Testing Library

Testing React Apps with React Testing Librarycodewithmosh (Mosh Hamedani)

Category: React.js
Duration 6 hours 48 minutes 20 seconds
React Hooks

React Hooksui.dev (ex. Tyler McGinnis)

Category: React.js
Duration 3 hours 47 minutes 48 seconds
Uber Eats Clone

Uber Eats Clone Nomad Coders

Category: TypeScript, React.js
Duration 40 hours 22 minutes 44 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