Advanced React For Enterprise- React for senior engineers

Advanced React For Enterprise: React for senior engineers, available at $74.99, has an average rating of 4.44, with 60 lectures, 1 quizzes, based on 2133 reviews, and has 14197 subscribers.

You will learn about 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 This course is ideal for individuals who are Beginner to intermediate React developers looking to become senior react developers It is particularly useful for Beginner to intermediate React developers looking to become senior react developers.

Enroll now: Advanced React For Enterprise: React for senior engineers

Summary

Title: Advanced React For Enterprise: React for senior engineers

Price: $74.99

Average Rating: 4.44

Number of Lectures: 60

Number of Quizzes: 1

Number of Published Lectures: 59

Number of Curriculum Items: 61

Number of Published Curriculum Objects: 59

Original Price: $27.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Beginner to intermediate React developers looking to become senior react developers

Target Audiences

Beginner to intermediate React developers looking to become senior react developers

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.

Course Curriculum

Chapter 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

Chapter 2: CSS Architecture

Lecture 1: What well build

Lecture 2: Css architecture checklist

Lecture 3: Setup folder and file structure

Lecture 4: Define system variables

Lecture 5: Define foundation colors

Lecture 6: Assignment – Define foundation colors

Lecture 7: Define foundation typography

Lecture 8: Assignment – Define foundation typography

Lecture 9: Define mixins

Lecture 10: Assignment – Define mixins

Lecture 11: Global root and css reset

Lecture 12: Add stylelint and prettier

Lecture 13: Setup husky and pre-commit hooks

Lecture 14: Compile scss to css

Lecture 15: Compile components to css

Chapter 3: Monorepositories

Lecture 1: Setup mono repository with yarn and lerna

Chapter 4: Implementation of React

Lecture 1: Add react package to mono repository

Lecture 2: Add rollup to compile react

Lecture 3: Setup a react playground

Lecture 4: Setup dev script for all packages

Lecture 5: Identify atoms, molecules and organisms

Lecture 6: Assignment – Identify atoms, molecules and organisms

Lecture 7: Develop the colour component

Lecture 8: Dynamically generate utility classes

Lecture 9: Assignment – create image atom

Lecture 10: Extract foundation to a separate package

Lecture 11: Spacing component

Lecture 12: The select molecule

Lecture 13: Styles for the select molecule

Lecture 14: Calculate the overlay position

Lecture 15: Style the select option

Lecture 16: Selected option state

Lecture 17: Animate select caret

Lecture 18: Render props for custom option

Chapter 5: Accessibility for the select component

Lecture 1: Expanded and popup aria attributes

Lecture 2: Control menu items with keyboard

Lecture 3: Accessible keyboard navigation

Chapter 6: Unit testing atomic components

Lecture 1: Setup babel and jest

Lecture 2: Assignment – Select test cases

Lecture 3: Assignment – Select test cases solution

Lecture 4: Tests for foundations

Chapter 7: Storybook with react

Lecture 1: Setup storybook

Lecture 2: Select component variants

Lecture 3: Addon knobs

Lecture 4: Addon accessibility

Lecture 5: Visual regression tests with chromatic

Chapter 8: Publish to npm

Lecture 1: Publish to npm with lerna

Lecture 2: Control published files

Lecture 3: Conventional commits

Lecture 4: Lint commits

Lecture 5: Generate changelogs with lerna

Chapter 9: Github actions / CI / CD

Lecture 1: Setup github actions workflow

Lecture 2: Fix build issues on CI

Lecture 3: Automate chromatic with github actions

Lecture 4: Deploy storybook to netlify

Instructors

Frantz Kati
Full stack software engineer

Rating Distribution

1 stars: 19 votes

2 stars: 38 votes

3 stars: 240 votes

4 stars: 791 votes

5 stars: 1045 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!