Главная страницаКатегория next.jsReact с Удовольствием

React с Удовольствием

Name: React с Удовольствием
Price: 13 USD
Rating: 4.7 (87 reviews)

The Joy of React

Josh Comeau

★4.7 (всего оценок - 87)

Продолжительность

25 ч 35 мин

Категория

Next.js

Количество уроков

239 Видео

Дата добавления

1 окт. 2023 г., 01:33

Язык

Английский

Дата выхода

1 сент. 2023 г., 01:00

Дата обновления

29 апр. 2026 г., 18:55

React с Удовольствием — это не просто курс, а новый формат обучения, который помогает уверенно освоить React, избежать хаоса учебников и наконец понять, как работает React внутри и как применять его в реальных проектах.

Что делает этот курс уникальным

Курс сочетает интерактивность, глубокое объяснение концепций и практическое программирование. Вы не смотрите — вы создаёте. Этот подход помогает избежать поверхностного понимания и формирует прочную базу, необходимую современному React-разработчику.

Полностью интерактивный формат

Каждый модуль включает практические упражнения, мини-проекты, игровые задания и реалистичные ситуации, которые формируют мышление настоящего разработчика.

Фундаментальное понимание React

На протяжении всего курса вы будете изучать не только API React, но и его внутренние механизмы — как происходят рендеры, что такое элементы React, почему ключи важны. Это даёт уверенность и помогает выходить за рамки учебных примеров.

Структура курса

Модуль 1: Основы React

Вводный модуль, который закладывает фундамент: компоненты, JSX, пропсы, списки, условный рендеринг, стилизация. Вы создадите мини-React без состояния, чтобы понять механику изнутри.

Модуль 2: Работа с состоянием

Погружение в динамическое поведение приложений: обработчики событий, useState, сложные структуры состояния, поднятие состояния и ключевые концепции жизненного цикла рендера.

Модуль 3: React Hooks

Продвинутая работа с:

useEffect и побочными эффектами
useRef и управлением DOM
useMemo и useCallback для оптимизации
кастомными хуками
получением данных (Fetch, useSWR)

Вы разберётесь с неизменяемостью, устаревшими значениями и глубже поймёте модель рендера.

Модуль 4: API компонента и дизайн

Модуль о том, как создавать удобные, гибкие и доступные компоненты. Вы изучите:

полиморфизм и делегирование пропсов
составные компоненты и слоты
React Context
доступность сложных элементов (например, модальных окон)

Модуль 5: Практики радости

Автор делится опытом, который накапливался 8 лет. Темы включают:

принцип наименьших привилегий
различие между родителями и владельцами
упрощение сложного состояния с Immer
глубокое понимание элементов, ссылок и ключей

Это набор паттернов, которые делают разработку на React приятной и эффективной.

Модуль 6: React в полном стеке

Полноценное погружение в Next.js и современный стек React:

React Server Components
Suspense
потоковый рендеринг и выборочная гидратация
новый маршрутизатор App Router

Вы научитесь строить современные высокопроизводительные full‑stack приложения.

Практические проекты курса

Проект 1: Игра Wordle

Изучение состояния React через создание игры с нуля и продумывание архитектуры приложения.

Проект 2: Компонент Toast и Playground

Создание доступного и гибкого компонента уведомлений, проработка API и UX‑деталей.

Проект 3: Интерактивный блог на MDX

Создание идеального блога с полноценной мощью React прямо внутри контента.

Бонусные материалы

Бонусный модуль: Анимации с Framer Motion

Вы узнаете, как создавать выдающиеся анимации макета с использованием layout projection в Framer Motion.

Бонус: Подготовка к техническому собеседованию

Набор задач «как на интервью» и разбор решений от автора курса.

Почему этот курс действительно работает

