CF

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

Related courses

Frequently asked questions

What prerequisites are needed before taking this React course?
Before enrolling in this React course, you should have a foundational understanding of JavaScript, including concepts like functions, arrays, and objects. Familiarity with web development basics, such as HTML and CSS, will also be beneficial. The course assumes that you know how to work with JavaScript within the context of web development but introduces React from the ground up, starting with concepts like components and JSX.
What projects will I build during the course?
Throughout the course, you will rebuild a set of 50 custom hooks from the useHooks project. These exercises are designed to help you understand common React patterns and confidently write your own custom hooks. Additionally, you'll engage in exercises like creating a multistep form, building a video player, and managing state with useReducer, which help solidify your understanding of React's capabilities.
Who is the intended audience for this React course?
This course is intended for developers who want to deepen their understanding of React, whether they are beginners to React itself or have some experience with it. The course is particularly beneficial for those preparing for technical interviews, as it includes interview prep with React-specific questions and explanations. It suits developers looking to understand both foundational and modern React features.
How does this React course compare to other React courses in terms of depth?
This course offers an interactive approach to learning React, focusing on both foundational concepts and modern features like server components, suspense, and concurrent rendering. Unlike some courses that may only cover the basics, this course provides a deep dive into creating custom hooks and managing complex state, offering a comprehensive understanding of both new and established React patterns.
What modern React features are covered in the course?
The course covers several modern React features, including server components, suspense, and concurrent rendering. It explains how these new features integrate with traditional patterns in React, ensuring you have a balanced understanding of the framework's capabilities. The course is updated as React evolves, so you learn the most current practices and technologies.
What topics are not covered in this React course?
While the course provides a thorough exploration of React, it does not cover topics outside the React ecosystem, such as backend development or non-React-specific state management libraries like Redux or MobX. The focus is squarely on React's native capabilities and patterns, such as hooks and state management, within the React framework itself.
What is the expected time commitment for completing this course?
The course consists of 108 lessons, which are designed to be short and interactive, allowing you to progress at your own pace. Although the total runtime is not specified, you can expect to spend considerable time engaging with the exercises, rebuilding hooks, and exploring concepts in depth. The course's structure supports immersive learning, allowing you to understand and apply React concepts thoroughly.