udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
(French) React - Клонируем WhatsApp (+ React Router, React Hooks) 2020
React - Clone WhatsApp (+React Router, React Hooks) 2020
★2.3 (всего оценок - 19)
Продолжительность
13 ч 25 мин
Категория
React.jsКоличество уроков
155 Видео
Дата добавления
15 дек. 2020 г., 21:55
Язык
Английский
Дата выхода
9 апр. 2020 г., 03:00
Дата обновления
29 апр. 2026 г., 09:06
Хотите научиться создавать полноценные веб‑приложения на React и одновременно прокачать навыки реального времени? Этот курс по клонированию WhatsApp Web станет для вас отличным практическим проектом: от интерфейса до обмена сообщениями «как в оригинале».
Что представляет собой этот тренинг
Курс посвящён созданию рабочего клона WhatsApp Web на связке React + React Router + React Hooks + Styled Components, а также интеграции с Meteor для реализации обмена сообщениями в реальном времени. Такой проект помогает уверенно освоить современные фронтенд‑технологии, улучшить понимание архитектуры компонентов и получить сильный кейс для портфолио.
Почему этот курс полезен
- Пошаговое создание полноценного функционального приложения.
- Разбор реальной задачи — реалтайм чат с авторизацией и загрузкой файлов.
- Работа с современным React и практическое применение Hooks.
- Отдельный фокус на стилизацию через Styled Components.
- Использование TypeScript для повышения надёжности кода.
Чему вы научитесь
После прохождения курса вы сможете уверенно создавать веб‑приложения, работающие в реальном времени, а также понимать, как устроена архитектура современных SPA.
Основные навыки и технологии
- React Hooks: useState, useEffect, управление состоянием и обновление DOM.
- React Router: организация навигации внутри SPA.
- Styled Components: создание динамических тем и гибких UI‑компонентов.
- TypeScript в связке с React и Meteor для типобезопасности.
Meteor и работа в реальном времени
Вы поймёте, как устроены публикации, подписки и методы в Meteor, и как они обеспечивают мгновенный обмен данными. Также научитесь:
- настраивать реактивное программирование с помощью Tracker и withTracker;
- фильтровать коллекции и реализовывать поиск пользователей;
- использовать пакет ostrio:files для загрузки изображений;
- добавлять анимацию списков через react-flip-move;
- работать с датами через moment и компонент Moment из response‑moment;
- встроить иконки с помощью react-fontawesome.
Для кого подходит этот курс
Курс будет особенно полезен:
- начинающим и продолжающим React‑разработчикам;
- тем, кто хочет освоить real‑time приложения;
- выпускникам курсов, которым нужен сильный проект в портфолио;
- фронтенд‑разработчикам, изучающим TypeScript или Meteor.
Почему проект WhatsApp Web — отличный выбор
Клонирование популярного приложения помогает лучше понять принципы архитектуры, улучшить навыки разработки и показать работодателям умение создавать сложные интерфейсы. Такой проект привлекает внимание рекрутеров и выделяет ваше портфолио среди других.
Итог
После завершения курса вы создадите собственный рабочий аналог WhatsApp Web и получите опыт, который напрямую применим в реальных проектах. Это отличный шаг к созданию собственных приложений или развитию карьеры фронтенд‑разработчика.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:13:211. Comment Utiliser useState
- Урок 2. 00:03:18Comment Utiliser useEffect
- Урок 3. 00:11:19Comment Créer Un Styled Component
- Урок 4. 00:01:34Comment Utiliser Les Variables
- Урок 5. 00:07:49Comment Créer Et Utiliser Un Thème
- Урок 6. 00:05:49C'est quoi Meteor
- Урок 7. 00:02:16Installation & Création
- Урок 8. 00:04:49Organisation
- Урок 9. 00:00:49L'essentiel à connaitre
- Урок 10. 00:13:09Comment Utiliser Les Templates
- Урок 11. 00:02:50Comment Utiliser Les Paquets
- Урок 12. 00:04:54Comment Utiliser Les Sessions
- Урок 13. 00:08:01Réactivité ou Programmation Réactive
- Урок 14. 00:16:04Comment Utiliser Les Collections
- Урок 15. 00:10:41Publication & Souscription
- Урок 16. 00:12:14Sécurité & Méthodes
- Урок 17. 00:06:31Comment Afficher un Composant React
- Урок 18. 00:07:58Comment Afficher une Liste avec React & Meteor
- Урок 19. 00:07:52Insérer un document dans Meteor à partir de React
- Урок 20. 00:03:25Supprimer un document à partir de React
- Урок 21. 00:03:43Comment Modifier un document à partir de React
- Урок 22. 00:03:23Brève Introduction
- Урок 23. 00:02:32Installation Des Outils Nécessaires
- Урок 24. 00:00:47Résumé De La section
- Урок 25. 00:02:19Introduction
- Урок 26. 00:02:25Cloner le Boilerplate
- Урок 27. 00:02:45Etape 1 Décomposer et Hiérarchiser Login
- Урок 28. 00:10:48Routes et Theme dans App
- Урок 29. 00:07:40Notre Composant FormLogin
- Урок 30. 00:03:53Notre Composant FormLogin (partie 2)
- Урок 31. 00:07:43Notre Composant RightImg
- Урок 32. 00:04:44Etape 2 Version Statique De Login
- Урок 33. 00:05:12Etapes 3 et 4 Ajouter Le State
- Урок 34. 00:02:26Etape 5 - Ajouter Le Flux De Données Inverses
- Урок 35. 00:03:17Quelques Mots Sur Accounts & Passwords
- Урок 36. 00:07:32Création D'utilisateurs Fictifs
- Урок 37. 00:05:35Création D'utilisateurs Fictifs (partie 2)
- Урок 38. 00:09:08Authentification
- Урок 39. 00:07:46Authentification (partie 2)
- Урок 40. 00:01:45Résumé De La Section
- Урок 41. 00:01:56Introduction
- Урок 42. 00:02:09Etape 1 - Décomposer & Hiérarchiser les Composants
- Урок 43. 00:03:04Notre Composant Left
- Урок 44. 00:03:44Notre Composant Right
- Урок 45. 00:05:34Afficher Left Et Right dans Main
- Урок 46. 00:09:28Notre Composant Header
- Урок 47. 00:11:27Notre Composant Header (partie 2)
- Урок 48. 00:06:59Notre Composant Status
- Урок 49. 00:04:56Notre Composant SearchBar
- Урок 50. 00:06:02Notre Composant ChatList
- Урок 51. 00:11:11Créer Des Chats Fictifs
- Урок 52. 00:03:28Notre Composant ChatList (suite)
- Урок 53. 00:06:24Notre Composant ChatItem
- Урок 54. 00:04:08ChatList Et ChatItem Ensembles
- Урок 55. 00:05:08ChatList Et ChatItem Ensembles (partie 2)
- Урок 56. 00:09:07Comment Récupérer La Liste Des Chats
- Урок 57. 00:03:00Comment Afficher La Liste Des Chats
- Урок 58. 00:08:47Comment Utiliser React Moment
- Урок 59. 00:01:14Résumé De La Section
- Урок 60. 00:02:20Introduction
- Урок 61. 00:02:08Etape 1 - Décomposer & Hiérarchiser Les Composants
- Урок 62. 00:05:20Notre Composant MessageView
- Урок 63. 00:06:35Comment Sélectionner Un Chat
- Урок 64. 00:07:00Comment Sélectionner Un Chat (partie 2)
- Урок 65. 00:04:36Afficher Le Header
- Урок 66. 00:05:39Notre Composant Footer
- Урок 67. 00:03:13Ajouter Le State à Footer
- Урок 68. 00:04:45Notre Composant MessageBox
- Урок 69. 00:10:25La Collection Messages
- Урок 70. 00:04:20Comment Afficher Les Messages
- Урок 71. 00:05:38Comment Afficher Les Messages (partie 2)
- Урок 72. 00:04:45Comment Afficher Les Messages (partie 3)
- Урок 73. 00:05:33Comment Afficher Les Messages (partie 4)
- Урок 74. 00:06:491ère Boucle Pour Afficher Dates
- Урок 75. 00:08:22Boucle Imbriquée Pour Afficher Les Messages
- Урок 76. 00:07:12Envoyer Un Message
- Урок 77. 00:05:28Comment Envoyer Un Message (partie 2)
- Урок 78. 00:10:20Comment Utiliser withTracker Pour Le Temps Réel
- Урок 79. 00:04:20Comment Scroller Automatiquement
- Урок 80. 00:03:54Comment Utiliser React Flip Move
- Урок 81. 00:04:20Trouver Et Afficher Le Dernier Message D'un Chat
- Урок 82. 00:05:04Trier (Classer) Les Chats
- Урок 83. 00:01:34Introduction
- Урок 84. 00:02:25Etape 1 - Décomposer Et Hiérarchiser Les Composants
- Урок 85. 00:03:05Notre Composant FABs
- Урок 86. 00:05:05Notre Composant FABItem
- Урок 87. 00:05:44Afficher Les FABItem Dans FABs
- Урок 88. 00:08:07Afficher FABs Avec Le State
- Урок 89. 00:04:41Sélectionner Un Fichier
- Урок 90. 00:03:10Sélectionner Un Fichier (partie 2)
- Урок 91. 00:08:05Notre Composant Modal
- Урок 92. 00:08:06Afficher Et Cacher Modal
- Урок 93. 00:06:30Afficher L'Image Sélectionnée Dans Modal
- Урок 94. 00:07:10La Collection Images
- Урок 95. 00:05:25Uploader Une Image
- Урок 96. 00:07:41Uploader Une Image (partie 2)
- Урок 97. 00:07:50Notre Composant MessageImage
- Урок 98. 00:10:45Envoyer Un Message De Type Image
- Урок 99. 00:07:24Envoyer Un Message De Type Image (partie 2)
- Урок 100. 00:03:35Corriger Le Contenu Du Dernier Message Image
- Урок 101. 00:01:00Résumé De La Section
- Урок 102. 00:01:08Introduction
- Урок 103. 00:01:24Décomposer et Hiérarchiser
- Урок 104. 00:04:45Notre Composant OtherProfile
- Урок 105. 00:03:18Afficher Le Header Dans OtherProfile
- Урок 106. 00:03:31Afficher L'Avatar Dans OtherProfile
- Урок 107. 00:05:21Notre Composant Actu
- Урок 108. 00:06:21Notre Composant ActuItem
- Урок 109. 00:09:11Afficher OtherProfile Dans Main
- Урок 110. 00:02:00Comment Fermer OtherProfile
- Урок 111. 00:05:35Ajuster Les Largeurs Dynamiquement
- Урок 112. 00:05:37Avoir Un Avatar Large Dynamiquement
- Урок 113. 00:01:20Introduction
- Урок 114. 00:01:57Décomposer Et Hiérarchiser
- Урок 115. 00:05:13Notre Composant LeftSide
- Урок 116. 00:03:12Notre Composant LSHeader
- Урок 117. 00:01:04Afficher L'Avatar
- Урок 118. 00:05:37Notre Composant LSForm
- Урок 119. 00:03:42Afficher Et Masquer LeftSide
- Урок 120. 00:03:17Écrire Dans Les Champs
- Урок 121. 00:06:52Rendre Les Champs Controllés
- Урок 122. 00:03:37Corriger L'Erreur
- Урок 123. 00:08:33Afficher Overlay Dans Avatar
- Урок 124. 00:07:55Mettre A Jour Photo De Profil
- Урок 125. 00:01:53Mettre A Jour Profil En Temps Réel
- Урок 126. 00:01:19Introduction
- Урок 127. 00:01:55Décomposer & Hiérarchiser
- Урок 128. 00:03:25Commencer La Version Statique
- Урок 129. 00:04:06Notre Composant UsersList
- Урок 130. 00:05:20Notre Composant UserItem
- Урок 131. 00:05:56Grouper Les Utilisateurs Par Ordre Alphabétique
- Урок 132. 00:04:18Grouper Les Utilisateurs Par Ordre Alphabétique (partie 2)
- Урок 133. 00:05:40Afficher UserItem dans UsersList
- Урок 134. 00:02:29Comment Fermer UsersList
- Урок 135. 00:06:31Comment Créer Une Nouvelle Discussion
- Урок 136. 00:08:56Corriger L'Erreur
- Урок 137. 00:01:02Introduction
- Урок 138. 00:01:11Décomposer et Hiérarchiser
- Урок 139. 00:02:20Notre Composant BigOverlay
- Урок 140. 00:04:25Version Statique de ImageViewer
- Урок 141. 00:09:00Afficher et Fermer imageViewer
- Урок 142. 00:00:45Introduction
- Урок 143. 00:00:57L'Heure Dans MessageImage
- Урок 144. 00:06:24Afficher Le Nombre De Messages Non Lus
- Урок 145. 00:06:50Afficher Le Nombre De Messages Non Lus (partie 2)
- Урок 146. 00:02:28Afficher Le Nombre De Messages Non Lus (partie 3)
- Урок 147. 00:01:35Afficher Le Favicon
- Урок 148. 00:06:28Rechercher Un Utilisateur
- Урок 149. 00:00:29Challenge #1
- Урок 150. 00:04:28Notre Composant Popup
- Урок 151. 00:05:26Afficher Popup
- Урок 152. 00:02:04Masquer Popup
- Урок 153. 00:09:27Supprimer Un Message Texte
- Урок 154. 00:03:20Supprimer Un Message Image
- Урок 155. 00:01:03Quelques Challenges
Внимание: Оригинальный язык - Французский, доступны субтитры на Английском.
Автор - udemy
Комментарии
most of the time the subtitle area will stay empty
Its russian site wtf heredo french