Advanced React 2023 (Performance & Best Practices)

2023 Advanced Reactjs - Theory, React Patterns, Industry Best Practices, Performance, Render Issues, Hooks, Core

3.55 (214 reviews)
Udemy
platform
English
language
Programming Languages
category
Eyas Mattar
instructor
Advanced React 2023 (Performance & Best Practices)
1,662
students
9 hours
content
Mar 2023
last update
$49.99
regular price

What you will learn

High Quality Web Applications

Best Practices used by Advanced Programmers

React Redux Saga Pattern

Bundle Splitting & Lazy Loading

Software Engineering Principles

Webpack & Babel

Working with Themes

Focusing on Application Performance for Better UX

Rendering Performance

React Core Concepts

Why take this course?

Are you an intermediate or advanced web developer looking to take your React skills to the next level?

Look no further than our comprehensive course on Advanced React & Web Development.

In this course, you will learn advanced techniques for building robust, scalable web applications using React, Redux, and more. We'll dive deep into the core principles of React and explore how to optimize performance, manage complex states, and create reusable components that can be easily shared across projects.

But that's just the beginning. We'll also cover a wide range of topics that are essential for any advanced web developer, including:

  • Master the best PRACTICES used in the industry

  • Server-side rendering and performance optimization

  • API integration with React

  • Authentication and authorization using JSON Web Tokens (JWT)

  • Testing, debugging, and performance profiling

  • Master React CORE concepts

Throughout the course, you'll have access to hands-on exercises and real-world projects that will challenge you and reinforce what you've learned. You'll also have access to a supportive community of fellow learners and instructors who are passionate about helping you succeed.

By the end of this course, you'll have a deep understanding of advanced React and web development concepts, as well as the skills and confidence to build robust, scalable applications that meet the needs of even the most demanding users. Enroll today and take your React skills to the next level!

This course is UP-TO-DATE with the latest React version 18+

This course is UP-TO-DATE with the latest ES2020 version


This IS NOT FOR YOU if you just want to build some nice and good-looking application.

If you passed this level of building nice and good-looking applications and want to focus on best practices and performance so this course is for you.

This course contains a lot of theoretical materials and diagrams for deeper understanding.


At the end of the course you will be able to:

1. Write high quality React components

2. Master React CORE concepts

3. Build applications with high PERFORMANCE

4. Write React applications with Patterns

5. Know the What? Why? & How?

6. Master the best PRACTICES used in the industry

7. Build Powerful, Scalable, Fast & Maintainable Web Applications


Who is this course for:

1. React Developers who want to sharpen their skills

2. React Developers who want to become advanced/expert developers

3. Developers who seek how to write high-quality code

4.  Developers who seek to acquire best practices

5.  Developers who want to learn about application performance

6. Developers who want to learn not only the technical stuff but also the important theory behind

7. React developers who want to learn about lazy loading

7. React developers who want to learn about software principles


Prerequisites:

1. Basic React knowledge, like components, state, props, render MUST

2. HTML, JSX, JavaScript MUST

3. Redux-Saga Optional


This course includes:

1. Redux overview

2. Redux-saga overview

3. Software principles in web application

4. Bundle Splitting

5. Lazy Loading

6. Anti-Patterns & Bad Practices to avoid

7. Render Performance

8. Why rendered

9. Avoid Reconciliation

10. React Core Concepts

11. Routing

12. Styling with Themes

13. Material-UI

14. ES2020

15. Design Pattern

16. Files Generators

17. High Quality boilerplate

18. Data Flow Diagrams for deep understanding

19. DevTools


Content

Introduction

Welcome
Prerequisites
How To Make The Maximum Of This Course

Setting Our Project

Section Goal
Introduction
Cloninng Our Project
Folder Structure
Generators

Redux

Redux Overview
Redux Store
Redux Actions
Redux Reducers
How Redux Works

Redux Saga

Section Goal
Redux Middleware
Saga Effects

React Patterns

High Order Component
Container Component
Examples Code

React Hooks

Preparation (DO NOT SKIP)
Preserving State
Updating State
Using Refs
Component Mount
Observing Props Changes
Component Cleanup
Creating YOUR own Hook (Part 1)
Creating YOUR own Hook (Part 2)

Design Pattern

Section Goal
Important Note
What is High Quality Application
Component Container Pattern
Authentication Data Flow
Authentication (Redux & Saga)
Network Service
Server Communication
Storing Credentials
Removing Credentials
Final Code (updated project files)

Software Principles

Section Goal
Modularity in Modern Applications
DRY Principle
SOLID Principles
Reusability in Modern Applications

Modern Styling

Section Goal
Consistency in Modern Applications
Setting Up Styling
Adding Theme
Power Of Themes

Routing

Section Goal
Application Architecture
React Router Overview
Navigation & Routing
Securing Routes: Public & Private
Navigation Bar
Vacation Details Page
URL Params 1
URL Params 2

React Core

Reconciliation
Commit & Render
Mount vs Update

React Performance

Section Goal
Why Performance?
Debugging: DevTools 1
Debugging: DevTools 2
Render Profiling
Selectors
Memoizing Computation
Memoizing Selectors
Overloading DOM and Virtual DOM
React Memo
Avoid Reconciliation

Render Performance

Bad Practice 1 (PART 1)
Bad Practice 1 (PART 2)
Bad Practice 2 (PART 1)
Bad Practice 2 (PART 2)
Bad Practice 3

Webpack Overview

Section Goal
What is Webpack
How is Webpack
Exploring the Entry
Exploring the Output
Exploring the Loaders

Lazy Loading

Section Goal
Lazy Loading
Production Build
Loading Dynamically
Lazy & Suspense

Bundle Splitting

Dependency Reference Common Issue
Extending Our Container
Finally Bundle Splitting

Screenshots

Advanced React 2023 (Performance & Best Practices) - Screenshot_01Advanced React 2023 (Performance & Best Practices) - Screenshot_02Advanced React 2023 (Performance & Best Practices) - Screenshot_03Advanced React 2023 (Performance & Best Practices) - Screenshot_04

Reviews

Chris
September 28, 2023
Was not as advanced as was expected. Many of the concepts covered in the detail provided are considered basic/needed by most applications of any scale larger than a toy application. Has some good ideas, but the majority boils down to presenting an idea, and then improving on it by saying the previous idea was "bad because it's bad". The latter sections on Render Performance and Lazy Loading were probably the most useful. Several issues with course: - initially presented by AI and then switches to another person after 2-3 videos - course is clearly a rehash of another course (which I guess would be fine), but the provided repo does not match what is presented in videos - claims to be up to date with React 18+, but had to fix several issues to do with the React version being out of date, such as having to set openssl-legacy-provider in NODE_OPTIONS, not to mention the use of depreciated APIs - claims to explain authentication with JWT, however there is only a passing mention of a "token" no mention of JWT or how it works.
LL
June 22, 2023
It took a few work arounds to start both the BE server and the FE App. Perhaps this was intended :-)
Todor
March 29, 2023
The most awful course ever: that guy is dense and can't express himself in bloody english. Even worse - some of his examples are quite irrelevant to the topics. I'm absolutely disappointed!
Ryan
February 4, 2023
not kept up to date. was looking forward to this and this rating is in no way reflective of the instructor's knowledge, just an outdated course with minimal support
Renate
June 26, 2022
Would expect more good/bad practise and more alternative solution. For example, on large data sets only on suggestion to use react-window library, no other options evaluated. In rendering bad practise, initialy it is said , that there are 2 options, how solve, however only 1 options is presented and second is not covered at all. Similar with selector memorizing. Lectures 82, 83 are duplicates by content. Some of SOLID principles are skiped at all - for exmaple not clear how to apply Liskov susbstitution pricniple to javascript fucitional components. Summury: good overview, but requires additional googling on certain topic, to get deeper understanding of topic.
Matheus
July 5, 2021
didnt like it all that much... think you could have used more of the default react hooks like the useCallback, useMemo, and useContext, instead o relying in the redux and other redux plugins. also the 3 final chapters are weird, some videos end obruptly, some are duplicated, and some out of order... very bad got only a few usefull tricks about performance, thought it could have been better.
Ankesh
June 23, 2021
It is really an amazing course with great explanation and practical example on how to make an efficient React application.
Pachara
April 18, 2021
A shit course from senior developer's perspective. He does not do the development along with flow. Anyone can find out better material on youtube.
Valentin
March 20, 2021
Everything is working smoothly, however author narrates his actions instead of commenting on them. Considering this video is for already experienced audience, I would love to hear creators opinion on tools that he is using and why he prefers them rather than the fact that he is using them.
Marco
March 1, 2021
So far the knowledge share does not look so advanced or well explained. For now just reading documentations from redux, saga. Lastly uses examples with still class components. Overkilling for what he is doing. Not advanced as I expected.
Penelope
February 21, 2021
I am a developer turned architect, turned manager and I found this course very easy to consume to get a broad overview and quick grasp of how to read the code, profile, debug and an overview of what is important from a performance perspective.
Andrei
January 18, 2021
Amazing course ! Not only he approached all major topics used today with React (Redux, Redux Saga) but also engaged into performance which is crucial in today's complex environments. The developed application was more than enough to understand the basic concepts and the fact that he went further with advanced concepts was perfect. For me, the way he talked made take my time and understand the presentation better.
Andre
January 2, 2021
Till this point I've managed everything using hooks and context API. It was sometimes a bit difficult to follow, because I don't have any knowledge about Redux
Padraic
November 20, 2020
Overall, the course is worth it. Its recommended, if you are not familiar with Performance enhancement of a react app. This course gives a very good introduction to the topic - demonstrating in code the best practices. The file structure and the quality of the code is really impressive to see, I have learned form the file structure alone without the course content. I thought that some of the content was a too simple for an advanced course. At times, it goes from a video explaining a very basic concept, (that potentially should not be in an advanced course as it is basic knowledge), and then into a much more advanced concept, without guiding the pupil through it slowly. Some parts of the code in the course, that are fundamental to the app are not discussed in great detail. It would be nice to have a video on immerjs which is used in redux.
Amit
June 8, 2020
not at all.. its tooo slow with pauses and didn't learn any advance things yet.. somehow pushing myself to watch next video and hope will get at-least something good to learn.

Charts

Price

Advanced React 2023 (Performance & Best Practices) - Price chart

Rating

Advanced React 2023 (Performance & Best Practices) - Ratings chart

Enrollment distribution

Advanced React 2023 (Performance & Best Practices) - Distribution chart

Related Topics

React
Redux Framework
2815357
udemy ID
2/15/2020
course created date
6/8/2020
course indexed date
Bot
course submited by