CourseFlix

The interactive way to master modern React - react.gg (FULL COURSE)

7h 53m 34s
English
Paid

You learn React by doing and by seeing how each idea works. This course shows you the “why” behind key React concepts and uses simple visuals to help you explore each idea at your own pace.

Interactive Learning

You work with short text lessons and clear examples. Each visual helps you test a concept. You see how a change affects the result. This keeps you focused on how React works.

Build 50 Custom Hooks

You rebuild a full set of 50 custom hooks from the useHooks project. This helps you see common patterns. It also helps you write your own hooks with confidence.

Interview Prep

You go through many React questions and short deep dives. These explain the ideas behind each answer. You learn how to talk about React in a clear and direct way during an interview.

Modern React Features

You learn new features like server components, suspense, and concurrent rendering. You also see how they fit with older patterns. The course stays updated as React changes.

Additional

Please know. This is an interactive course, some experience is missing in this release. 

About the Author: UI.dev (Tyler McGinnis)

UI.dev (Tyler McGinnis) thumbnail

UI.dev (formerly tylermcginnis.com) is the online course platform of Tyler McGinnis, a US developer who has been publishing React and JavaScript educational material continuously since 2014. The platform was one of the earliest dedicated React-tutorial sources and remains widely cited for the depth of its long-form courses on JavaScript fundamentals and the React ecosystem.

Course material covers React (including modern hooks-based patterns and Next.js), modern JavaScript (the canonical Modern JavaScript course), Firebase, GraphQL, Redux, TypeScript with React, and the algorithm / data-structure interview prep track. The teaching style is unusually rigorous about the language fundamentals underneath the framework material — Tyler's Modern JavaScript course in particular is a classic of the genre.

The CourseFlix listing under this source carries over 15 UI.dev / Tyler McGinnis courses spanning that range. Material is paid; UI.dev runs on per-course or membership pricing on the original platform.

Watch Online 108 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 108 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Getting Started
All Course Lessons (108)
#Lesson TitleDurationAccess
1
Getting Started Demo
02:56
2
Why React
08:31
3
Imperative vs Declarative Programming
04:43
4
Pure Functions
05:49
5
Components
02:40
6
JSX
06:23
7
Props
03:08
8
Elements vs Components
03:14
9
Handling Events
04:24
10
Preserving Values with useState
03:06
11
Using useState
11:40
12
Why React Renders
10:44
13
Reality Check
00:57
14
Managing Effects
10:12
15
Managing Effects Part 2
13:25
16
Preserving Values with useRef
09:00
17
Teleportation with Context
05:55
18
Complex State with useReducer
13:32
19
Referential Equality and Why It Matters
09:22
20
Managing Advanced Effects
07:53
21
Abstracting Reactive Values with useEffectEvent
04:08
22
Creating Custom Hooks
03:54
23
Rebuilding useHooks
03:44
24
1. Badge Variables
01:10
25
2. Dynamic Date
00:45
26
3. Adjacent Elements
00:58
27
4. Conditional Rendering
00:58
28
5. Ternary Rendering
00:51
29
6. Rendering Lists
00:59
30
7. Rendering Lists No Keys
01:16
31
8. String Props
00:58
32
9. Object props
00:54
33
10. Function Props
01:57
34
11. Children Props
01:09
35
12. Character Limit
01:37
36
13. Character Limit – Props
03:15
37
14. Light Switch
02:01
38
15. Light Switch - Concise
01:49
39
16. Counter
01:38
40
17. Smart Character Limit
04:28
41
18. Password Toggle
04:03
42
19. Multistep Form
05:14
43
20. Form Builder
08:52
44
21. Search Filter
02:24
45
22. Clock
01:41
46
23. Country Info
04:54
47
24. Hacker News
07:20
48
25. Autofocus
02:31
49
26. Video Player
02:35
50
27. Field Notes
04:22
51
28. Click Outside
05:31
52
29. Expanding Textarea
03:27
53
30. Follow the Leader
02:42
54
31. Auth
03:48
55
32. Translations
04:06
56
33. Tabs
06:17
57
34. News Feed
11:20
58
35. Multistep Form with useReducer
06:28
59
36. Task Manager
03:54
60
37. Add To Cart
08:51
61
38. Undo Redo
08:36
62
39. Localized Primes
03:02
63
40. Data Table
07:51
64
41. Optimizing Renders
05:07
65
42. React Ruler
02:07
66
43. Flexible Tooltip
11:20
67
44. Match Media
02:03
68
45. useDocumentTitle
01:11
69
46. useDefault
01:39
70
47. useToggle
02:48
71
48. usePrevious
01:31
72
49. usePreferredLanguage
02:48
73
50. useFavicon
02:33
74
51. useCopyToClipboard
03:02
75
52. useInterval
04:12
76
53. useCounter
04:47
77
54. useLockBodyScroll
02:17
78
55. useQueue
02:54
79
56. useTimeout
03:52
80
57. useWindowSize
02:02
81
58. useVisibilityChange
03:13
82
59. useList
04:18
83
60. useObjectState
03:22
84
61. useDebounce
01:52
85
62. useContinuousRetry
04:01
86
63. useHistoryState
05:43
87
64. useEventListener
04:51
88
65. useRandomInterval
04:49
89
66. useMediaQuery
03:21
90
67. useIntervalWhen
05:48
91
68. useMouse
05:47
92
69. useClickAway
03:47
93
70. useWindowScroll
03:54
94
71. useLogger
04:13
95
72. useOrientation
03:53
96
73. useBattery
05:17
97
74. usePageLeave
02:42
98
75. useKeyPress
03:09
99
76. useThrottle
03:09
100
77. useIdle
04:39
101
78. useFetch
06:41
102
79. useCountdown
04:42
103
80. useGeolocation
04:05
104
81. useLocalStorage
06:20
105
82. useSessionStorage
03:11
106
83. useIsClient
02:22
107
84. useNetworkState
05:36
108
85. useLongPress
06:44
Unlock unlimited learning

