Quels sujets seront couverts dans le cours ?
Introduction aux bases de React
Introduction au cours React:
Mots d'ouverture.
Qu'est-ce que React et un peu sur l'histoire de la bibliothèque.
Accent sur le travail avec un système de base de code.
Composant React de base:
Apprendre ce qu'est JSX dans React.
Comment écrire un premier composant de base.
Construire un composant avec des données statiques et comprendre les bases.
Construire une liste avec des données dynamiques:
Construire des éléments de manière dynamique.
Utiliser les capacités de Array.prototype.map pour une construction dynamique.
Importer et exporter des composants à partir d'un fichier.
Construire un tableau avec des données dynamiques:
Structure du tableau et de ses composants en HTML.
Utiliser une boucle imbriquée pour construire un tableau.
Utiliser la fonction map de manière imbriquée.
Utiliser des données dynamiques à partir d'un fichier importé.
Styliser avec l'objet Style:
Comprendre la différence entre HTML et JSX.
Apprendre à styliser les éléments sur la page.
Pratiquer la construction d'éléments dynamiques de manière stimulante avec les styles appris.
Composants avec État et Événements
Intégrer des fichiers CSS dans React:
Incorporer le monde des styles comme une partie intégrante de la construction de composants.
Comprendre ce qu'est className et la différence entre HTML et JSX.
Incorporer un exercice complet de tout le matériel appris jusqu'à ce point dans le cours.
Mettre l'accent sur les règles CSS et comment elles s'intègrent dans notre système construit.
Intégrer les Props dans les composants:
Que sont les props dans React et quand les utiliser.
Construire des composants avec des props et des méthodes d'écriture courantes.
Utiliser des composants que nous avons écrits dans la construction dynamique.
Construire un tableau avec des Props:
Construire un tableau en utilisant des props.
Créer un composant intelligent dans la construction de tableaux.
Combiner la construction dynamique avec plusieurs composants en utilisant des props et en stylisant avec CSS.
Utiliser les événements et useState:
Comment lier des événements de type onClick aux éléments.
Quels sont les composants intelligents et pourquoi nous en avons besoin.
Qu'est-ce que le hook react de type useState et comment l'utiliser.
Créer des conditions booléennes dans le JSX d'un composant.
Connecter la création d'événements et le stockage d'état pour construire des composants React intelligents.
Utiliser l'événement onChange:
Comment ajouter une entrée à la page et utiliser useState pour stocker les valeurs d'entrée.
Construire une liste dynamique avec des données saisies par l'utilisateur.
Explication approfondie des tableaux et la différence entre valeur et référence.
Comprendre comment travailler avec des tableaux stockés sur l'état du composant.
Sujets avancés et utilisation de l'API
Construire un tableau dynamique avec des événements:
Comprendre comment intégrer tout ce qui a été appris jusqu'à présent pour construire un tableau de manière dynamique.
Utiliser useState pour stocker un certain nombre d'entrées.
Exemple d'utilisation d'un état complexe avec un tableau d'objets.
Utiliser le hook useEffect:
Qu'est-ce que le hook react de type useEffect et comment et quand l'utiliser.
Réaliser une communication serveur en utilisant fetch.
Montrer des méthodes pour sécuriser notre code afin d'éviter des erreurs inutiles.
Construire un composant intelligent qui combine à la fois useState et useEffect hooks.
Exemple d'utilisation de useEffect dans la recherche côté serveur:
Explorer des utilisations supplémentaires pour useEffect.
Comprendre comment le cycle de vie du composant affecte notre mise en œuvre du code.
Présenter un exemple complexe d'utilisation de useEffect.
Utiliser des entrées supplémentaires:
Qu'est-ce qu'une entrée de type checkbox et comment l'utiliser.
Qu'est-ce qu'une entrée de type radio et comment l'utiliser.
Quels sont les entrées datetime et datetime-local et quand les utiliser.
Construire un tableau à partir de l'API avec filtrage des résultats:
Faire une demande d'API pour récupérer des données sur un tableau.
Construire le tableau de manière dynamique.
Apprendre à effectuer des recherches grâce à un filtrage intelligent des résultats.
Discuter de l'architecture du code.
Sujets avancés et architecture du code
Utiliser des filtres avancés:
Construire un tableau affichant des informations sur les vols.
Étendre l'utilisation du tableau avec un composant de ligne intelligent.
Utiliser des entrées pour construire des filtres pour le tableau, en utilisant des entrées de type checkbox, datetime et texte.
Bibliothèque Bulma pour un style avancé:
Apprendre à intégrer des styles prêts à l'emploi.
Utiliser le package bulma pour ajouter de la couleur et des styles aux projets React construits ensemble.
Intégrer des styles dans un composant existant et parcourir la documentation de la bibliothèque que nous utiliserons.
Trier dans JavaScript:
Améliorer un composant de tableau existant et ajouter des capacités de tri à celui-ci.
Compréhension approfondie du fonctionnement des tris sur des tableaux avec des nombres, des chaînes et des objets.
Voir comment s'occuper d'un tri spécial lorsque notre champ n'est pas une comparaison simple.
Canaux de communication entre composants:
Apprendre comment un composant enfant peut communiquer avec un composant parent.
Mettre en œuvre un style bulma sur plusieurs composants.
Construire un composant polyvalent qui nous permet d'intégrer des onglets dans l'application.
Voir des exemples d'utilisation de props de type fonction.
Conclusion