Advanced React For Enterprise: React for senior engineers from Udemy

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 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.

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.

What's inside

Learning objectives

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

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

Syllabus

Introduction to design systems

What are design systems

Atomic Design principles

Example design systems

Your role as an engineer in a design system

CSS Architecture

What we'll build

Css architecture checklist

Setup folder and file structure

Define system variables

Define foundation colors

Assignment - Define foundation colors

Define foundation typography

Assignment - Define foundation typography

Define mixins

Assignment - Define mixins

Global root and css reset

Add stylelint and prettier

Setup husky and pre-commit hooks

Compile scss to css

Compile components to css

Monorepositories

Setup mono repository with yarn and lerna

Implementation of React

Add react package to mono repository

Add rollup to compile react

Setup a react playground

Setup dev script for all packages

Identify atoms, molecules and organisms

Assignment - Identify atoms, molecules and organisms

Develop the colour component

Dynamically generate utility classes

Assignment - create image atom

Extract foundation to a separate package

Spacing component

The select molecule

Styles for the select molecule

Calculate the overlay position

Style the select option

Selected option state

Animate select caret

Render props for custom option

Accessibility for the select component

Expanded and popup aria attributes

Control menu items with keyboard

Accessible keyboard navigation

Unit testing atomic components

Setup babel and jest

Assignment - Select test cases

Assignment - Select test cases solution

Tests for foundations

Storybook with react

Setup storybook

Select component variants

Addon knobs

Addon accessibility

Visual regression tests with chromatic

Publish to npm

Publish to npm with lerna

Control published files

Conventional commits

Lint commits

Generate changelogs with lerna

Github actions / CI / CD

Setup github actions workflow

Fix build issues on CI

Automate chromatic with github actions

Deploy storybook to netlify

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Strengthens an existing foundation for intermediate React engineers

Provides a comprehensive study of advanced React engineering topics

Taught by Frantz Kati, an experienced React engineer

Requires knowledge of React, indicating it's not suitable for beginners

This course may have additional costs associated with it, such as subscriptions or exam fees

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Advanced React For Enterprise: React for senior engineers with these activities:

CSS Fundamentals Review

Show steps

Re-familiarize yourself with the fundamentals of CSS to ensure a strong foundation for building robust user interfaces.

Browse courses on CSS

Show steps

Review CSS selectors, properties, and values.
Practice writing basic CSS rules to style HTML elements.
Experiment with CSS layout techniques, such as floats and flexbox.
Create a simple web page using only HTML and CSS.

React Unit Testing Practice

Show steps

Sharpen your unit testing skills by solving practice problems and exercises, ensuring that your React applications are robust and reliable.

Browse courses on Unit Testing

Show steps

Set up a unit testing environment for React using Jest.
Practice writing unit tests for React components.
Solve unit testing challenges and problems.

React Hooks Tutorial

Show steps

Enhance your understanding of React hooks by following guided tutorials, solidifying your knowledge of state management and functional component development.

Browse courses on React Hooks

Show steps

Find a comprehensive tutorial on React hooks.
Follow the tutorial step-by-step, practicing the concepts as you go.
Apply the learned techniques to your own React projects.

Three other activities

Expand to see all activities and additional details

Show all six activities

React Study Group

Show steps

Join a study group to connect with fellow learners, discuss course concepts, and collectively deepen your understanding of React.

Show steps

Find or create a React study group with peers.
Set regular meeting times and establish a study schedule.
Discuss course materials, share insights, and work through problems together.

Blog Post: React Component Design Patterns

Show steps

Write a comprehensive blog post on React component design patterns to synthesize your knowledge, showcase your expertise, and contribute to the community.

Show steps

Research and gather information on different React component design patterns.
Organize and structure the content of your blog post effectively.
Write clear and concise explanations of each design pattern.
Provide examples and code snippets for each pattern.
Publish your blog post on a reputable platform.

Contribute to React Open Source Project

Show steps

Engage with the React community by contributing to an open-source project, expanding your knowledge and demonstrating your commitment to the ecosystem.

Browse courses on Software Development

Show steps

Identify a React open-source project that aligns with your interests.
Familiarize yourself with the project's codebase and contribution guidelines.
Identify a bug or feature to work on and create a pull request.
Collaborate with the project maintainers to refine and merge your contribution.

Career center

Learners who complete Advanced React For Enterprise: React for senior engineers will develop knowledge and skills that may be useful to these careers:

React Developer

