Главная страницаКатегория react.js30+ проектов на React. Изучите React JS, создав более 30 веб-приложений

30+ проектов на React. Изучите React JS, создав более 30 веб-приложений

Name: 30+ проектов на React. Изучите React JS, создав более 30 веб-приложений
Price: 12.5 USD
Rating: 4.3 (15 reviews)

30+ React Projects, Learn React JS by Building 30+ Web Apps

udemy

★4.3 (всего оценок - 15)

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

13 ч 12 мин

Категория

React.js

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

161 Видео

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

23 дек. 2023 г., 21:42

Язык

Английский

Дата выхода

20 июл. 2023 г., 01:00

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

29 апр. 2026 г., 19:30

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

Что представляет собой курс

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

Основной фокус на функциональных компонентах

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

Что вы изучите

Работу с ключевыми хуками: useState, useEffect, useRef, useContext и другими.
Построение многократно используемых компонентов для ускорения разработки будущих проектов.
Подключение и использование популярных npm‑библиотек внутри React‑приложений.
Управление состоянием, обработку событий, рендеринг списков, работу с формами.
Организацию структуры проекта и базовые принципы архитектуры фронтенда.

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

Вы создадите более 30 приложений — от небольших интерактивных виджетов до полноценных веб‑инструментов. Такой подход позволит закрепить знания и сформировать портфолио, полезное при поиске работы.

Примеры создаваемых проектов

Менеджер задач
Галерея изображений с API
Приложение для заметок
Конвертер валют
Система фильтрации и сортировки данных
React‑игры и мини‑утилиты

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

Курс будет полезен:

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

Почему стоит пройти курс

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

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