Get instant access to all 107 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

108 lessons · 7h 53m 34s
Show all 108 lessons
  1. 1 Getting Started 02:56
  2. 2 Why React 08:31
  3. 3 Imperative vs Declarative Programming 04:43
  4. 4 Pure Functions 05:49
  5. 5 Components 02:40
  6. 6 JSX 06:23
  7. 7 Props 03:08
  8. 8 Elements vs Components 03:14
  9. 9 Handling Events 04:24
  10. 10 Preserving Values with useState 03:06
  11. 11 Using useState 11:40
  12. 12 Why React Renders 10:44
  13. 13 Reality Check 00:57
  14. 14 Managing Effects 10:12
  15. 15 Managing Effects Part 2 13:25
  16. 16 Preserving Values with useRef 09:00
  17. 17 Teleportation with Context 05:55
  18. 18 Complex State with useReducer 13:32
  19. 19 Referential Equality and Why It Matters 09:22
  20. 20 Managing Advanced Effects 07:53
  21. 21 Abstracting Reactive Values with useEffectEvent 04:08
  22. 22 Creating Custom Hooks 03:54
  23. 23 Rebuilding useHooks 03:44
  24. 24 1. Badge Variables 01:10
  25. 25 2. Dynamic Date 00:45
  26. 26 3. Adjacent Elements 00:58
  27. 27 4. Conditional Rendering 00:58
  28. 28 5. Ternary Rendering 00:51
  29. 29 6. Rendering Lists 00:59
  30. 30 7. Rendering Lists No Keys 01:16
  31. 31 8. String Props 00:58
  32. 32 9. Object props 00:54
  33. 33 10. Function Props 01:57
  34. 34 11. Children Props 01:09
  35. 35 12. Character Limit 01:37
  36. 36 13. Character Limit – Props 03:15
  37. 37 14. Light Switch 02:01
  38. 38 15. Light Switch - Concise 01:49
  39. 39 16. Counter 01:38
  40. 40 17. Smart Character Limit 04:28
  41. 41 18. Password Toggle 04:03
  42. 42 19. Multistep Form 05:14
  43. 43 20. Form Builder 08:52
  44. 44 21. Search Filter 02:24
  45. 45 22. Clock 01:41
  46. 46 23. Country Info 04:54
  47. 47 24. Hacker News 07:20
  48. 48 25. Autofocus 02:31
  49. 49 26. Video Player 02:35
  50. 50 27. Field Notes 04:22
  51. 51 28. Click Outside 05:31
  52. 52 29. Expanding Textarea 03:27
  53. 53 30. Follow the Leader 02:42
  54. 54 31. Auth 03:48
  55. 55 32. Translations 04:06
  56. 56 33. Tabs 06:17
  57. 57 34. News Feed 11:20
  58. 58 35. Multistep Form with useReducer 06:28
  59. 59 36. Task Manager 03:54
  60. 60 37. Add To Cart 08:51
  61. 61 38. Undo Redo 08:36
  62. 62 39. Localized Primes 03:02
  63. 63 40. Data Table 07:51
  64. 64 41. Optimizing Renders 05:07
  65. 65 42. React Ruler 02:07
  66. 66 43. Flexible Tooltip 11:20
  67. 67 44. Match Media 02:03
  68. 68 45. useDocumentTitle 01:11
  69. 69 46. useDefault 01:39
  70. 70 47. useToggle 02:48
  71. 71 48. usePrevious 01:31
  72. 72 49. usePreferredLanguage 02:48
  73. 73 50. useFavicon 02:33
  74. 74 51. useCopyToClipboard 03:02
  75. 75 52. useInterval 04:12
  76. 76 53. useCounter 04:47
  77. 77 54. useLockBodyScroll 02:17
  78. 78 55. useQueue 02:54
  79. 79 56. useTimeout 03:52
  80. 80 57. useWindowSize 02:02
  81. 81 58. useVisibilityChange 03:13
  82. 82 59. useList 04:18
  83. 83 60. useObjectState 03:22
  84. 84 61. useDebounce 01:52
  85. 85 62. useContinuousRetry 04:01
  86. 86 63. useHistoryState 05:43
  87. 87 64. useEventListener 04:51
  88. 88 65. useRandomInterval 04:49
  89. 89 66. useMediaQuery 03:21
  90. 90 67. useIntervalWhen 05:48
  91. 91 68. useMouse 05:47
  92. 92 69. useClickAway 03:47
  93. 93 70. useWindowScroll 03:54
  94. 94 71. useLogger 04:13
  95. 95 72. useOrientation 03:53
  96. 96 73. useBattery 05:17
  97. 97 74. usePageLeave 02:42
  98. 98 75. useKeyPress 03:09
  99. 99 76. useThrottle 03:09
  100. 100 77. useIdle 04:39
  101. 101 78. useFetch 06:41
  102. 102 79. useCountdown 04:42
  103. 103 80. useGeolocation 04:05
  104. 104 81. useLocalStorage 06:20
  105. 105 82. useSessionStorage 03:11
  106. 106 83. useIsClient 02:22
  107. 107 84. useNetworkState 05:36
  108. 108 85. useLongPress 06:44