Он сочетает глубокое понимание концепций, практическую работу, современный стек и опыт реального разработчика. React становится не только понятным — с ним действительно приятно работать.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:03:00
001 - Welcome!
Урок 2. 00:03:43
002 - Hello React
Урок 3. 00:05:14
003 - Build Your Own React
Урок 4. 00:05:02
004 - Expression Slots
Урок 5. 00:01:55
005 - Fix The Converter -
Урок 6. 00:03:18
006 - The Whitespace Gotcha
Урок 7. 00:03:20
007 - Exercises
Урок 8. 00:05:18
008 - Exercises
Урок 9. 00:04:11
009 - Thinking in Components
Урок 10. 00:06:29
010 - Props
Урок 11. 00:02:21
011 - Exercises
Урок 12. 00:06:29
012 - Exercises
Урок 13. 00:02:35
013 - Fragments
Урок 14. 00:04:21
014 - Mapping Over Data
Урок 15. 00:05:09
015 - Keys
Урок 16. 00:03:56
016 - Exercises
Урок 17. 00:05:17
017 - Exercises
Урок 18. 00:01:53
018 - Exercises
Урок 19. 00:04:56
019 - Exercises
Урок 20. 00:03:04
020 - Exercises
Урок 21. 00:04:09
021 - Exercises
Урок 22. 00:04:09
022 - Styling In React
Урок 23. 00:05:17
023 - CSS Modules
Урок 24. 00:03:40
024 - Exercises
Урок 25. 00:03:37
025 - Exercises
Урок 26. 00:02:15
026 - Exercises
Урок 27. 00:02:16
027 - Exercises
Урок 28. 00:03:41
028 - Asynchronous Updates
Урок 29. 00:04:49
029 - Exercises
Урок 30. 00:04:23
030 - Exercises
Урок 31. 00:09:32
031 - Why the Dance
Урок 32. 00:08:28
032 - Data Binding
Урок 33. 00:08:10
033 - Exercises
Урок 34. 00:02:40
034 - Exercises
Урок 35. 00:08:37
035 - Exercises
Урок 36. 00:04:05
036 - Props Vs. State
Урок 37. 00:07:27
037 - Mutation Bugs
Урок 38. 00:09:08
038 - Exercises
Урок 39. 00:04:12
039 - Exercises
Урок 40. 00:08:36
040 - Dynamic Key Generation
Урок 41. 00:12:05
041 - Key Gotchas
Урок 42. 00:09:28
042 - Lifting State Up
Урок 43. 00:01:42
043 - Exercises
Урок 44. 00:08:22
044 - Exercises
Урок 45. 00:08:42
045 - Component Instances
Урок 46. 00:03:15
046 - About This Project
Урок 47. 00:04:32
047 - Getting Started
Урок 48. 00:10:46
048 - Solution
Урок 49. 00:14:03
049 - Solution
Урок 50. 00:09:07
050 - hhdfnang
Урок 51. 00:09:09
051 - ogfbmgeg
Урок 52. 00:16:04
052 - fgfcikbp
Урок 53. 00:06:02
053 - - 1920x1080 3305K
Урок 54. 00:07:00
054 - - 1920x1080 3066K
Урок 55. 00:06:00
055 - Rules of Hooks
Урок 56. 00:03:12
056 - Exercises
Урок 57. 00:03:50
057 - Exercises
Урок 58. 00:09:10
058 - Immutability Revisited
Урок 59. 00:06:09
059 - Refs
Урок 60. 00:02:20
060 - Exercises
Урок 61. 00:04:24
061 - Exercises
Урок 62. 00:04:09
062 - Side Effects
Урок 63. 00:07:44
063 - The useEffect hook
Урок 64. 00:02:59
064 - Exercises
Урок 65. 00:05:23
065 - Exercises
Урок 66. 00:04:34
066 - Effect Lint Rules
Урок 67. 00:03:43
067 - Running on Mount
Урок 68. 00:04:48
068 - Running on Mount
Урок 69. 00:01:19
069 - Exercises
Урок 70. 00:02:15
070 - Exercises
Урок 71. 00:03:58
071 - Exercises
Урок 72. 00:05:51
072 - Exercises
Урок 73. 00:06:55
073 - Cleanup
Урок 74. 00:07:14
074 - Cleanup
Урок 75. 00:00:56
075 - Cleanup Exercises
Урок 76. 00:01:31
076 - Cleanup Exercises
Урок 77. 00:02:40
077 - Cleanup Exercises
Урок 78. 00:05:33
078 - Cleanup Exercises
Урок 79. 00:11:33
079 - Stale Values
Урок 80. 00:03:16
080 - Stale Values
Урок 81. 00:04:27
081 - Exercises
Урок 82. 00:06:39
082 - Strict Mode
Урок 83. 00:04:08
083 - Strict Mode
Урок 84. 00:04:35
084 - Custom Hooks
Урок 85. 00:02:31
085 - Exercises
Урок 86. 00:08:18
086 - Exercises
Урок 87. 00:05:19
087 - Exercises
Урок 88. 00:03:55
088 - Fetching on Event
Урок 89. 00:07:20
089 - Fetching on Event
Урок 90. 00:05:30
090 - Fetching on Mount
Урок 91. 00:11:28
091 - Exercises
Урок 92. 00:04:54
092 - Exercises
Урок 93. 00:01:10
093 - Exercises
Урок 94. 00:03:16
094 - Exercises
Урок 95. 00:10:10
095 - Exercises
Урок 96. 00:07:00
096 - Alternatives
Урок 97. 00:04:24
097 - Introduction
Урок 98. 00:08:39
098 - The Spectrum of Components
Урок 99. 00:05:41
099 - Exercises
Урок 100. 00:07:09
100 - Exercises
Урок 101. 00:03:35
101 - Prop Delegation
Урок 102. 00:03:09
102 - Exercises
Урок 103. 00:05:28
103 - Exercises
Урок 104. 00:03:19
104 - Delegating Styles
Урок 105. 00:09:10
105 - Forwarding Refs
Урок 106. 00:01:45
106 - Exercises
Урок 107. 00:01:24
107 - Exercises
Урок 108. 00:07:27
108 - Polymorphism
Урок 109. 00:06:55
109 - Exercises
Урок 110. 00:04:13
110 - Exercises
Урок 111. 00:10:18
111 - Slots
Урок 112. 00:03:05
112 - Exercises
Урок 113. 00:05:58
113 - Exercises
Урок 114. 00:09:26
114 - The Problem
Урок 115. 00:02:44
115 - Exercises
Урок 116. 00:02:41
116 - Exercises
Урок 117. 00:06:49
117 - Provider Components
Урок 118. 00:05:16
118 - Performance
Урок 119. 00:05:52
119 - Performance
Урок 120. 00:15:17
120 - Modals
Урок 121. 00:11:10
121 - Exercises
Урок 122. 00:10:29
122 - Converting Our Modal
Урок 123. 00:04:56
123 - Exercises
Урок 124. 00:03:01
124 - Exercises
Урок 125. 00:05:40
125 - Exercises
Урок 126. 00:05:33
126 - Solution
Урок 127. 00:05:49
127 - Solution
Урок 128. 00:10:37
128 - Solution
Урок 129. 00:07:30
129 - Solution
Урок 130. 00:14:04
130 - edfhjakg
Урок 131. 00:07:40
131 - fpooaoln
Урок 132. 00:04:01
132 - Leveraging Keys
Урок 133. 00:05:53
133 - Leveraging Keys
Урок 134. 00:06:55
134 - Leveraging Keys
Урок 135. 00:01:28
135 - Exercises
Урок 136. 00:04:49
136 - Exercises
Урок 137. 00:03:42
137 - Exercises
Урок 138. 00:02:02
138 - Elements Revisited
Урок 139. 00:12:00
139 - Elements Revisited
Урок 140. 00:13:35
140 - Deriving State
Урок 141. 00:02:20
141 - Exercises
Урок 142. 00:01:54
142 - Exercises
Урок 143. 00:07:36
143 - Exercises
Урок 144. 00:04:19
144 - Lifting Content Up
Урок 145. 00:04:17
145 - Lifting Content Up
Урок 146. 00:06:29
146 - Exercises
Урок 147. 00:08:01
147 - Single Source of Truth
Урок 148. 00:03:57
148 - Exercises
Урок 149. 00:04:03
149 - Exercises
Урок 150. 00:05:26
150 - Principle of Least Privilege
Урок 151. 00:04:21
151 - Exercises
Урок 152. 00:10:02
152 - useReducer
Урок 153. 00:01:51
153 - Exercises
Урок 154. 00:07:07
154 - Exercises
Урок 155. 00:06:51
155 - Exercises
Урок 156. 00:04:17
156 - Exercises
Урок 157. 00:04:28
157 - Exercises
Урок 158. 00:15:21
158 - Exercises
Урок 159. 00:11:03
159 - Portals
Урок 160. 00:04:05
160 - Exercise
Урок 161. 00:05:17
161 - Exercise
Урок 162. 00:09:22
162 - Refs Revisited
Урок 163. 00:06:01
163 - Error Boundaries
Урок 164. 00:10:03
164 - - 1920x1080
Урок 165. 00:12:02
165 - React Server Components
Урок 166. 00:08:35
166 - Hello Next!
Урок 167. 00:02:46
167 - Exercises
Урок 168. 00:03:54
168 - Exercises
Урок 169. 00:17:16
169 - Client Components
Урок 170. 00:03:55
170 - Exercises
Урок 171. 00:05:03
171 - Exercises
Урок 172. 00:04:30
172 - Exercises
Урок 173. 00:09:16
173 - Exercises
Урок 174. 00:07:51
174 - SSR Gotchas
Урок 175. 00:06:20
175 - SSR Exercises
Урок 176. 00:07:46
176 - SSR Exercises
Урок 177. 00:04:16
177 - SSR Exercises
Урок 178. 00:09:39
178 - Page Transitions
Урок 179. 00:05:42
179 - Dynamic Segments
Урок 180. 00:02:36
180 - Exercises
Урок 181. 00:06:05
181 - Exercises
Урок 182. 00:03:59
182 - Next's Metadata API
Урок 183. 00:03:49
183 - Starting a New Project - 1952x1080
Урок 184. 00:06:11
184 - Building for Production
Урок 185. 00:04:38
185 - Building for Production
Урок 186. 00:03:02
186 - Exercises
Урок 187. 00:06:46
187 - React Cache
Урок 188. 00:16:15
188 - An Exciting New World
Урок 189. 00:07:52
189 - Graphing It Out
Урок 190. 00:04:23
190 - Suspense Exercises
Урок 191. 00:04:15
191 - Suspense Exercises
Урок 192. 00:07:13
192 - jbjdnpaj
Урок 193. 00:15:12
193 - Dark Mode
Урок 194. 00:06:57
194 - Getting Started
Урок 195. 00:02:49
195 - Exercises
Урок 196. 00:06:35
196 - Exercises
Урок 197. 00:11:06
197 - Layout Animations
Урок 198. 00:02:06
198 - Layout Exercises
Урок 199. 00:02:57
199 - Layout Exercises
Урок 200. 00:09:22
200 - Shared Layout
Урок 201. 00:13:43
201 - Working With Groups
Урок 202. 00:03:56
202 - Working With Groups
Урок 203. 00:01:31
203 - Shared Layout Exercises
Урок 204. 00:06:45
204 - Shared Layout Exercises
Урок 205. 00:05:23
205 - Shared Layout Exercises
Урок 206. 00:07:05
206 - One Last Exercise
Урок 207. 00:09:26
207 - One Last Exercise
Урок 208. 00:03:47
208 - - 1920x1080
Урок 209. 00:05:23
209 - - 1920x1080
Урок 210. 00:05:06
210 - Solution
Урок 211. 00:05:33
211 - Solution
Урок 212. 00:06:42
212 - Solution
Урок 213. 00:02:57
213 - Solution
Урок 214. 00:09:05
214 - ccobbnfj
Урок 215. 00:10:33
215 - pbjemcph
Урок 216. 00:09:06
216 - egfjagcc
Урок 217. 00:09:53
217 - nkfhacjj
Урок 218. 00:11:35
218 - jcppdheb
Урок 219. 00:05:52
219 - Suspense Investigations
Урок 220. 00:03:13
220 - Navigation
Урок 221. 00:02:03
221 - Tips N’ Tricks
Урок 222. 00:05:32
222 - Webpack
Урок 223. 00:04:05
001 - Cover Letters
Урок 224. 00:02:37
002 - Cover Letters
Урок 225. 00:02:13
003 - Cover Letters
Урок 226. 00:05:30
004 - Technical Interviews
Урок 227. 00:04:17
005 - FizzBuzz
Урок 228. 00:06:34
006 - Scroll Position
Урок 229. 00:11:02
007 - Todo App
Урок 230. 00:10:19
008 - Project Euler
Урок 231. 00:22:48
009 - Starfield Button
Урок 232. 00:36:27
010 - Multi-Step Signup
Урок 233. 00:24:56
011 - Trello Clone
Урок 234. 00:14:18
012 - Clicking Outside
Урок 235. 00:21:41
013 - Multi Checkbox
Урок 236. 00:01:27
014 - Fetch Race Condition
Урок 237. 00:11:05
015 - Fetch Race Condition
Урок 238. 00:04:33
016 - Fetch Race Condition
Урок 239. 00:12:19
017 - useEffectSkipMount

