React.js pour les débutants
4.3 (283 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,505 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React.js pour les débutants to your Wishlist.

Add to Wishlist

React.js pour les débutants

Apprends React en créant 3 projets de A à Z (+ plein d'outils pour compléter Reactjs).
4.3 (283 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,505 students enrolled
Created by Anthony Welc
Last updated 12/2016
French
Current price: $50 Original price: $190 Discount: 74% off
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Créer une application ou un site React.js de A à Z.
  • Comprendre les Components React.js et écrire en JSX.
  • Créer et maintenir les States d'une application.
  • Faire passer des données entre plusieurs parties d'un site web.
  • Faire persister des données grâce au localStorage.
  • Stocker des informations dans une base de données avec Firebase.
  • Créer un code lisible et maintenable.
  • Naviguer d'une URL à une autre en utilisant React Router 4.
  • Coder plus efficacement grâce aux possibilités qu'offre ES6.
  • Lancer une application ou un site React.js sur le web.
  • Travailler avec create-react-app et Webpack.
  • Créer des animations dans React.js
View Curriculum
Requirements
  • Les bases de JavaScript (boucle, condition, fonction...).
  • Les bases du HTML et du CSS.
  • Etre capable de penser un peu différemment car React.js ne ressemble à rien de ce qu'on peut voir habituellement en développement web.
Description

*** La meilleure formation React en Français ! ***

...

Est-ce que tu cherches le meilleur moyen de construire des applications ou des sites web modernes ?

Tu as déjà essayé plein de cours sur React mais ils ne sont ni très clairs ni en français ?

Tu as envie de donner un bon coup d’accélérateur dans ton apprentissage de JavaScript ?

Cette formation est exactement ce qu'il te faut !

...

Quels sont les avantages de cette formation ?

Avantage 1 : Le cours est entièrement orienté autour de projets réels

Tu ne vas pas apprendre React comme dans une salle de classe. Je mets un point d'honneur à proposer des formations qui s'articulent autour de projets concrets.

Tu vas créer 3 applications de A à Z. Dans un ordre de difficulté crescendo. Comme ça, même si tu es un peu effrayé par React tu auras le temps de l'apprivoiser à ton rythme.

Tu pourras ensuite créer tous les projets de sites ou d'applications qui te passent par la tête.

Avantage 2 : Tu vas apprendre bien plus que simplement coder en React.js

Écrire des lignes de code c'est très bien, c'est la base. Mais ça ne suffit pas pour être complètement autonome sur tes projets. 

C'est pourquoi on va aller beaucoup plus loin que simplement coder. Ça inclut de créer des animations, mettre en place une base de données, créer un système d'authentification, gérer des routages d'URL, utiliser des lignes de commande, envoyer ton site sur un serveur web, coder avec les dernières fonctionnalités de JavaScript (ES6 et ES7)...

Avantage 3 : Dès que tu auras fini la formation tu auras en main 3 vraies applications

A la fin du cours tu auras 3 sites complets en ligne qui fonctionnent sur ordinateurs, tablettes et smartphones. 

Bien sur je te fournis tous les fichiers sources que j'ai divisé étape par étape pour que tu puisses suivre encore plus facilement.

Tu peux regarder la vidéo de présentation pour voir la démo des 3 projets que tu va créer.

Avantage 4 : J'ai tout fait pour rendre React.js fun

J'ai tourné plus de 150 tuto gratuits sur Youtube et j'ai appris à rendre un cours vivant. Non seulement on va coder côte à côte mais on va le faire en se faisant plaisir.

Toute la formation est structurée pour que tu progresses étape par étape même si tu es débutant (les plus avancés iront simplement plus vite).

...

Voici tout ce que tu vas recevoir en t'inscrivant à la formation :

  • Un accès à vie aux vidéos HD. Tu apprends au rythme qui te convient et d'où tu veux.
  • Toutes mes vidéos sont téléchargeables et légères. Tu peux te former même sans connexion internet, dans les transports par exemple.
  • Tu as accès à tous les fichiers sources. Tu peux te baser sur ce code comme point de départ pour tes futurs projets.

...

Commence à apprendre React en t'inscrivant tout de suite à la formation et crée ton premier projet.

On se retrouve dans la première vidéo !



Who is the target audience?
  • Toutes les personnes qui souhaitent mettre à jour leurs compétences de développement front-end.
  • Développeurs JavaScript débutants ou experts (les experts iront simplement plus vite).
  • Les utilisateurs de PHP et Wordpress qui veulent ajouter du dynamisme à leur site.
  • Les utilisateurs d'autres frameworks (Vue, Angular, Ember, Backbone) curieux de comprendre le fonctionnement de React.js.
  • Les développeurs jQuery qui veulent passer à la vitesse supérieure.
  • De manière générale n'importe qui souhaitant booster ses compétences en JavaScript.
Curriculum For This Course
38 Lectures
04:27:44
+
Introduction
3 Lectures 13:35
Fichiers à télécharger
00:07

Dans cette première session je te montre les outils dont tu auras besoin pour coder une application en React.

Preview 09:42

Dans React les Components sont très important. Ils représentent chaque partie de ton site. Dans Reactjs tout est un Component !

Preview 03:46
+
Projet 1 : l'Éditeur de Markdown
7 Lectures 43:53

Je te montre comment créer ton premier Component avec React.

Notre premier Component
04:34

En React on ne code pas directement en HTML, on utilise du JSX. C'est un langage spécifique à Reactjs qui ressemble au HTML avec quelques particularités.

Écrire du HTML avec JSX
06:49

React ce n'est que du JavaScript et parfois on a besoin d'importer des fichiers perso pour ajouter des fonctions ou des données.

Importer du JavaScript Perso
03:47

Les States dans React c'est toutes les données relatives à une partie de ton site. Par exemple dans notre Component App on stockera tous nos messages. Il est comme ça Reactjs, très organisé !

Utiliser les States
04:23

Dans React on ne modifie pas directement ce qui est affiché, on met à jour le State !

Modifier le State
05:04

On peut importer dans React d'autres librairies pour étendre ses fonctions. Ici on va importer Marked.js qui va nous permettre de convertir automatiquement du markdown en HTML !

Du Markdown avec Marked.js
08:00

Le localStorage est une option de HTML5. Il va nous permettre de stocker notre State React dans le navigateur de l'utilisateur. Comme ça il pourra reprendre son édition où il en était.

Sauvegarder le State avec le localStorage
11:16
+
Projet 2 : la Chat Box
14 Lectures 01:49:04

C'est partie pour mettre en place les bases notre chat en React !

Mise en place de la chatBox
08:10

Dans Reactjs le mieux c'est de séparer chaque partie de notre site en Component. L'application sera plus maintenable ainsi.

Séparer les Components
03:18

Dans cette session on crée tous les Components React dont on aura besoin !

Créer tous les Components
06:35

Comprendre les Props
02:29

On ne va pas gérer les URL avec le serveur mais directement avec React-Router.

Découvrir React Router
07:56

Dans React comme dans JavaScript on peut utiliser des Events (click, submit...)

Utiliser les Events
06:57

On va un peu plus loin avec React-Router pour router l'URL de la page de connexion à l'app.

Changer de page avec React Router
07:38

Dans cette session on va enregistrer ce que tape l'utilisateur dans notre State Reactjs.

Sauvegarder notre State
13:45

On va ajouter de petites fonctionnalités sympa à notre formulaire :

  • Affichage des caractères restant
  • Effacer le contenu du formulaire après soumission
Booster notre Formulaire
09:14

Grâce à React on enregistrer tous les messages envoyés dans notre State mais ce serait mieux de pouvoir les afficher.

Afficher notre State
06:57

Pour que nos messages soient accessibles depuis n'importe où il faut les enregistrer dans une base de données. On va donc lier React avec Firebase.

Synchroniser avec Firebase
07:43

On va limiter le nombre de message enregistré dans la base de données à 10.

Supprimer les données du State
03:22

Dans React on peut utiliser des animations grâce à ReactCSSTransitionGroup.

Créer des Animations CSS
19:39

Dans React on peut surveiller que les Props qu'on passe d'un Component à un autre soient correct. C'est très important pour déboguer le code.

Attention aux propTypes
05:21
+
Projet 3 : la Boîte à Recettes
10 Lectures 01:26:36

On revoit les bases pour gérer la page de connexion avec React.

Rafraîchissons-nous la mémoire
05:34

On met en place le Component Header avec Reactjs. Il va nous servir à afficher le pseudo de l'utilisateur en haut de l'application.

Création du Header
06:58

Pour que ce soit plus sympa je te donne une liste de recettes (délicieuses) à charger directement dans le State de l'application React.

Remplir le State d'un clic
06:28

Maintenant que notre State est plein de bonnes recettes on va pour voir faire une boucle dans le Render de Reactjs pour les afficher.

Afficher les recettes
11:31

Pour que les recettes soient de notre page soient accessible à n'importe qui sur la planète il nous faut synchroniser l'application React avec Firebase.

Synchroniser chaque boîte à recettes avec Firebase
07:15

Dans cette session on crée la fonction qui permet d'ajouter une recette dans notre App React.

Ajouter des recettes
12:22

Ajouter des recettes c'est bien mais React nous permet aussi de les modifier en temps réel.

Modifier les recettes
09:23

Finalement une recette n'est pas si bonne que ça, supprimons la !

Supprimer des recettes
03:27

Pour individualiser chaque page de recettes on va utiliser des systèmes d'authentification compatible avec Firebase.

Créer les app's Facebook et Twitter pour l'authentification
04:12

On met en place tout le système d'authentification dans notre application React avec les options que Firebase nous propose.

Mise en place du système d'authentification
19:26
+
Aller plus loin
4 Lectures 14:35

Notre application Reactjs est terminée on va la préparer à être envoyée sur le web. Au programme : suppression des commentaires et des espaces inutiles + fusion de tous les fichiers entre eux.

Préparer le projet à la mise en ligne (build)
03:08

Je vous montre comment envoyer ton App sur un serveur web et comment gérer le routage d'URL sur un serveur Apache.

Envoyer notre site sur le web
04:25

Maintenant que tu connais React tu vas pouvoir démarrer tes propres application de zéro.

Créer ta propre App'
04:09

Pour continuer d'apprendre régulièrement tu peux me retrouver sur YouTube où je poste des vidéos tous les jours du Lundi au Vendredi pour parler de développement web !

A bientôt et bonne continuation dans ton apprentissage !

Le mot de la fin
02:53
About the Instructor
Anthony Welc
4.4 Average rating
505 Reviews
2,421 Students
2 Courses
Formateur, Web Développeur

Je m’appelle Anthony WELC et j’essaie de rendre la création web accessible à tous les apprentis codeurs. J’ai tourné plus de 300 tutos sur YouTube.

Je code pour des startups essentiellement en JavaScript.

Mais ma vraie passion c’est d’animer ma petite communauté qui compte déjà plus de 20000 membres tous réseaux confondu.

J’espère pouvoir t’aider à aller plus loin et à réaliser tes projets ! A tout de suite dans la formation.