Advanced React: Design System, Design Patterns, Performance

Become Senior in React JS by Gaining in-depth expertise in Design Systems, Design Patterns, Performance, Typescript etc.

What you'll learn
Go from junior/intermediate frontend developer to senior developer
Learn to develop your React applications THE REACT WAY
Design and develop enterprise level design systems for high reusable and maintainable component library
Master the advanced component patterns including HOCs, Containers, Custom hooks and ReactJS functional programming
Know when to use patterns like controlled/uncontrolled components over other design patterns
Optimize the performance of your React applications by using memoization techniques
Become expert in locating wasted renders in your React projects and tackling them using React features
Understand and Use Typescript the React way like expert developers.
Use the React Hooks, Context API, and type props to build robust and reliable Typescript apps that scale

Requirements
Basic knowledge in React is required

Description
Learn to build React projects that stay up-to-date even before they're finished, and discover how to make React applications that are easy to grow and keep up with a system that really works.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.This course explores numerous advanced subjects to guide you in constructing React applications that are maintainable, scalable, and high-performing. It covers topics like scalable project architecture, effective techniques for managing asynchronous operations and API states, advanced component patterns, performance optimization, local and global state management patterns, and more.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.What you will learn:1 - Advanced Component and Layout PatternsAs 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.2 - Performance OptimizationExplore many essential techniques for improving and optimizing the performance of your applications to make them blazing-fast and your users amazed - Optimizing Re-renders, Long List Virtualization, Throttling, Denouncing, Code-Splitting & Lazy Loading, and more!3 - Advanced React Hooks and ConceptsThere 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.4 - Advanced State Management TechniquesMaster advanced state management techniques that will allow you to easily manage, share and reuse stateful data in your application. Explore patterns to manage state in a clean, readable and scalable fashion and take advantage of hooks, Immer and Context API.5 - Scalable ArchitectureLearn how to create scalable architecture for your React applications that is actually easy to manage and extend.6 - Efficiently handle API requests and manage API states at scalableLearn advanced patterns for managing async operations, API states, and request cancellation by implementing a flexible and scalable API layer and combining it with React-Query.7 - Design System and Encapsulating StylesManaging 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. 8 - Clean Code TipsWe 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. 9 - Advanced TypescriptLast 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!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!

Who this course is for:
React developers willing to go from junior/intermediate level to senior level of expertise,Front-end developers looking to unlock the full potential of React