All videos extracted from html pages. Find HTML files at course materials. Find code examples in codesandbox txt file.

Module 1 React Fundamentals - lesson 1 - 25
Module 2 Working With State - lesson 26 - 45
Project Word Game - lesson 46 - 52
Module 3 React Hooks - lesson 53 - 96
Module 4 Component API Design - lesson 97 - 125
Project Toast Component - lesson 126 - 131
Module 5 Happy Practices - lesson 132 - 163
Module 6 Full Stack React - lesson 164 - 193
Bonus Module Layout Animations with Framer Motion - lesson 194 - 207
Project Interactive MDX-Based Blog - lesson 208 - 219
Tools of the Trade - lesson 220 - 222
Bonus Module Job Hunting Kit - lesson 223-239

Автор - Josh Comeau

Josh Comeau

Привет, я Джош! Вы не поверите, но самым первым нетривиальным веб-приложением, которое я создал, была платформа для онлайн-обучения! Мой друг работал репетитором, и ему нужен был способ задавать своим ученикам математические задачи. Я создал его с помощью PHP, MySQL и jQuery. Я отказался от этого проекта, когда обнаружил Khan Academy, всемирно известную некоммерческую организацию, чья миссия - предоставить бесплатное онлайн-образование мирового у

+35

Комментарии

