React Clone WhatsApp (w/ React Router, React Hooks) 2021

This course was recorded in French but is subtitled in English.

It's been a long time since you tried to create your Social Network but you do not know where to start?

Well in this training I'll show you how to create a copy of WhatsApp Web.

Did you know that currently the official version of WhastApp Web is built with React and Styled Component?

React is an open source JavaScript framework maintained by Facebook. It allows you to create single page web applications, by creating components.

Styled-component is a javascript library that allows you to increase productivity and facilitate the creation of React visual components (UI components) by writing css code in a javascript file.

You've probably heard it said that in order to progress as a developer (programmer) you have to train on real projects and try to clone (reproduce), with your own code, the applications that you like.

That's how I got into the crazy idea of ​​cloning WhatsApp Web with React and Styled Component. I was quickly stuck with a problem ... With React and Styled Component on the front-end it was the best but the problem is that WhatsApp is an instant messaging system, which means that messages have to arrive in real time. Something that is not easy to implement with javascript (socket) when you want to create an application of the size of WhastApp.

That's when I thought of Meteor which is in short a FullStack Javascript Framework that allows you to create real-time applications. It was a challenge for me, and once I was successful I was so happy that I told myself to share this with the Francophone community.

That's why I created this course which will allow you to create a copy of WhatsApp Web with your own codes. You can even be inspired by this to create your own version of WhatsApp.

I am Julien, web developer and author of the bestseller Ionic 4 - Create a Shopping Application. I love JavaScript and its Frameworks / libraries. I am particularly proficient in JQuery, TypeScript, Angular, Ionic, React, React Native, Meteor, Electron, NodeJs etc. And I have learned from experience that it is easier to learn to program with a project that we like. This is why this course is project oriented. We will learn how to build React web apps in real time by creating a copy (a clone) of WhasApp Web. Thanks also to Meteor, TypeScript, React Hooks and Styled Component. This is a unique opportunity for you. And it doesn't matter if you don't know Meteor or React Hooks or Styled Component because I will explain all of that to you in the training appendix.

"At the root of all success, there is the fact of having dared". So believe in yourself and you will arrive. For my part, I am committed to supporting you and responding to your concerns throughout the course.

Thanks to Udemy, this course is guaranteed satisfied or refunded for 30 days and without any conditions. If you don't like the course, it's easy, we'll reimburse you. So sign up now.

This training will allow you to:

• Create a copy (a clone) of WhatsApp web, which will allow you to impress recruiters to get the job of your dreams;

• Use React and Meteor together which will allow you to create web applications with real time communication;

• To familiarize yourself with React Hooks and Styled Components which will allow you to create flexible and dynamic web designs to create your own social network;

• Code in TypeScript instead of basic JavaScript when working with React and Meteor, which will allow you to add a touch of security when programming;

• Use the publications / subscription and the Methods in Meteor to secure your application;

• Use Tracker and withTracker to set up responsive programming, which will allow you to implement real time in less than 20 seconds for your entire application;

• Filter Meteor collections, which will allow you, for example, to implement a user search system;

• Use the Meteor ostrio:file package, which will allow you to set up a file upload system (images) for your application;

• To master useState and useEffect which will allow you to create controlled inputs and update the DOM reactively;

• Use styled components to add style to your components which will allow you to create dynamic styles and themes;

• Use the moment javascript library to create and manipulate dates which will allow you to more easily manipulate and manage timezones and date formats according to your needs;

• To use the Moment Component made available to us by react-moment, which will allow you to display the dates that have been created from the moment library;

• Use the react-flip-move which will allow you in 3 clicks to animate your lists each time an item is added or deleted. To enrich your design for a professional look;

• Using react-fontawesome which will allow you to display FontAwesome icons in a React component;

"What would you do if you weren't afraid? " Mark Zuckerberg

So wait no longer, click the button and register now and we'll meet on the other side to get started. Welcome to this React training.

P.S .: If you already have the basics, start directly with the introduction section.