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).