sahilktempserve799
19 мар. 2026 г., 04:02
I am undertaking this course , as a react developer in real life, this covers lot of suff i didnt knew and could benefit in my real job, i really recommend this react course over other course this covers all the concepts, optimizations, correct use of react, debugging and proper guidelines then i find in other courses, also josh is great teacher to learn from.
hcee sahilktempserve799
1 апр. 2026 г., 09:24
Hi, Because you professionally work with React, Can you share how does this course compare to Epic React by Kent C Dodds ?
dudecy
12 нояб. 2025 г., 02:04
https://courses.joshwcomeau.com/joy-of-react/03-hooks/05.08.B-state-setter-callback
https://courses.joshwcomeau.com/joy-of-react/03-hooks/08.07-react-forget

ARE MISSING. PLEASE UPDATE
CourseHunter Team dudecy
17 нояб. 2025 г., 22:46
UPDATED!

https://courses.joshwcomeau.com/joy-of-react/03-hooks/08.07-react-forget - IT'S NOT MISSING, ITS "React Compiler" LESSON! NOT MISSING. NOT MISSING!@!
dudecy
12 нояб. 2025 г., 01:57
https://courses.joshwcomeau.com/joy-of-react/03-hooks/08.07-react-forget this part is missing. PLEASE UPDATE
CourseHunter Team
19 янв. 2025 г., 19:18
Update: Please see the OPTIONAL About React 19 file at 01 Module 1 React Fundamentals.

