Advanced React For Enterprise: React for senior engineers
Course description
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:
CSS Architecture for react applications
Typescript and its advantages for frontend engineers
Design systems and atomic design principles
Npm package creation, management and publishing
Continuous integration and deployment for the frontend engineer
Unit component testing
Visual regression testing
Storybook and component libraries
Component design patterns
Mono-repository architecture patterns
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
All Course Lessons (59)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | What are design systems Demo | 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 |
Unlock unlimited learning
Get instant access to all 58 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
PHP Symfony 4 API Platform + React.js Full Stack Masterclass
React and NestJS: A Practical Guide with Docker
Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js
Discord Clone - Learn MERN Stack with WebRTC and SocketIO
