REACT Foundations

• Développeurs front-end
• Développeurs web
• Ingénieurs logiciels
• Professionnels techniques

• Configurer un environnement de développement React et créer une structure d'application initiale.
• Construire des éléments JSX pour créer des structures de composants React et gérer le contenu dynamique.
• Créer des composants React réutilisables en appliquant des modèles de composition.
• Implémenter des modèles de propriétés pour transmettre des données et des gestionnaires d'événements entre les composants.
• Utiliser des hooks d'état pour gérer les données des composants et traiter les interactions des utilisateurs.
• Intégrer des modèles de flux de données pour gérer la communication entre les composants et le partage d'état.
• Implémenter des modèles de composants conteneurs et de présentation pour organiser efficacement les applications React.
• Appliquer des styles à l'aide de modules CSS et de modèles d'organisation des styles.
• Utiliser le hook useEffect pour gérer les effets secondaires et les besoins du cycle de vie des composants.
• Construire des interfaces de formulaire à l'aide de modèles de formulaires contrôlés et non contrôlés.
• Utiliser les outils de développement React pour déboguer les problèmes liés aux composants et analyser les performances des applications.

1 Introduction à React

Qu'est-ce que React et son histoire ?

• Définition et différenciation
• Principaux avantages et cas d'utilisation
• Architecture basée sur des composants pour la création d'interfaces utilisateur

DOM virtuel

• Définition du DOM virtuel
• Comment React utilise le DOM virtuel (conceptuellement)
• Comparaison simple avec le développement web traditionnel
• Pourquoi cela est important pour les applications web modernes

Configuration du développement React

• Configuration de l'environnement de développement
• Démarrage rapide avec Create React App
• Outils de développement associés à React (React Developer Tools)

Structure du projet

• Génération de la première application React avec Create React App
• Structure des dossiers : organisation des composants et conventions de nommage des fichiers

2 JSX

Pour commencer

• Point d'entrée HTML (div racine)
• createRoot et render
• Structure de base d'un composant React avec JSX
• Comprendre la relation entre les fichiers

Principes fondamentaux

• Qu'est-ce que JSX et pourquoi l'utilise-t-on ?
• Règles de JSX (élément parent, balises de fermeture)

Écrire du JSX

• Syntaxe et attributs de base
• Ajouter des expressions JavaScript avec {}

Exploration des cas d'utilisation de JSX

• Variables et props
• Rendu conditionnel simple

3 Composants React

Notions de base sur les composants

• Qu'est-ce qu'un composant ?
• Créer votre premier composant
• JSX sur une seule ligne et sur plusieurs lignes dans un composant
• Importer et exporter des composants
• Rendu d'un composant

En savoir plus sur les composants React

• Logique dans un composant React
• Conditions dans un composant React
• Gérer les interactions utilisateur dans les composants

Composition des composants

• Intégrer des composants dans d'autres composants
• Réutiliser des composants
• Organisation des composants

4 Props

Notions de base sur les props

• Que sont les props ?
• Transmission de données aux composants
• Réception des props
• Types de props et valeurs par défaut
• Prop Children
• Rendu des props d'un composant
• Transmission des props d'un composant à un autre
• Rendu dynamique avec les props

Modèles de props plus complexes

• Transmission d'un gestionnaire d'événements en tant que prop
• Réception d'un gestionnaire d'événements en tant que prop
• Conventions de nommage des gestionnaires d'événements

5 État et événements

Comprendre l'état

• Qu'est-ce que l'état ?
• Composants « avec état »
• Quand utiliser l'état ?
• Quand ne pas utiliser l'état ?
• Principes de base du réaffichage des composants

Hook useState

• Qu'est-ce qu'un hook ?
• Initialisation de l'état
• Mises à jour de l'état
• Valeurs d'état multiples

Bref récapitulatif du contenu abordé lors du jour 1, axé sur la création de composants et l'état

1 Modèles de composants

Architecture des composants

• Composants conteneurs vs composants de présentation
• Quand séparer les composants
• Rendu des composants de présentation dans les conteneurs

Flux de données React

• Concept de flux de données unidirectionnel
• Modèles de communication parent/enfant
• Communication entre frères/sœurs
• Comprendre le prop drilling
• Lifting state up comme solution

2 Stylisme dans React

• CSS standard avec className
• Notions de base sur les modules CSS
• Organisation du stylisme
• Stylisme spécifique aux composants

3 Effets et cycle de vie

Utilisation des effets

• Que sont les effets secondaires dans React ?
• Pourquoi devons-nous gérer les effets ?
• Syntaxe de base et utilisation du hook useEffect
• Quand les effets s'exécutent-ils ?
• Dépendances des effets
• Qu'est-ce que le nettoyage d'un effet ?
• Comment écrire des fonctions de nettoyage ?

Cycles de vie

• Phases des composants (initialisation, mises à jour, nettoyage)
• Utilisation des effets pour les besoins du cycle de vie

4 Formulaires

Principes fondamentaux des formulaires

• Formulaires HTML vs formulaires React
• Les deux approches de React : contrôlé vs non contrôlé
• Quand utiliser chaque approche

Formulaires non contrôlés

• Hook useRef avec les formulaires
• Accéder aux valeurs saisies
• Créer un formulaire non contrôlé basique
• Gérer les événements de soumission
• Obtenir les valeurs du formulaire
• Cas d'utilisation des formulaires non contrôlés

Formulaires contrôlés

• Éléments de formulaire basiques
• useState avec des entrées uniques
• Gestion de plusieurs champs de formulaire
• Gestion de différents types d'entrée
• Gestion de la soumission du formulaire
• Empêcher le comportement par défaut
• Collecte des données du formulaire
• Validation de base
• États de réussite/d'erreur

5 Débogage des applications React

Outils de développement React

• Onglet Composants
• Inspection des props et de l'état
• Navigation dans l'arborescence des composants

Débogage des applications React

• Erreurs React courantes et solutions
  

Il s'agit d'un cours de niveau intermédiaire destiné à ceux qui souhaitent élargir leurs compétences et maîtriser REACT. Les apprenants doivent avoir une bonne maîtrise de JavaScript, HTML et CSS..

• GK840201 - Javascript - Les fondamentaux

Les participants réalisent un test d'évaluation des connaissances en amont et en aval de la formation pour valider les connaissances acquises pendant la formation.

Un support de cours officiel sera remis aux stagiaires au format électronique.

Pour profiter pleinement du support électronique dès le 1er jour, nous invitons les participants à se munir d'un PC ou d'une tablette, qu’ils pourront connecter en WiFi dans nos locaux de Rueil, Lyon ou nos agences en régions.