Also, the HTML files of 08 Module 6 Full Stack React was updated
rafale
11 дек. 2024 г., 00:32
update please
ron
11 сент. 2024 г., 04:54
please update
dudecy
5 июн. 2024 г., 09:02
please update
theacid72
3 янв. 2024 г., 23:57
Не хватает урока во втором модуле: Lifting State Up, именно html файла, видео на месте
aliqureshi66677
16 дек. 2023 г., 06:28
Please update course.
ae11k
10 нояб. 2023 г., 18:32
He talks too much irrelevant - which could be comprised into byte sized!
mblandr
26 окт. 2023 г., 18:26
In Module 2 is absent page about Lifting state up, only video
Blinks
4 окт. 2023 г., 14:33
So how is the course? Already 3 minuses...
Anonymous
3 окт. 2023 г., 16:16
Please do BeyondCSS by Kevin Powell next. Thanks!
Anonymous
2 окт. 2023 г., 13:07
Unable to download. Download Course Archive doesn't seem to be working. Can someone please check. Thank you.
suitcase5935 Anonymous
2 окт. 2023 г., 14:50
Coursehunter wrote on the top of this website the following message "⚡ For some courses, downloading the archive may not work. We are already working to resolve the problem, sorry for the temporary difficulties."
Anonymous suitcase5935
2 окт. 2023 г., 17:27
Yeah, noticed it after posting. Thanks for the update.
suitcase5935
1 окт. 2023 г., 19:43
Thanks a lot for the course! It seems to be working perfectly. I can use the HTML files and one code examples in external view.

