Mô tả

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:


  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.


Come join me on this fun journey. I can't wait to share my wealth of knowledge and experience with you. Click the Enrol button now, and change your life forever.

Bạn sẽ học được gì

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

Yêu cầu

  • Basic knowledge of React is required
  • A little knowledge about testing is recommended but not required
  • Basic knowledge of Typescript is recommended but not required

Nội dung khoá học

9 sections

Introduction to design systems

4 lectures
What are design systems
06:34
Atomic Design principles
08:32
Example design systems
05:33
Your role as an engineer in a design system
05:02

CSS Architecture

15 lectures
What we'll build
04:05
Css architecture checklist
01:49
Setup folder and file structure
02:49
Define system variables
09:26
Define foundation colors
07:34
Assignment - Define foundation colors
01:53
Define foundation typography
02:00
Assignment - Define foundation typography
01:10
Define mixins
03:42
Assignment - Define mixins
03:12
Global root and css reset
06:31
Add stylelint and prettier
07:15
Setup husky and pre-commit hooks
03:56
Compile scss to css
06:48
Compile components to css
09:21

Monorepositories

1 lectures
Setup mono repository with yarn and lerna
10:07

Implementation of React

18 lectures
Add react package to mono repository
04:01
Add rollup to compile react
04:42
Setup a react playground
10:30
Setup dev script for all packages
03:52
Identify atoms, molecules and organisms
03:31
Assignment - Identify atoms, molecules and organisms
00:51
Develop the colour component
05:00
Dynamically generate utility classes
08:46
Assignment - create image atom
01:05
Extract foundation to a separate package
07:01
Spacing component
15:22
The select molecule
11:09
Styles for the select molecule
11:51
Calculate the overlay position
07:10
Style the select option
03:31
Selected option state
08:34
Animate select caret
02:17
Render props for custom option
07:40

Accessibility for the select component

3 lectures
Expanded and popup aria attributes
03:24
Control menu items with keyboard
16:52
Accessible keyboard navigation
09:52

Unit testing atomic components

4 lectures
Setup babel and jest
07:23
Assignment - Select test cases
00:59
Assignment - Select test cases solution
09:21
Tests for foundations
05:05

Storybook with react

5 lectures
Setup storybook
07:52
Select component variants
04:05
Addon knobs
09:06
Addon accessibility
07:39
Visual regression tests with chromatic
05:56

Publish to npm

5 lectures
Publish to npm with lerna
07:30
Control published files
06:56
Conventional commits
04:43
Lint commits
03:05
Generate changelogs with lerna
06:10

Github actions / CI / CD

4 lectures
Setup github actions workflow
06:35
Fix build issues on CI
07:14
Automate chromatic with github actions
04:43
Deploy storybook to netlify
04:24

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.