[Master Class] Deep Dive into React 18 + Typescript

Focused View

Rysher Magbanua

9:17:32

419 View

1 - Introduction

1 - Introduction.mp4

03:18

2 - Your Instructor.mp4

03:00

3 - Why React.mp4

06:20

4 - Typescript Overview.mp4

01:16

2 - Refresh your Javascript Skills

5 - Introduction.mp4

00:51

6 - 2.Javascript-Essentials-for-ReactJS.pdf

6 - Lecture for this course.html

7 - Var Let and Const.mp4

03:51

8 - Var Let and Const Hands On.mp4

06:08

8 - var-let-const.zip

9 - Logical OR and AND.mp4

01:14

10 - Logical OR and AND Hands On.mp4

03:41

10 - logicalorandand.zip

11 - Primitive Values vs Reference Type.mp4

01:37

12 - Primitive Values vs Reference Type Hands On.mp4

02:12

12 - primitivevsreferencetype.zip

13 - Shallow and Deep Copy.mp4

04:45

14 - Shallow and Deep Copy Hands On.mp4

05:59

14 - shallow-deepcopy-array.zip

14 - shallow-deepcopy-object.zip

15 - Spread Operator Rest Parameter Destructuring.mp4

04:54

16 - Spread Operator Rest Parameter Destructuring Hands On.mp4

08:46

16 - restparameters-spreadoperator-destructuring.zip

17 - Class.mp4

03:02

18 - Class Hands On.mp4

06:00

18 - class.zip

19 - This Object Arrow Function.mp4

04:59

20 - This Object Arrow Function Hands On.mp4

03:49

20 - this-arrowfunction.zip

21 - Promises and AsyncAwait.mp4

12:16

22 - Promises and AsyncAwait Hands On.mp4

13:10

22 - async.zip

22 - promises.zip

23 - Export Import.mp4

03:55

24 - Summary.mp4

03:52

3 - Play with React Components

25 - Introduction.mp4

00:47

26 - 1.Setup-Environment.zip

26 - Setup Environment.mp4

08:09

27 - You can use Vite instead of craetereactapp.html

28 - Component Props.mp4

15:25

28 - Component-Props.zip

29 - Style Class.mp4

05:58

29 - Style-and-Class.zip

30 - List Keys.mp4

08:48

30 - List-Keys.zip

31 - Conditional Rendering.mp4

04:20

31 - Conditional-Rendering.zip

32 - React Dev Tools.mp4

05:47

32 - React-Dev-Tools.zip

33 - Lifecycle of a Component.mp4

05:18

33 - Lifecycle-Of-A-Component.zip

34 - Solution Assignment Create a Simple UI.mp4

06:48

34 - simple-ui-assignment.zip

35 - Before we jump to Hooks.mp4

02:25

35 - hooks-are-coming.zip

4 - Data Hooks

36 - Introduction.mp4

01:04

37 - useState Hooks.mp4

13:45

37 - useState-Hook.zip

38 - useState with Objects StrictMode.mp4

06:36

38 - useState-with-Object-Strict-Mode.zip

39 - Controlled Uncontrolled Components.mp4

08:50

39 - controlled-and-uncontrolled.zip

40 - useReducer Hooks.mp4

10:49

40 - useReducer-Hook.zip

41 - useReducer Advance.mp4

15:53

41 - useReducer-advance.zip

42 - useReducer vs useState.mp4

12:13

42 - useReducer-vs-useState.zip

43 - Context useContext.mp4

13:49

43 - context.zip

44 - context-reducer.zip

44 - useReducer useContext.mp4

07:17

45 - useSyncExternalStore.mp4

13:02

45 - useSyncExternalStore.zip

46 - Solution Assignment My Book App.mp4

10:43

46 - -Solution-Assignment-My-Book-App.zip

47 - Batching Updates.mp4

06:12

47 - batching-updates.zip

5 - Refs

48 - Introduction.mp4

00:40

48 - refs-introduction.zip

49 - useRef.zip

49 - useRef Hook.mp4

09:43

50 - Manipulating DOM with Refs.mp4

10:13

50 - manipulating-dom-useRef.zip

51 - callback Refs.mp4

05:22

51 - callback-refs.zip

52 - Forwarding Ref Add Ref to your component.mp4

