(French) React - Клонируем WhatsApp (+ React Router, React Hooks) 2020

Вы давно пытаетесь создать свою социальную сеть, но не знаете, с чего начать? В этом тренинге я покажу вам, как создать копию WhatsApp Web. И после экскурсии я уверяю вас, что на данный момент этот тренинг - единственный, который посвящен предмету на французском языке (на Udemy). Знаете ли вы, что в настоящее время официальная версия WhastApp Web построена с использованием React и Styled Component?

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

Styled-component - это библиотека javascript, которая позволяет повысить производительность и упростить создание визуальных компонентов React (компонентов пользовательского интерфейса) путем написания кода css в файле javascript.

Вы, наверное, слышали, что для того, чтобы развиваться как разработчик (программист), вы должны тренироваться на реальных проектах и пытаться клонировать (воспроизводить) своим собственным кодом приложения, которые вам нравятся.

Так я начал свою безумную идею клонирования WhatsApp Web с помощью React и Styled Component. Я быстро столкнулся с проблемой ...проблема в том, что WhatsApp - это система обмена мгновенными сообщениями, а это означает, что сообщения должны приходить в режиме реального времени. То, что непросто реализовать с помощью javascript (сокета), когда вы хотите создать приложение размером с WhastApp.

Тогда я подумал о Meteor, который вкратце представляет собой FullStack JavaScript Framework, позволяющий создавать приложения в реальном времени. Для меня это было проблемой, и когда я добился успеха, я был так счастлив, что сказал себе поделиться этим с франкоязычным сообществом.

Вот почему я создал этот тренинг, который позволит вам создать копию WhatsApp Web. Вы даже можете вдохновиться этим на создание собственной версии WhatsApp.

Этот тренинг позволит вам:

• Создать копию (клон) сети WhatsApp, которая позволит вам произвести впечатление на рекрутеров, чтобы получить работу своей мечты;
• Совместное использование React и Meteor, что позволит вам создавать веб-приложения с коммуникацией в реальном времени;
• Ознакомьтесь с React Hooks и Styled Components, которые позволят вам создавать гибкие и динамичные веб-дизайны для создания вашей собственной социальной сети;
• Писать на TypeScript вместо базового JavaScript при работе с React и Meteor, что позволит вам добавить немного безопасности при программировании;
• Используйте публикации / подписку и методы в Meteor для защиты вашего приложения;
• Используйте Tracker и withTracker для настройки адаптивного программирования, что позволит вам реализовать реальное время менее чем за 20 секунд для всего вашего приложения;
• Фильтрация коллекций Meteor, что позволит вам, например, реализовать систему поиска пользователей;
• Используйте пакет Meteor ostrio: file, который позволит вам настроить систему загрузки файлов (изображений) для вашего приложения;
• Освоить useState и useEffect, которые позволят вам создавать контролируемые поля и реактивно обновлять DOM;
• Используйте стилизованные компоненты, чтобы добавить стиль к вашим компонентам, который позволит вам создавать динамические стили и темы;
• Используйте javascript-библиотеку moment для создания дат и управления ими, что позволит вам более легко управлять часовыми поясами и форматами даты и управлять ими в соответствии с вашими потребностями;
• Использовать компонент Moment, доступный нам через response-moment, который позволит вам отображать даты, созданные с момента библиотеки;
• Используйте «react-flip-move», который позволит вам в 3 клика анимировать ваши списки каждый раз, когда элемент добавляется или удаляется, чтобы сделать ваш дизайн более профессиональным;
• react-fontawesome, который позволит вам отображать значки FontAwesome в компоненте React;