Introduction

Introduction

Bienvenue dans cette formation React.JS !


Vous avez fait un très bon choix car React.JS est une des technos les plus demandées et les plus valorisées dans l'industrie du développement logiciel, et d'ici la fin de cette formation vous pourrez sans souci candidater pour un poste de développeur React !


Dans cette formation, on va couvrir React de A à Z, en apprenant tous les concepts de React et tous les cas d'utilisation concrets que vous verrez fréquemment dans des projets React, afin que vous soyez armés pour travailler sur des projets React concrets juste après la formation.

Qui suis-je ?


Je suis Vincent ANDRIEU, votre formateur pour ce cours React. Je ne vais pas trop m'étendre sur ma présentation car je ne suis pas ici pour parler de moi, alors je vais me contenter de vous rediriger sur mon site web pour ceux qui voudraient savoir qui je suis : https://vincentandrieu.fr, mais en résumé, je suis ingénieur informatique depuis 2008, et je travaille avec React depuis 2018.


Le projet fil rouge


Nous allons travailler sur un projet qui sera le fil rouge de la formation. En effet, apprendre la théorie sans jamais l'appliquer ne fonctionnera pas. Nous allons donc utiliser chaque concept que nous allons apprendre pour créer petit à petit notre projet.


Il s'agit d'un squelette de réseau social type Facebook.

Pourquoi un "squelette" d'application ?


Nous n'allons pas développer une interface complète de réseau social car notre but ici est de parcourir toutes les notions nécessaires à l'apprentissage de react. Si on faisait une interface complète nous aurions 2 inconvénients majeurs :


1. Nous passerions beaucoup de temps à développer des choses qui n'ont pas de rapport avec react. Par exemple, si j'implémente un upload d'image, je vais devoir ajouter du code javascript qui n'a rien à voir avec react et du code backend pour stocker l'image. De même, si je veux que l'interface soit très esthétique, je vais passer beaucoup de temps sur le CSS. 

Et cela a peu de chances de vous intéresser car soit vous connaissez déjà ces choses là, auquel cas cela va vous faire perdre votre temps, soit vous ne les connaissez pas et le peu que l'on verra ici ne serait pas suffisant pour vous former (il faudrait une formation complète backend ou css par exemple).


2. Nous développerions des dizaines et des dizaines de composants, nous verrions et reverrions donc chaque concept des dizaines de fois, ce qui rendrait la formation plus difficile à suivre (on n'a pas une leçon qui sert de référence pour un concept) et très répétitive. 

Nous allons donc simplement développer les parties nécessaires pour avoir un projet utilisable, qui tient la route, et qui nous permette d'étudier toutes les notions React possibles, mais nous n'irons pas au bout du développement car cela serait très chronophage, tout en n'apportant aucun concept supplémentaire.


100% frontend, pas de backend


Notre but est d'apprendre React. Dans la vraie vie, les applications front-end dialoguent avec des API pour lire et écrire des données. Nous verrons à la toute fin de la formation comment requêter des données depuis un backend, mais pendant la quasi totalité du développement de notre projet, nous utiliserons des données codées en dur afin de ne pas perdre de temps à mettre en place un back-end qui serait complètement hors sujet.


Le minimum de CSS


Nous ne ferons pas de CSS pendant une bonne partie de la formation, uniquement du React qui génère du HTML brut, afin de nous focaliser à 100% sur React sans être pollués par la mise en place de styles qui est assez chronophage. Une fois les concepts essentiels abordés, nous verrons comment ajouter le CSS puis nous continuerons de coder react et CSS en parallèle pour la suite.


C'est parti !

Devenir un PRO du React

Acheter maintenantEn savoir plus
  • Introduction
  • Rejoins le groupe Slack
  • Devenir un Pro du React.pdf

React.js : c'est quoi ? et pourquoi ?

  • Qu'est-ce que React.js et pourquoi l'utiliser ?
  • 📄 Version PDF

Avant de commencer...

  • Pré-requis : Le "JavaScript moderne"
  • Les bons outils
  • Mise en place de l'environnement de développement
  • 📄 Version PDF

Création du squelette de notre application React

  • Comprendre
  • Appliquer3
  • 📄 Version PDF

La structure de fichiers d'un projet React

  • Comprendre
  • 📄 Version PDF

Nettoyage du projet pour partir de zéro

  • Appliquer
  • 📄 Version PDF

Analyse du code react

  • Comprendre
  • Evaluer
  • Correction
  • 📄 Version PDF

JSX (Javascript Syntax eXtension)

  • Comprendre
  • Appliquer
  • Evaluer
  • Correction
  • 📄 Version PDF

Créer notre premier composant

  • Comprendre
  • Appliquer1
  • Evaluer
  • 📄 Version PDF

Les props

  • Comprendre
  • Appliquer
  • Evaluer
  • Correction
  • 📄 Version PDF

Aide-nous à améliorer cette formation 💡

  • Ton avis est précieux

Les props sous toutes les coutures

  • Appliquer
  • Evaluer
  • 📄 Version PDF1

Les props - attributs vs enfants

  • Comprendre
  • Appliquer
  • Evaluer
  • 📄 Version PDF

React Dev Tools

  • Appliquer
  • 📄 Version PDF

Générer une liste de composants

  • Comprendre
  • Appliquer2
  • Evaluer
  • 📄 Version PDF

Les événements

  • Comprendre
  • Appliquer
  • 📄 Version PDF

Le state et le hook useState

  • Comprendre
  • Appliquer
  • Evaluer
  • 📄 Version PDF

Supprimer un post (depuis le composant de plus haut niveau)

  • Appliquer
  • 📄 Version PDF

Modifier le state depuis un composant enfant

  • Comprendre
  • Appliquer
  • Evaluer
  • 📄 Version PDF

Le "props drilling" et le flux d'information

  • Comprendre
  • Appliquer
  • 📄 Version PDF

Implémenter un "empty state"

  • Comprendre
  • Appliquer
  • 📄 Version PDF

Ajouter un post : Créer le composant

  • Evaluer
  • Correction
  • 📄 Version PDF

Ajouter un post : Champs contrôlés VS non contrôlés

  • Comprendre
  • Appliquer
  • Evaluer
  • 📄 Version PDF

Ajouter un post : State Lifting

  • Comprendre
  • Appliquer
  • 📄 Version PDF

Ajouter un post : Finalisation

  • Appliquer
  • Evaluer
  • Correction
  • 📄 Version PDF

Le pattern &&

  • Comprendre
  • Appliquer
  • 📄 Version PDF

Posts avec images, photos de profils et heure du post

  • Appliquer1
  • 📄 Version PDF

Styler nos composants (CSS)

  • Comprendre
  • Appliquer
  • Pour aller plus loin
  • 📄 Version PDF
  • Projet avec CSS

Le hook useEffect

  • Comprendre
  • Appliquer
  • Evaluer
  • 📄 Version PDF

Les composants basés sur des classes

  • Comprendre
  • Appliquer
  • 📄 Version PDF

Les hooks

  • Comprendre
  • 📄 Version PDF

Custom hooks

  • Comprendre
  • Appliquer
  • 📄 Version PDF

Ajouter d'autres pages avec react router

  • Comprendre
  • Appliquer3
  • 📄 Version PDF

Passage de paramètres dans une URL

  • Appliquer
  • 📄 Version PDF

Mise en place d'une layout commune entre les différentes pages

  • Appliquer
  • Evaluer
  • 📄 Version PDF

Global State Management (redux, Context API)

  • Comprendre
  • Appliquer
  • 📄 Version PDF

Les hooks useMemo et useCallback

  • Appliquer
  • Pour aller plus loin
  • 📄 Version PDF

Récupérer des données backend depuis une API

  • Appliquer1
  • 📄 Version PDF

Déployer notre appli react en production

  • Appliquer
  • Evaluer
  • 📄 Version PDF

Conclusion

  • Conclusion1