Advanced React For Enterprise React for senior engineers
What you’ll learn
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
Requirements
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
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!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 applicationsTypescript and its advantages for frontend engineersDesign systems and atomic design principlesNpm package creation, management and publishingContinuous integration and deployment for the frontend engineerUnit component testingVisual regression testingStorybook and component librariesComponent design patternsMono-repository architecture patternsAccessibility 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 conceptsYou want to improve your skills all round as a frontend engineerYou are interested in building design systemsYou want to learn the fundamentals tools you’ll need to become an open source software developerWe’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.
Overview
Section 1: Introduction to design systems
Lecture 1 What are design systems
Lecture 2 Atomic Design principles
Lecture 3 Example design systems
Lecture 4 Your role as an engineer in a design system
Section 2: CSS Architecture
Lecture 5 What we’ll build
Lecture 6 Css architecture checklist
Lecture 7 Setup folder and file structure
Lecture 8 Define system variables
Lecture 9 Define foundation colors
Lecture 10 Assignment – Define foundation colors
Lecture 11 Define foundation typography
Lecture 12 Assignment – Define foundation typography
Lecture 13 Define mixins
Lecture 14 Assignment – Define mixins
Lecture 15 Global root and css reset
Lecture 16 Add stylelint and prettier
Lecture 17 Setup husky and pre-commit hooks
Lecture 18 Compile scss to css
Lecture 19 Compile components to css
Section 3: Monorepositories
Lecture 20 Setup mono repository with yarn and lerna
Section 4: Implementation of React
Lecture 21 Add react package to mono repository
Lecture 22 Add rollup to compile react
Lecture 23 Setup a react playground
Lecture 24 Setup dev script for all packages
Lecture 25 Identify atoms, molecules and organisms
Lecture 26 Assignment – Identify atoms, molecules and organisms
Lecture 27 Develop the colour component
Lecture 28 Dynamically generate utility classes
Lecture 29 Assignment – create image atom
Lecture 30 Extract foundation to a separate package
Lecture 31 Spacing component
Lecture 32 The select molecule
Lecture 33 Styles for the select molecule
Lecture 34 Calculate the overlay position
Lecture 35 Style the select option
Lecture 36 Selected option state
Lecture 37 Animate select caret
Lecture 38 Render props for custom option
Section 5: Accessibility for the select component
Lecture 39 Expanded and popup aria attributes
Lecture 40 Control menu items with keyboard
Lecture 41 Accessible keyboard navigation
Section 6: Unit testing atomic components
Lecture 42 Setup babel and jest
Lecture 43 Assignment – Select test cases
Lecture 44 Assignment – Select test cases solution
Lecture 45 Tests for foundations
Section 7: Storybook with react
Lecture 46 Setup storybook
Lecture 47 Select component variants
Lecture 48 Addon knobs
Lecture 49 Addon accessibility
Lecture 50 Visual regression tests with chromatic
Section 8: Publish to npm
Lecture 51 Publish to npm with lerna
Lecture 52 Control published files
Lecture 53 Conventional commits
Lecture 54 Lint commits
Lecture 55 Generate changelogs with lerna
Section 9: Github actions / CI / CD
Lecture 56 Setup github actions workflow
Lecture 57 Fix build issues on CI
Lecture 58 Automate chromatic with github actions
Lecture 59 Deploy storybook to netlify
Beginner to intermediate React developers looking to become senior react developers
Course Information:
Udemy | English | 6h 3m | 2.09 GB
Created by: Kati Frantz
You Can See More Courses in the Developer >> Greetings from CourseDown.com