Главная страницаКатегория react.jsМастер-класс: Веб-разработка c React + Typescript 2021

Мастер-класс: Веб-разработка c React + Typescript 2021

Name: Мастер-класс: Веб-разработка c React + Typescript 2021
Price: 12.5 USD
Rating: 4 (16 reviews)

Master Class: React + Typescript 2021 Web Development

udemy

★4 (всего оценок - 16)

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

22 ч 4 мин

Категория

React.js

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

163 Видео

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

5 апр. 2021 г., 22:38

Язык

Английский

Дата выхода

1 апр. 2021 г., 03:00

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

29 апр. 2026 г., 09:47

Этот мастер‑класс поможет вам уверенно освоить React и Typescript, избавиться от хаотичного кода и научиться создавать структурированные, масштабируемые приложения по всем правилам современного фронтенда.

О чем этот мастер‑класс

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

Почему важно следовать React Way

Многие начинающие разработчики используют React как обычный JavaScript, игнорируя ключевые механики фреймворка: управление состоянием, композицию компонентов, мемоизацию, работу с эффектами. Это приводит к ошибкам, сложности масштабирования и падению производительности.

Основные проблемы новичков

перенасыщение компонентов логикой;
отсутствие типизации и как следствие — неожиданные ошибки;
цепочки побочных эффектов и непредсказуемое поведение;
"спагетти-код" без четкой архитектуры.

Что вы изучите в процессе обучения

Мастер‑класс помогает сформировать правильные привычки разработки на React + Typescript и понять, как писать масштабируемые компоненты и управлять сложным состоянием приложения.

Основные темы курса

глубокое понимание JSX, пропсов, стейта и контекста;
правильная организация проекта и структуры папок;
создание собственных UI‑компонентов без сторонних библиотек;
типизация компонентов, хуков, стилей и API с помощью Typescript;
оптимизация производительности React-приложений;
использование современных возможностей React — хуков, мемоизации, контекста;
отладка, контроль ошибок и улучшение читаемости кода.

Практическая часть

Чтобы закрепить знания, вы создадите интернет‑магазин с нуля. Все элементы — от карточек товаров до корзины и логики заказа — будут реализованы самостоятельно, без сторонних UI‑библиотек.

Результат, который вы получите

полноценный e‑commerce проект;
понимание архитектуры и организации React‑приложения;
навыки написания чистого, типизированного кода;
понимание принципов проектирования фронтенд‑интерфейсов.

Для кого подходит этот курс

Мастер‑класс будет полезен:

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

Почему этот курс выделяется

В отличие от типичных обучающих программ, здесь вы не просто изучаете теорию — вы практикуетесь на реальном проекте и учитесь создавать собственный UI без зависимости от готовых библиотек, что формирует глубокое понимание внутренней логики React.

Преимущества обучения

структурированная и логичная подача материала;
пошаговое развитие проекта до полноценного приложения;
детальная работа с типами для повышения качества кода;
упор на профессиональные методики и архитектуру.

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

