[Master Class] Deep Dive Into React 18 + Typescript

Completely understand how React 18 works with Typescript

What you'll learn

Learn Javascript Skills necessary to learn ReactJS

Fully Typescript codebase with ReactJS

Learn to think the React Way

Understand React Fiber or Fiber Architecture

Reflow & Repaint - How React uses this efficiently?

Optimize your React Components and Profile them

Render and Commit Phase in React

High and Low Priority Updates

Suspending Components

Requirements

Basic understanding of Javascript/HTML/CSS

Burning passion to understand ReactJS completely

That's it. I'll see you in the course ;)

Description

This course is built for new and old ReactJS developers so we can all have complete understanding how React works. I have done some reasearch while creating this course and even check react code from github just to make sure I understand it.Basically this is just me teaching how to use ReactJS as well as providing a deep understanding how it works in the background. Knowing how it works in the background will help developers to code better using ReactJS because they know how it works completely.Other course will teach you how to use ReactJS, but this course will give you a deeper understanding of each concepts and features that React offers. For example Do you know what Reflow and Repaint is? What is React Fiber? Why do we have useEffect, useLayoutEffect and useTransitionEffect (That's a lot of effects! )? Are those synchronous or asynchronous?How often React paints the UI in the DOM when using those effects?What is high and low priority updates and how does React does that? What trick ReactJS does to do that? How React creates the VirtualDOM efficiently and use the minimal memory as much as possible?How React batch the updates? What if you have multiple state updates in a lot of components? How many times React will render?If you already know those things I have mentioned, then you probably don't need this course. If you don't, then join me learn those stuff! Let's have some fun!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Your Instructor

Lecture 3 Why React?

Lecture 4 Typescript Overview

Section 2: Refresh your Javascript Skills

Lecture 5 Introduction

Lecture 6 Lecture for this course

Lecture 7 Var, Let and Const

Lecture 8 Var, Let and Const - Hands On

Lecture 9 Logical OR and AND

Lecture 10 Logical OR and AND - Hands On

Lecture 11 Primitive Values vs Reference Type

Lecture 12 Primitive Values vs Reference Type - Hands On

Lecture 13 Shallow and Deep Copy

Lecture 14 Shallow and Deep Copy - Hands On

Lecture 15 Spread Operator, Rest Parameter, Destructuring

Lecture 16 Spread Operator, Rest Parameter, Destructuring - Hands On

Lecture 17 Class

Lecture 18 Class - Hands On

Lecture 19 This Object + Arrow Function

Lecture 20 This Object + Arrow Function - Hands On

Lecture 21 Promises and Async+Await

Lecture 22 Promises and Async+Await - Hands On

Lecture 23 Export & Import

Lecture 24 Summary

Section 3: Play with React Components!

Lecture 25 Introduction

Lecture 26 Setup Environment

Lecture 27 You can use Vite instead of craete-react-app

Lecture 28 Component & Props

Lecture 29 Style & Class

Lecture 30 List & Keys

Lecture 31 Conditional Rendering

Lecture 32 React Dev Tools

Lecture 33 Lifecycle of a Component

Lecture 34 (Solution) Assignment: Create a Simple UI

Lecture 35 Before we jump to Hooks!

Section 4: Data Hooks

Lecture 36 Introduction

Lecture 37 useState Hooks

Lecture 38 useState with Objects & StrictMode

Lecture 39 Controlled & Uncontrolled Components

Lecture 40 useReducer Hooks

Lecture 41 useReducer - Advance

Lecture 42 useReducer vs useState

Lecture 43 Context & useContext

Lecture 44 useReducer & useContext

Lecture 45 useSyncExternalStore

Lecture 46 (Solution) Assignment: My Book App

Lecture 47 Batching Updates

Section 5: Refs

Lecture 48 Introduction

Lecture 49 useRef Hook!

Lecture 50 Manipulating DOM with Refs

Lecture 51 callback Refs

Lecture 52 Forwarding Ref (Add Ref to your component)

Lecture 53 useImperativeHandle Hook!

Lecture 54 (Solution) Survey Form App

Lecture 55 Display Name in React Dev Tools

Section 6: useEffect

Lecture 56 Introduction

Lecture 57 useEffect

Lecture 58 useEffect vs Class Components

Lecture 59 useLayoutEffect

Lecture 60 Reflow and Repaint

Lecture 61 Caution!

Lecture 62 (Solution) Assignment - Users App

Section 7: Performance & Optimizations

Lecture 63 Introduction

Lecture 64 memo

Lecture 65 useMemo

Lecture 66 useCallback

Lecture 67 Transitions

Lecture 68 useDeferredValue

Lecture 69 Render & Commit Phase

Lecture 70 React Fiber

Lecture 71 Lazy & Suspense

Lecture 72 Understanding Suspense

Lecture 73 Profiler (React Dev Tools)

Lecture 74 Profiler Component

Section 8: More Hooks

Lecture 75 Introduction

Lecture 76 useId

Lecture 77 Create a Custom Hook!

Lecture 78 useDebugValue

Lecture 79 (Solution) Assignment - Create Custom Hook

Section 9: Thank You and Congratulations!

Lecture 80 Congratulations!

Anyone who wants to learn ReactJS and understand it completely