12:33

52 - forwarding-refs.zip

53 - useImperativeHandle.zip

53 - useImperativeHandle Hook.mp4

15:55

54 - Solution Survey Form App.mp4

19:06

54 - assignment-survey-form.zip

55 - Display Name in React Dev Tools.html

6 - useEffect

56 - Introduction.mp4

01:01

56 - introduction-effects.zip

57 - fakeApi.zip

57 - useEffect.mp4

14:10

57 - useEffects.zip

58 - useEffect vs Class Components.html

59 - useLayoutEffect.mp4

06:25

59 - useLayoutEffect.zip

60 - How browsers populate the page.txt

60 - Reflow and Repaint.mp4

08:00

60 - Reflow-and-Repaint.pdf

61 - Caution.mp4

02:08

61 - caution.zip

62 - Solution Assignment Users App.mp4

10:17

62 - solution-users-app.zip

7 - Performance Optimizations

1 - Performance Optimizations.html

63 - Introduction.mp4

00:52

63 - Introduction.zip

64 - memo.mp4

08:44

64 - memo.zip

65 - useMemo.mp4

11:45

65 - useMemo.zip

66 - useCallback.mp4

07:28

66 - useCallback.zip

67 - Transitions.mp4

14:01

67 - transitions.zip

68 - useDeferredValue.mp4

12:26

68 - useDeferredValue.zip

69 - Render Commit Phase.mp4

06:41

69 - Render-Commit-Phase.pdf

70 - React Fiber.mp4

20:44

70 - React-Fiber.pdf

71 - Lazy Suspense.mp4

08:42

71 - lazy-suspense.zip

72 - Understanding Suspense.mp4

08:39

72 - fakeApi.zip

72 - suspense.zip

73 - Profiler React Dev Tools.mp4

16:19

73 - React Dev Tools Chrome Extension.txt

73 - profiler-dev-tools.zip

74 - Profiler Component.mp4

11:47

74 - analytics.zip

74 - profiler-component.zip

8 - More Hooks

75 - Introduction.mp4

00:18

76 - useId.mp4

06:18

76 - useId.zip

77 - Create a Custom Hook.mp4

06:53

77 - custom-hook.zip

78 - useDebugValue.mp4

04:47

78 - useDebugValue.zip

79 - Solution Assignment Create Custom Hook.mp4

02:42

79 - useHovering.zip

9 - Thank You and Congratulations

80 - Congratulations.html

Description

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
Complete Understanding how React renders your components and paints it in the DOM
Understand React Fiber or Fiber Architecture
Understanding ReactJS VirtualDOM
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

Who is this for?

Anyone who wants to learn ReactJS and understand it completely

What You Need to Know?

Basic understanding of Javascript/HTML/CSS

Burning passion to understand ReactJS completely (not just the surface)

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

More details

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?
How does React schedule updates?
What is high and low priority updates?
How React creates the VirtualDOM efficiently and use the minimal memory as much as possible?
How many VirtualDOM do we have in ReactJS?
How React batch the updates?
What if you have multiple state updates in a lot of components? How many times React will render your components?
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!
Who this course is for:
Anyone who wants to learn ReactJS and understand it completely

User Reviews

Rating

average 0

Total votes0

Focused display

I'm a professional gamer before and have been competing national and international tournaments. I have played a lot of games but Dragon Nest is the game I perform most as my team have won a lot of Monthly National Tournaments and every year we only lost 1 or 2 for 3 straight years. I have competed in International Tournaments as well in Singapore (2x Champion) and in China (3rd place).All those tournaments happened when I was in college and taking up BSIT course because I love programming. So when I have graduated, I cannot join professional tournaments anymore and just focus on my job.I am 4x Microsoft certified and 3x AWS certified.I love sharing what I know with my colleagues and friends. Teaching and helping others are something that I really want to do. But it is hard to reach a lot of people and would take a lot of time.So here I am now in Udemy to also learn as well as to teach and reach thousands of people who shares the same passion in programming.With my experience as a fullstack developer and being a gamer, I know the recipe to stay in the competition and be on top of the game. In my gaming experience I learned how to improve my skills and determine which areas to work on. I have applied these in the world of programming and continually improving my skills together with my team.Nice to meet you and let's learn together.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.