Урок 1. 00:02:18
Introduction
Урок 2. 00:07:25
Setting up the React Development Env.
Урок 3. 00:01:06
Project overview
Урок 4. 00:09:45
Create Title component and general styling in React
Урок 5. 00:06:09
Learn how useState works and manipulate name and date
Урок 6. 00:00:50
Project overview
Урок 7. 00:12:21
Using events and functions
Урок 8. 00:00:41
Project overview
Урок 9. 00:05:24
Card design
Урок 10. 00:07:17
Install and use React Icons to the project
Урок 11. 00:05:42
React useState to like on click and double Click
Урок 12. 00:00:56
Project overview
Урок 13. 00:07:36
Create a React Button components
Урок 14. 00:11:21
Get Post/Users/Comments using React useState and useEffect Hooks
Урок 15. 00:01:02
Project overview
Урок 16. 00:07:16
Create a Alert component
Урок 17. 00:02:56
Automatically close alert with delay using time trigger
Урок 18. 00:00:59
Project overview
Урок 19. 00:04:42
Design the Controller component
Урок 20. 00:03:29
Change temperature using the React useState Hook
Урок 21. 00:01:00
Project overview
Урок 22. 00:06:12
Create a Blog component
Урок 23. 00:14:09
Dark mode using useContext
Урок 24. 00:00:31
Project overview
Урок 25. 00:09:01
Create the UI
Урок 26. 00:04:58
Create Lock screen
Урок 27. 00:04:07
Creating the Lock screen state
Урок 28. 00:03:08
Lock the screen
Урок 29. 00:04:28
Toggle Lock and Unlock Screen
Урок 30. 00:00:42
Project overview
Урок 31. 00:05:40
Create the Slider Component
Урок 32. 00:08:24
useState hook to manipulate the Circle using the slider Component
Урок 33. 00:00:49
Project overview
Урок 34. 00:08:46
Create the search component and general styling
Урок 35. 00:09:27
Show search bar
Урок 36. 00:05:49
Auto focus on the input using useRef Hook
Урок 37. 00:00:51
Project overview
Урок 38. 00:09:13
Create a Popup component
Урок 39. 00:06:19
Trigger a popup and close it
Урок 40. 00:06:45
Time Triggered popup
Урок 41. 00:00:52
Project overview
Урок 42. 00:05:50
Ui design and input outo focus with useRef and useEffect
Урок 43. 00:07:24
Create a Progressbar component
Урок 44. 00:04:18
Add multiple Progress Bars using map method
Урок 45. 00:04:07
Manipulate each Progress bars data with useState
Урок 46. 00:02:22
Random Progress Bar data with useEffect
Урок 47. 00:00:52
Project overview
Урок 48. 00:06:27
Dialog Box component UI design
Урок 49. 00:08:07
Hello Dialog Box component
Урок 50. 00:06:53
Unsubscribe Dialog Box component
Урок 51. 00:05:23
Bounce animation effect
Урок 52. 00:01:36
Project overview
Урок 53. 00:04:31
UI design and Autofocus using useRef and useEffect
Урок 54. 00:03:13
Import data from JSON file
Урок 55. 00:07:50
Create a Contact component
Урок 56. 00:03:27
Filer contacts
Урок 57. 00:01:23
Project overview
Урок 58. 00:05:45
Form Ui
Урок 59. 00:07:18
Handle inputs and Registrations
Урок 60. 00:03:22
Input fields individual validation
Урок 61. 00:05:17
Form Submission and Validation
Урок 62. 00:01:43
Project overview
Урок 63. 00:03:52
App UI design
Урок 64. 00:09:14
Install and use React Styled Components
Урок 65. 00:06:23
Add New Note
Урок 66. 00:02:12
Delete Note
Урок 67. 00:03:50
Create Random Note types
Урок 68. 00:00:55
Project overview
Урок 69. 00:03:34
Create a nav component
Урок 70. 00:02:42
Create a Nav Item component
Урок 71. 00:06:22
Style the Nav using React Styled Components
Урок 72. 00:05:55
Show and Hide the navbar using React useState and useEffect
Урок 73. 00:03:59
Open and Close the Navbar using React useState and useEffec
Урок 74. 00:04:40
Show Active nav item and change page title using React useState
Урок 75. 00:11:23
UPDATE - Adding pages to navigate to
Урок 76. 00:01:57
Project overview
Урок 77. 00:03:59
Form UI style
Урок 78. 00:04:55
Create a React FormGroup Component
Урок 79. 00:01:42
Working with the form group component
Урок 80. 00:08:07
Install and use Animated Text component
Урок 81. 00:01:59
Clear and Refocus the input field
Урок 82. 00:01:40
Project overview
Урок 83. 00:06:30
UI Design using FormGroup Components
Урок 84. 00:03:34
Get values using useState hook
Урок 85. 00:05:57
Create a component to calc the interest
Урок 86. 00:03:48
Calc the compounded interest
Урок 87. 00:01:00
Project overview
Урок 88. 00:06:31
Design the Space ENV
Урок 89. 00:03:48
Space ship component
Урок 90. 00:04:05
Earth and Moon Components
Урок 91. 00:04:51
Launch and Land the Ship
Урок 92. 00:04:17
Change the Spaceship in to a Penguin
Урок 93. 00:01:22
Project overview
Урок 94. 00:02:50
Planing the components layout for the UI
Урок 95. 00:09:17
Task tracker style using Styled components
Урок 96. 00:07:32
Input Task Component
Урок 97. 00:08:12
Create and Add a New Task
Урок 98. 00:07:14
Complete and Delete Task
Урок 99. 00:00:49
Project overview
Урок 100. 00:07:35
Design the Start Menu
Урок 101. 00:16:03
Create Units Card Component
Урок 102. 00:00:50
Project overview
Урок 103. 00:06:47
UI planning and Design using Components
Урок 104. 00:07:42
Login Container design using Styled Components
Урок 105. 00:14:18
Animate using Styled Components
Урок 106. 00:01:19
Project overview
Урок 107. 00:04:13
Phone Book main UI
Урок 108. 00:08:05
Create a Contact React Components
Урок 109. 00:04:56
Create a Contact List React Components
Урок 110. 00:05:14
Display all contacts from the Contacts Database
Урок 111. 00:05:11
Create the Toggle Search and Filter Contacts Components
Урок 112. 00:03:43
Sort Contact A-Z and Z-A
Урок 113. 00:04:10
Search contact
Урок 114. 00:03:43
Project overview
Урок 115. 00:07:43
Components Planing
Урок 116. 00:06:48
Create a Expenses Form Component
Урок 117. 00:04:29
Create a Expenses List Component
Урок 118. 00:10:12
Create a List Item Component
Урок 119. 00:05:19
Style the budget using Styled components
Урок 120. 00:03:26
Add state to all components
Урок 121. 00:03:37
Add budget using useState , useEffect and useRef
Урок 122. 00:02:03
Save and Load data from Local Storage
Урок 123. 00:03:41
Handle all input and submission
Урок 124. 00:05:59
Add unique Id
Урок 125. 00:07:21
Display all expenses
Урок 126. 00:01:54
Clear local storage and add new expenses
Урок 127. 00:02:28
Handle Clear all expenses from storage and UI
Урок 128. 00:03:01
Handle Delete one expense from storage and UI
Урок 129. 00:07:44
Handle Edit one expense from storage and UI
Урок 130. 00:02:59
Calculate the total expenses and economies
Урок 131. 00:07:56
Add Alerts
Урок 132. 00:02:06
Project overview
Урок 133. 00:08:27
Main component and Ui design
Урок 134. 00:04:17
Add State to all components
Урок 135. 00:03:10
Calculate the Loan Amount
Урок 136. 00:04:51
Calculate monthly payments
Урок 137. 00:03:32
Display monthly payments and Alerts
Урок 138. 00:01:24
Project overview
Урок 139. 00:04:51
Project structure and UI design
Урок 140. 00:03:03
Create the Courses component
Урок 141. 00:04:26
Create a Course component and design
Урок 142. 00:06:25
Create a Database for all Courses
Урок 143. 00:05:11
Currencies Database and converter Buttons
Урок 144. 00:04:16
Convert the Currencies with the React useContext Hook
Урок 145. 00:03:03
Change Course appearance depending on its currency
Урок 146. 00:00:53
Project overview
Урок 147. 00:05:18
Ui design
Урок 148. 00:04:28
Form Wrapper and Shake animation
Урок 149. 00:03:04
Authentication container
Урок 150. 00:06:00
Authentication status using context
Урок 151. 00:05:22
Authentication User name and password
Урок 152. 00:05:41
Authentication Login Logout and Try again
Урок 153. 00:00:45
Project overview
Урок 154. 00:03:59
UI Structure and main component
Урок 155. 00:06:53
Speech Narrator UI Component
Урок 156. 00:07:04
Text splitter and Highlighted Text
Урок 157. 00:08:06
Start Pause and Rate
Урок 158. 00:01:47
Project overview
Урок 159. 00:06:14
Ui
Урок 160. 00:06:10
Get post
Урок 161. 00:02:55
Implement Lazy load

Автор - udemy

udemy

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

+198