But when I reached "009 - Exercises • ( 52_58 ).html" in the first module "01 Module 1 React Fundamentals", I can't go to the playground on the two code exercises it has in that file. All previous HTML files worked ( I didn't test the ones after this).
suitcase5935 suitcase5935
2 окт. 2023 г., 00:33
Also, is the section "Reference: JavaScript Primer" missing? I can see the "Reference: Tools of the Trade". Perhaps the "JavaScript Primer" is not included in this edition, or its not released yet? :)

https://courses.joshwcomeau.com/joy-of-react/10-javascript-primer/00-introduction
CourseHunter Team suitcase5935
3 окт. 2023 г., 16:35
For JavaScript Primer see the materials archive. Codesandbox links updated, redownload materials.
suitcase5935 CourseHunter Team
3 окт. 2023 г., 16:44
Thank you!:)
Mr. UD
1 окт. 2023 г., 16:12
HI Andrew, please add react.gg too.
sboy24322
1 окт. 2023 г., 10:10
Thank you for the course :)
Alvin
1 окт. 2023 г., 04:20
I love you Andrew, thank you for this.
Dandy
1 окт. 2023 г., 03:53
Thanks, Andrew, I know scraping this data is a pain in the ass, but I really wish you would have found a solution for keeping the interactivity. I know there's a way, as I saw someone scraped the pages with the interactivity part when he introduced free sections in his CSS course.

His code editor that he uses, from flipping through the pages, he splits the code to multiple tabs, and you can only access the code in the first tab as it's already opened by default. From inspecting the HTML page, it's not there, so that's another partial loss for this course also.
CourseHunter Team Dandy
1 окт. 2023 г., 10:05
https://prnt.sc/Js4mww4_xqkr
Dandy CourseHunter Team
1 окт. 2023 г., 11:54
I don't know why we are getting different results, I have downloaded the materials again, same thing. https://ibb.co/Vwg0qPB. I checked multiple files all the links point to https://codesandbox.io/api/v1/sandboxes/define and clicking on the icon doesn't do anything. I have also checked multiple browsers.
CourseHunter Team Dandy
1 окт. 2023 г., 16:35
Yep, now we have same problem. We will fix it today evening, sorry about that,
my_coursehunter CourseHunter Team
3 окт. 2023 г., 10:14
Hi, Andrew. Please let us know when this issue is fixed because I am still having the same issue as brother Dandy.
CourseHunter Team my_coursehunter
3 окт. 2023 г., 16:36
updated
Dandy CourseHunter Team
4 окт. 2023 г., 01:37
issue still exist, are you sure you updated all the files
CourseHunter Team Dandy
4 окт. 2023 г., 11:23
find codesanbox urls at txt file
oops Dandy
1 окт. 2023 г., 08:29
Open code in codesandbox, you can find link to it at the top right panel.
dudecy
1 окт. 2023 г., 02:04
Thank you for the course. Can you add JavaScript Primer? It is missing from the materials
CourseHunter Team dudecy
1 окт. 2023 г., 02:09
11 JavaScript Primer, take a look one more time,
dudecy CourseHunter Team
1 окт. 2023 г., 12:11
yep. my bad. its there!