codequick-darkmode-logo
ConnexionS'inscrire
Cours de React

Syllabus:

Cours de React

20 Leçons 125 Questions de Codage en Ligne


Quels sujets seront couverts dans le cours ?

Introduction aux bases de React

  1. 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.

  1. 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.

  1. 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.

  1. 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é.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. Conclusion