Related courses

  • MobX In Depth With React(Hooks+TypeScript) thumbnail

    MobX In Depth With React(Hooks+TypeScript)

    By: Udemy
    This is the most extensive course about MobX you will find online, After a few years of using MobX, I'm really passionate about it and really love it, I decided
    2 hours 25 minutes 54 seconds
  • Zero to Full Stack Hero thumbnail

    Zero to Full Stack Hero

    By: PAPA React (Sonny Sangha)
    PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY.
    101 hours 29 minutes 59 seconds 5 / 5
  • Master Spring Boot 3 & Spring Framework 6 with Java thumbnail

    Master Spring Boot 3 & Spring Framework 6 with Java

    By: Udemy
    This is THE COURSE you need to learn everything you need to know about building real world Java applications and deploying them to the cloud using Spring and.
    37 hours 34 minutes 14 seconds 5 / 5

Frequently asked questions

What is The interactive way to master modern React - react.gg (FULL COURSE) about?
You learn React by doing and by seeing how each idea works. This course shows you the “why” behind key React concepts and uses simple visuals to help you explore each idea at your own pace. Interactive Learning You work with short text…
Who teaches The interactive way to master modern React - react.gg (FULL COURSE)?
The interactive way to master modern React - react.gg (FULL COURSE) is taught by UI.dev (Tyler McGinnis). You can find more courses by this instructor on the corresponding source page.
How long is The interactive way to master modern React - react.gg (FULL COURSE)?
The interactive way to master modern React - react.gg (FULL COURSE) contains 108 lessons with a total runtime of 7 hours 53 minutes. All lessons are available to watch online at your own pace.
Is The interactive way to master modern React - react.gg (FULL COURSE) free to watch?
The interactive way to master modern React - react.gg (FULL COURSE) is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch The interactive way to master modern React - react.gg (FULL COURSE) online?
The interactive way to master modern React - react.gg (FULL COURSE) is available to watch online on CourseFlix at https://courseflix.net/course/the-interactive-way-to-master-modern-react-react-gg-full-course. The page hosts every lesson with the integrated video player; no download is required.