React - Clone WhatsApp (+React Router, React Hooks) 2020

About React - Clone WhatsApp (+React Router, React Hooks) 2020

Ça fait longtemps que tu chercher à créer ton

Réseau Social

mais tu ne sais pas par où commencer ? Eh ben dans cette formation je te montre comment faire en créant une copie de

WhatsApp

Web

. Et après avoir fait le tour je t’assure qu’à l’heure actuelle cette formation est la seule qui traite du sujet en

Français

(sur Udemy). Sais-tu qu’actuellement la version officielle de

WhastApp

Web

est construite avec

React

et

Styled Component

?

React

est un framework JavaScript open source maintenue par

Facebook

. Il permet de créer des applications Web monopage (single page application), via la création de composants.

Styled-component

est une librairie javascript qui te permet de gagner en productivité et de faciliter la création de composants visuels (UI components) React en écrivant du code css dans un fichier javascript. Tu as surement déjà entendu dire que pour progresser en tant que développeur (programmeur) tu devais t’entrainer sur des projets réels et essayer de cloner (reproduire), avec tes propres codes, les applications qui te plaisent. C’est comme ça que je me suis lancé dans la folle idée de

cloner

WhatsApp Web

avec

React

et

Styled

Component

. J’ai été rapidement butté à un problème… Avec

React

et

Styled Component

coté Front-end c’était le top mais le problème est que

WhatsApp

est un système de

messagerie

instantanée

, ce qui veut dire que les messages doivent arriver en

temps réel

. Chose qui n’est pas simple à implémenter avec du javascript (

socket

) quand on veut créer une application de l’envergure de

WhastApp

. C’est alors que j’ai pensé à

Meteor

qui est en bref un Framework Javascript FullStack qui te permet de créer des applications en

temps réels

. C’était pour moi un challenge, et une fois que j’ai réussie j’étais tellement heureux que je me suis dit de partager cela avec la communauté francophone. Voilà pourquoi j’ai créé cette formation qui te permettra de

créer une copie de WhatsApp Web

avec tes propres codes. Tu pourras même t’inspirer de cela afin de

créer ta propre version de WhatsApp

. Je suis Julien, développeur web et auteur du

best-seller

_Ionic 4 – Créer une Application de Shopping_. J’adore Javascript et ses Frameworks / librairies. Je maîtrise notamment JQuery, TypeScript, Angular, Ionic, React, React Native, Meteor, Electron, NodeJs etc. Et j’ai appris avec expérience qu’il est plus facile d’apprendre à programmer grâce à un projet qui nous plait. Voilà pourquoi ce cours est

orienté projet

. Nous allons apprendre à créer des applications web

React

en

temps réel

en créant une

copie (un clone) de WhasApp Web

. Grâce aussi à

Meteor

,

TypeScript

,

React Hooks

et

Styled Component

. C’est pour toi alors une opportunité unique étant donné que c’est actuellement le seul tutoriel en français qui traite de ce sujet sur le net. Et ce n’est pas grave si tu ne connais pas Meteor ou React Hooks ou TypeScript ou encore Styled Component parce-que je vais t’expliquer tout ça dans l’annexe de la formation. «

_À l'origine de toute réussite, il y a le fait d'avoir osé_

». Alors crois en toi et tu arriveras. De mon côté je m’engage à t’accompagner et à répondre à tes préoccupations tout au long de la formation. Grace à Udemy, cette formation est

garantie satisfait ou remboursé pendant 30 jours

et cela sans aucune condition. Si le cours ne te plait pas, c’est simple, on te rembourse. Alors inscris-toi Maintenant. Cette formation te permettra de :

Créer une copie (un clone) de

WhatsApp web

, ce qui te permettra d’impressionner les recruteurs pour obtenir

le job de tes rêves

;

D’utiliser React et Meteor ensembles ce qui te permettra de créer des applications web avec communication en

temps réel

;

De te familiariser avec

React Hooks

et

Styled Components

ce qui te permettra de créer des web designs flexibles et dynamiques pour créer ton propre réseau social ;

De coder en

TypeScript

à la place du JavaScript basique lorsque tu travailles avec React et Meteor, ce qui te permettra d’ajouter une touche de sécurité lorsque tu programmes ;

D’utiliser les

publications/souscription

et les

Méthodes

dans Meteor afin de sécuriser ton application ;

D’utiliser

Tracker

et

withTracker

pour mettre en place la programmation réactive, ce qui te permettra d’implémenter le temps réel en moins de 20 secondes pour toute ton application ;

De filtrer les collections Meteor, ce qui te permettra par exemple d’implémenter un

système de recherche d’utilisateur

;

D’utiliser le paquet

Meteor ostrio:file

, ce qui te permettra de mettre en place pour ton application un système d’upload de fichiers (images) ;

De maitriser

useState

et

useEffect

ce qui te permettra de créer des champs contrôlés et de mettre à jour le DOM de façon réactive ;

D’utiliser

styled components

pour apporter du style à tes composants ce qui te permettra de créer des styles dynamiques et des thèmes ;

D’utiliser la librairie javascript

moment

pour créer et manipuler des dates ce qui te permettra de manipuler et de gérer plus facilement les timezones et les formats de date en fonction de tes besoins ;

D’utiliser le Composant

Moment

mis à notre disposition par

react-moment

, ce qui te permettra d’afficher les dates qui ont été créer à partir de la librairie moment ;

D’utiliser le

react-flip-move

ce qui te permettra en 3 clics d’animer tes listes à chaque fois qu’un élément y est ajouté ou supprimé. Afin d’enrichir ton design pour avoir un look professionnel ;

D’utiliser

react-fontawesome

ce qui te permettra d’afficher des icons FontAwesome dans un composant React ; «

_Que ferais-tu si tu n’avais pas peur ?_

» Mark _Zuckerberg_ Alors n’attends plus, clique sur le bouton et

inscris-toi maintenant

et on se retrouve de l’autre côté pour commencer.

Bienvenue dans cette formation React

. P.S.: Si tu as déjà les bases, commence directement par l'introduction (

Section 4

).