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!
Advanced React For Enterprise: React for senior engineers
6h 4m 5s
English
Paid
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.
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 59 lessons
0:00
/ #1: What are design systems
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 subscriptionRelated courses
-
Updated 2y agoReact with TypeScript
By: UI.dev (Tyler McGinnis)We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as what you'll.2h -
Updated 2y agoFULL Authentication WITH REACT JS NEXT JS TYPESCRIPT
By: UdemyThis is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects6h 52m -
ClassicThe interactive way to master modern React - react.gg (FULL COURSE)
By: UI.dev (Tyler McGinnis)OPTIMIZED FOR AHA! We’re obsessed with helping you reach your aha! moments. Our text sections help you master the “why” behind React concepts and include fun, i7h 53m5/5
Frequently asked questions
What is Advanced React For Enterprise: React for senior engineers about?
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…
Who teaches this course?
It is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 59 lessons with a total runtime of 6 hours 4 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/advanced-react-for-enterprise-react-for-senior-engineers. The page hosts every lesson with the integrated video player; no download is required.