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

React Testing Library and Jest: The Complete Guide

React Testing Library and Jest: The Complete GuideudemyStephen Grider

Category: React.js
Duration 7 hours 40 minutes 24 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPTudemy

Category: TypeScript, React.js, Next.js
Duration 6 hours 52 minutes 28 seconds
Full-Stack React with GraphQL and Apollo Boost

Full-Stack React with GraphQL and Apollo Boostudemy

Category: React.js, Node.js, MongoDB, GraphQL
Duration 6 hours 54 minutes 31 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
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
The Joy of React

The Joy of ReactJosh Comeau

Category: React.js, Next.js
Duration 25 hours 35 minutes 33 seconds
Fullstack ASP.NET Core and React Masterclass | Learnify

Fullstack ASP.NET Core and React Masterclass | Learnify fullstack.io

Category: React.js, C Sharp (C#)
Duration 20 hours 40 minutes 31 seconds
Master Class: React + Typescript 2021 Web Development

Master Class: React + Typescript 2021 Web Developmentudemy

Category: TypeScript, React.js
Duration 22 hours 4 minutes 13 seconds
Bedrock: Jumpstart your next SaaS product

Bedrock: Jumpstart your next SaaS productMax Stoiber (@mxstbr)

Category: React.js, Others, Next.js, GraphQL, Assemblies, ready-made solutions for development
Duration
Build a React & Redux App w CircleCI CICD, AWS & Terraform

Build a React & Redux App w CircleCI CICD, AWS & Terraformudemy

Category: React.js, AWS, Redux, Terraform
Duration 25 hours 45 minutes 21 seconds