Урок 1. 00:01:30
Course Overview
Урок 2. 00:03:01
Your Instructor
Урок 3. 00:06:21
What/Why React?
Урок 4. 00:07:50
First Taste of React
Урок 5. 00:01:17
Typescript Overview
Урок 6. 00:02:45
Webpack Overview
Урок 7. 00:00:52
Introduction
Урок 8. 00:03:52
Var, Let and Const
Урок 9. 00:06:09
Var, Let and Const - Hands On
Урок 10. 00:01:15
Logical OR and AND
Урок 11. 00:03:42
Logical OR and AND - Hands On
Урок 12. 00:01:38
Primitive Values vs Reference Type
Урок 13. 00:02:13
Primitive Values vs Reference Type - Hands On
Урок 14. 00:04:46
Shallow and Deep Copy
Урок 15. 00:06:01
Shallow and Deep Copy - Hands On
Урок 16. 00:04:55
Spread Operator, Rest Parameter, Destructuring
Урок 17. 00:08:47
Spread Operator, Rest Parameter, Destructuring - Hands On
Урок 18. 00:03:03
Class
Урок 19. 00:06:01
Class - Hands On
Урок 20. 00:05:00
This Object + Arrow Function
Урок 21. 00:03:50
This Object + Arrow Function - Hands On
Урок 22. 00:12:17
Promises and Async+Await
Урок 23. 00:13:11
Promises and Async+Await - Hands On
Урок 24. 00:03:56
Export & Import
Урок 25. 00:03:53
Summary
Урок 26. 00:01:26
Introduction
Урок 27. 00:06:23
Setup Environment
Урок 28. 00:09:57
Component & Props
Урок 29. 00:10:56
Component & Props - Hands On
Урок 30. 00:03:21
State
Урок 31. 00:13:26
State - Hands On
Урок 32. 00:03:25
Lifecycle - Mounting & Unmounting
Урок 33. 00:13:45
Lifecycle - Mounting & Unmounting - Hands On
Урок 34. 00:05:02
Lifecycle - Updating
Урок 35. 00:17:39
Lifecycle - Updating - Hands On
Урок 36. 00:06:18
Assignment Solution (Optional)
Урок 37. 00:03:36
Lifecycle - Error Handling
Урок 38. 00:09:54
Lifecycle - Error Handling - Hands On
Урок 39. 00:01:21
Extras - Lifecycle
Урок 40. 00:05:25
Pure Components & React Memo
Урок 41. 00:08:25
Pure Components & React Memo - Hands On
Урок 42. 00:04:36
RenderProps & Higher Order Component
Урок 43. 00:17:01
RenderProps & Higher Order Component - Hands On
Урок 44. 00:03:47
List & Keys
Урок 45. 00:06:47
List & Keys - Hands On
Урок 46. 00:05:31
Refs
Урок 47. 00:12:38
Refs - Hands On
Урок 48. 00:06:33
Context API
Урок 49. 00:14:41
Context API - Hands On
Урок 50. 00:04:29
Form Elements
Урок 51. 00:07:56
Form Elements - Hands On
Урок 52. 00:12:07
Assignment Solution (Optional)
Урок 53. 00:04:35
Code Splitting
Урок 54. 00:04:59
Code Splitting - Hands On
Урок 55. 00:04:20
Children, cloneElement & isValidElement API
Урок 56. 00:06:48
Children, cloneElement & isValidElement API - Hands On
Урок 57. 00:03:31
Assignment Solution (Optional)
Урок 58. 00:04:35
Summary
Урок 59. 00:00:34
Introduction
Урок 60. 00:03:30
Render & Hydrate
Урок 61. 00:01:47
Render API - Hands On
Урок 62. 00:02:43
Unmount Component At Node API
Урок 63. 00:01:12
Find Dom Node API
Урок 64. 00:01:48
Find Dom Node API - Hands On
Урок 65. 00:02:26
Create Portal API
Урок 66. 00:11:17
Create Portal API - Hands On
Урок 67. 00:04:51
Assignment Solution (Optional)
Урок 68. 00:01:04
Summary
Урок 69. 00:01:16
Introduction
Урок 70. 00:11:08
Routing
Урок 71. 00:10:44
Routing - Hands On Part 1
Урок 72. 00:12:04
Routing - Hands On Part 2
Урок 73. 00:03:35
Link and Redirect
Урок 74. 00:08:50
Link and Redirect - Hands On
Урок 75. 00:03:44
withRouter HOC
Урок 76. 00:03:04
History Library
Урок 77. 00:04:36
History - Hands On
Урок 78. 00:06:47
Assignment Solution (Optional)
Урок 79. 00:01:47
Summary
Урок 80. 00:10:29
Introduction
Урок 81. 00:13:48
Create & Access Store - Hands On
Урок 82. 00:06:33
Dispatch Action - Hands On
Урок 83. 00:01:39
Combine Reducers
Урок 84. 00:07:51
Combine Reducers - Hands On
Урок 85. 00:01:49
Middleware
Урок 86. 00:10:10
Middleware - Hands On
Урок 87. 00:07:55
Middleware Typescript - Hands On Part 1
Урок 88. 00:10:08
Middleware Typescript - Hands On Part 2
Урок 89. 00:06:13
Reselect
Урок 90. 00:03:05
Redux Devtools
Урок 91. 00:16:37
Assignment Solution (Optional)
Урок 92. 00:03:08
Summary
Урок 93. 00:04:31
Introduction
Урок 94. 00:06:40
Setup Environment
Урок 95. 00:07:38
Apply Server-side Rendering
Урок 96. 00:06:17
Add Redux in Server
Урок 97. 00:01:24
Summary
Урок 98. 00:03:05
Ecom Shop Overview
Урок 99. 00:07:51
Let's setup our environment
Урок 100. 00:08:22
Create initial pages
Урок 101. 00:07:09
Add Some Navigations!
Урок 102. 00:06:07
Decorate our Home Page! Cover Image & Shop Quality
Урок 103. 00:09:21
More decoration for Home Page! Best Seller & Partners
Урок 104. 00:13:43
Setup our Redux
Урок 105. 00:02:43
Redux Saga Overview
Урок 106. 00:14:16
Use Redux Saga as our Middleware
Урок 107. 00:03:06
Monitor our Redux, Let's add Redux Devtools!
Урок 108. 00:09:24
Show some products in All Products Page
Урок 109. 00:05:52
API Changes. Backend Developers are here!
Урок 110. 00:21:44
Let's Refactor our Code!
Урок 111. 00:17:13
Connect Best Seller to Redux
Урок 112. 00:19:37
Refactor Code & Add Filters Data
Урок 113. 00:08:14
Create reusable Checkbox Component!
Урок 114. 00:08:29
Add Sidebar Component UI
Урок 115. 00:24:07
Use Filters and Update Products List
Урок 116. 00:07:51
Pagination Overview & Button Component
Урок 117. 00:16:07
Create Initial Pagination Component
Урок 118. 00:11:10
Update Redux for Pagination
Урок 119. 00:14:56
Let's finish Pagination Feature!
Урок 120. 00:10:01
Reusable Modal Component
Урок 121. 00:15:10
Initial Product Card Modal Component
Урок 122. 00:16:06
Refactor our Product Card/Modal Components
Урок 123. 00:22:55
Complete our Product Card Modal UI
Урок 124. 00:10:34
Refactor our Product Card Modal UI
Урок 125. 00:22:00
Add Quantity and Select Variants in Product Card Modal
Урок 126. 00:08:40
Add To Cart!
Урок 127. 00:05:15
Cart Items Notification
Урок 128. 00:24:20
Reusable Popover Component
Урок 129. 00:10:20
Enhance Popover for our Cart Use Case
Урок 130. 00:18:23
Complete our Cart Component!
Урок 131. 00:21:03
Show Products in Checkout Page!
Урок 132. 00:05:56
Reusable Input Component
Урок 133. 00:13:53
Customers, please input your details!
Урок 134. 00:21:02
Add Functionalities to Customer Information UI
Урок 135. 00:04:49
Refactor our APIs
Урок 136. 00:13:56
Let's complete customer's purchase!
Урок 137. 00:19:25
Let's add some Themes in our Shop
Урок 138. 00:04:51
Refactor UI to change Theme
Урок 139. 00:08:13
Apply Code Splitting
Урок 140. 00:20:51
Make this a Universal App!
Урок 141. 00:10:46
Complete Server-side Rendering Implementation
Урок 142. 00:06:47
It's now in your hands
Урок 143. 00:04:04
Introduction
Урок 144. 00:08:51
add state to functional component, useState Hook!
Урок 145. 00:08:28
Lifecycle? Let's use useEffect hook
Урок 146. 00:07:43
useLayoutEffect vs useEffect
Урок 147. 00:13:16
Memoization? useCallback and useMemo are here
Урок 148. 00:08:13
Refs? useRef hook is here
Урок 149. 00:06:46
Override ref properties? useImperativeHandle hook
Урок 150. 00:08:20
Want to be creative? Let's create a Custom Hook
Урок 151. 00:02:24
useContext hook to access our Context
Урок 152. 00:14:13
Complex state logic? useReducer Hook is here!
Урок 153. 00:15:24
Using Redux? We have React-Redux Hooks
Урок 154. 00:07:20
Debugging? Use useDebugValue hook!
Урок 155. 00:09:03
Summary
Урок 156. 00:00:28
Introduction
Урок 157. 00:06:22
Convert Pagination Component
Урок 158. 00:04:57
Convert Modal Component
Урок 159. 00:12:53
Convert Popover Component
Урок 160. 00:13:34
Convert All Products Page
Урок 161. 00:12:38
Refactor & Optimization
Урок 162. 00:14:30
Convert Customer Information Component
Урок 163. 00:01:03
It is now in your hands!

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии