Les bons outils

Les bons outils

Le système d'exploitation


Vous pouvez suivre la formation sur n'importe quel système d'exploitation. Personnellement, je suis sur Mac OS, mais que vous soyez sur Windows ou Linux, vous pourrez suivre toutes les étapes de chaque chapitre sans que cela fasse la moindre différence, hormis peut-être la syntaxe de votre terminal sur Windows, mais nous n'allons quasiment pas l'utiliser.


Node.JS et npm


Node.JS est un environnement d'exécution Javascript habituellement utilisé pour développer des applications back-end. Or, React est du pur front-end. Alors pourquoi installer Node.JS ?


Nous n'allons pas faire de back-end.


Node.JS inclut le gestionnaire de packages JavaScript npm. Grâce à Node.JS et npm, nous allons pouvoir faire 2 choses qui vont nous faire gagner énormément de temps :


Utiliser le package "create-react-app" qui va créer tout le squelette de notre application en incluant le support de nombreux outils pré-configurés pour nous JSX, Babel, Webpack, etc.)


Installer n'importe quel autre package npm, ce qui va nous permettre d'intégrer des composants open-source dans notre application, et gérer les compatibilités de versions entre les dépendances. C'est exactement comme le gestionnaire de paquet composer pour PHP, gems pour Ruby ou pip pour Python.

L'IDE


Le choix de l'IDE (votre éditeur de code) vous appartient et vous pourrez suivre la formation avec votre IDE préféré. Si vous n'avez pas d'IDE sur votre poste, alors je vous recommande fortement l'utilisation du génial Visual Studio Code, à ne pas confondre avec Visual Studio (tout court), qui, lui, est plutôt adapté au développement .NET.

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