React developers are responsible for developing and maintaining user interfaces (UIs) for web applications using the React framework. They use their knowledge of React, as well as other web technologies, to create UIs that are both visually appealing and functional. This course can help you develop the skills you need to become a successful React developer by providing you with a deep understanding of React concepts, such as design patterns, state management, and performance optimization. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for React Developer

Senior Software Engineer

Senior software engineers are responsible for mentoring and leading junior software engineers. They use their knowledge of software development, architecture, and patterns to create software that is both efficient and scalable. This course can help you develop the skills you need to become a successful senior software engineer by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Senior Software Engineer

Principal Software Engineer

Principal software engineers are responsible for leading and mentoring teams of senior software engineers. They use their knowledge of software development, architecture, and patterns to create software that is both efficient and scalable. This course can help you develop the skills you need to become a successful principal software engineer by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Principal Software Engineer

Full-Stack Developer

Full-stack developers are responsible for developing and maintaining both the front-end and back-end of websites and applications. They use their knowledge of web technologies, such as HTML, CSS, JavaScript, and server-side programming languages, to create websites and applications that are both visually appealing and functional. This course can help you develop the skills you need to become a successful full-stack developer by providing you with a strong foundation in CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Full-Stack Developer

Open Source Software Developer

Open source software developers are responsible for developing and maintaining open source software. They use their knowledge of software development, collaboration, and community building to create software that is both useful and accessible. This course can help you develop the skills you need to become a successful open source software developer by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Open Source Software Developer

Web Developer

Web developers are responsible for developing and maintaining websites and web applications. They use their knowledge of web technologies, such as HTML, CSS, and JavaScript, to create websites and applications that are both visually appealing and functional. This course can help you develop the skills you need to become a successful web developer by providing you with a strong foundation in CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-end developers are primarily responsible for developing and maintaining user interfaces (UIs). They use their knowledge of web technologies, such as HTML, CSS, and JavaScript, to create websites and applications that are both visually appealing and functional. This course can help you develop the skills you need to become a successful front-end developer by providing you with strong grounding in CSS architecture, design patterns, and Typescript. You'll also learn how to create and maintain npm packages, which is an essential skill for any front-end developer who wants to contribute to open source software projects.

See salaries and explore the career path for Front-End Developer

Software Architect

Software architects are responsible for designing and overseeing the implementation of software systems. They use their knowledge of software development, architecture, and patterns to create software systems that are both efficient and scalable. This course can help you develop the skills you need to become a successful software architect by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Software Architect

User Interface (UI) Designer

User interface (UI) designers are responsible for designing the look and feel of user interfaces (UIs) for websites and applications. They use their knowledge of design principles and user experience (UX) to create UIs that are both visually appealing and easy to use. This course can help you develop the skills you need to become a successful UI designer by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for User Interface (UI) Designer

UX Designer

UX designers are responsible for designing the user experience (UX) of websites and applications. They use their knowledge of user research, psychology, and design principles to create UIs that are both visually appealing and easy to use. This course can help you develop the skills you need to become a successful UX designer by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for UX Designer

Software Engineer

Software engineers are responsible for designing, developing, and maintaining software applications. They use their knowledge of programming languages, algorithms, and data structures to create software that is both efficient and reliable. This course can help you develop the skills you need to become a successful software engineer by providing you with a strong foundation in CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Software Engineer

Technical Lead

Technical leads are responsible for leading and mentoring teams of software engineers. They use their knowledge of software development, architecture, and management to ensure that projects are completed successfully. This course can help you develop the skills you need to become a successful technical lead by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Technical Lead

Engineering Manager

Engineering managers are responsible for managing teams of software engineers. They use their knowledge of software development, management, and people skills to ensure that teams are productive and successful. This course can help you develop the skills you need to become a successful engineering manager by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Engineering Manager

CTO

CTOs are responsible for leading and overseeing the technology strategy of an organization. They use their knowledge of software development, architecture, and business to make decisions that impact the organization's future. This course can help you develop the skills you need to become a successful CTO by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for CTO

Product Manager

Product managers are responsible for managing the development and launch of new products or features. They work closely with engineers, designers, and marketers to ensure that products meet the needs of users. This course can help you develop the skills you need to become a successful product manager by providing you with a deep understanding of CSS architecture, design patterns, and Typescript. You'll also learn how to use React to build complex and scalable web applications.

See salaries and explore the career path for Product Manager

Advanced React For Enterprise

React for senior engineers

Here's a deal for you

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses