Advanced React: Design System, Design Patterns, Performance

Hi, welcome to this course, on Advanced React. If you are exploring this course, chances are high that you’re a React developer looking to level up your skills. In this case, You are in the right place!

The promise of this course is simple: By attending this course you will become the React wizard at your company!

In this course, we touch on unique topics in several modules including, design systems, design patterns, performance optimization, and advanced Typescript with React.

If you're curious about the significance of these topics, the explanation is straightforward. Seasoned developers effectively oversee enterprise-level front-end projects by implementing the best practices associated with these key areas.

If you are a junior or intermediate developer then you will need to master these topics to consider yourself as a senior developer and become ready to apply for senior positions.

All the materials of this course are based on years of experience working on several React projects and every single concept comes with concrete examples.

All the topics are presented with practical real-world examples so you can apply everything in your day-to-day projects right after.

At first we discuss design patterns.

As a senior software developer, I have identified the topics covered in this module as crucial elements that I seek when interviewing React developer candidates. These patterns can help bridge the gap between being a junior or intermediate developer and becoming a senior React practitioner.

By finishing this part, you'll have the opportunity to explore React's most essential design patterns.

There is also a section about some advanced concepts and hooks and their use-cases as they can help you tackle some challenges in the related scenarios.

Then you will learn all about design systems. Managing large-scale projects is not just about coding components. Developing endless components without losing track requires solid design systems to guarantee the reusability and maintainability of every element of the project. We will walk you through the concepts and theory, then we develop some basic components in Figma and finally, we build an extensible foundation of design in ReactJS. So you build a mindset of how to design and develop a clean and reusable design system. The greater focus of this module will be on encapsulating styles to guarantee more reusability across your component library.

Then we get to the optimization part. A very serious concept in React. A poorly optimized application with unwanted renders can sink the whole project. But the good news is that optimizing React apps can be very easy and sweet. In this module, we will be working on a demo project that suffers from performance issues such as wasted renders and expensive operations. At the end of this module, You will know how to troubleshoot and fix most performance issues in React applications.

We also teach you some tips about clean code in React. In this section we explore concepts such As props along with optimizing some performance issues with the Context API.

Last but not least, we explore Typescript the React way! In this module you will learn how to effectively use TypeScript with React components, ensuring that you utilize the appropriate properties. Additionally, discover how to employ the Context API, React Hooks, and type props in order to develop more resilient and type-safe applications on a larger scale!

** Bonus: React Router V6 Complete Course**

We added a 5-starts bonus course about React Router version 6. With this module you will learn all the features of React Router by building a full-stack book-shop that demonstrate the best practices of implementing React Router.

So long story short, if you wish to tackle all these interesting topics and bring your skills to the next level, then join me in this course!

This course will be under continues progress and more modules will be added based on the students feedbacks!