К содержанию

Tutoriel principal React

Tutoriel sur le framework JavaScript React. Pour les débutants. Beaucoup de théorie et de problèmes.

Уроки

Introduction au framework React

Installation du framework React

Connexion du plugin react-devtools

Introduction à l'approche composant dans React

Maquette du site du framework React

Résultat du travail d'un composant

Langage JSX

Introduction au langage JSX dans React

Retour de balises JSX imbriquées par des fonctions

Règles de retour d'une fonction lors de la descente d'une balise en JSX

Particularités du retour de plusieurs balises en JSX

Retour d'une balise JSX non fermée

Retour d'une balise vide par une fonction en JSX

Insertion de valeurs de variables et constantes dans JSX

Nuances lors de l'insertion de valeurs de variables

Insertion de tableaux dans JSX

Insertion d'objets dans JSX

Insertion de variables et constantes dans les attributs des balises en JSX

Stockage des balises dans les variables et constantes JSX

Particularités du stockage de plusieurs balises dans les constantes JSX

Balises sur des lignes différentes en JSX

Retour de balises via return en JSX

Fermeture des balises JSX

Correction du balisage dans React

Exécution de code JavaScript

Conditions

Application de conditions en JSX

Affichage conditionnel dans React

Conditions pour retourner un tag en JSX

Opérateur ternaire dans JSX

Utilisation de l'opérateur && en JSX

Inversion pour les conditions raccourcies en JSX

Fonctions

Utilisation des fonctions dans React

Appel de fonctions dans les balises en React

Gestion des événements en JSX

Paramètres dans une fonction JSX

L'objet Event dans React

L'objet Event lors de la transmission de paramètres

Formation des balises

Balises dans les tableaux JSX

Formation d'un tableau de balises dans une boucle React

Génération de balises à partir d'un tableau de données dans React

Clés uniques dans un tableau de balises en React

Affichage d'un tableau d'objets dans React

Clés uniques via id dans React

Affichage d'un tableau d'objets sous forme de tableau HTML dans React

Identifiants uniques

Discussion des identifiants uniques dans React

Problèmes avec les nouveaux id dans React

Chaînes aléatoires pour les id dans React

Génération d'id dans React

Fonction pour générer un id dans React

Utilisation de la fonction id dans React

Mauvaise utilisation de la fonction id dans React

États

Introduction aux états dans React

Utilisation des états dans React

Réactivité des états dans React

Valeur booléenne dans l'état dans React

Compteur avec les états dans React

Formulaires

Travailler avec les inputs dans React

Modification des données d'entrée lors de leur affichage dans React

Modification des données à l'aide d'une fonction dans React

Travailler avec plusieurs inputs dans React

Traitement des données de formulaire lors d'un clic sur un bouton dans React

Travailler avec textarea dans React

Travailler avec les checkbox dans React

Cases à cocher et rendu conditionnel dans React

Travailler avec select dans React

Éléments de sélection à partir d'un tableau dans React

Les attributs value dans les sélecteurs en React

Attributs value d'un sélecteur à partir d'un tableau dans React

Travailler avec les radio dans React

Valeurs par défaut dans React

Liaison des inputs à un tableau dans React

Liaison des champs de saisie à un objet dans React

Données

Réactivité des données dans React

Ajout réactif dans un tableau dans React

Opérations réactives sur les tableaux dans React

Ajout réactif dans un tableau d'objets dans React

Opérations réactives sur des tableaux d'objets dans React

Affichage réactif des données dans React

Composants

Introduction aux composants React

Utilisation des composants dans React

Plusieurs instances d'un composant dans React

Les props des composants dans React

Création de composants enfants dans React

Tableau pour créer des composants enfants dans React

Composants enfants en boucle dans React

Transmission des états aux composants enfants dans React

Passer l'id à un composant dans React

Modification de l'état du parent dans un composant enfant dans React

Modification de l'état parent dans un composant enfant dans React

Édition de l'état dans un composant petit-fils dans React

Modes de fonctionnement via les états des composants enfants dans React

Concepts

Concepts de React lors du travail avec des composants

Les données des composants dans React

Types de composants dans React

Flux de données unidirectionnel dans React

Remontée d'état dans React

Une source unique de vérité dans React

Stylisation

Méthodes de stylisation des composants React

Utilisation du CSS global pour le style dans React

Insertion de données dans l'attribut style à partir d'un objet en React

Insertion de données dans l'attribut style à partir d'un fichier séparé dans React

Travailler avec les styles CSS dans l'attribut style dans React

Insertion de données dans l'attribut style à partir de variables dans React

Stylisation avec Styled Components dans React

Utilisation des Props avec Styled Components dans React

Utilisation des props dans le rendu conditionnel avec Styled Components dans React

Stylisation avancée des composants dans React

Début de l'apprentissage de la stylisation avec les CSS modules dans React

Poursuite de l'étude de la stylisation avec les modules CSS React

La règle composes pour les classes dans les CSS modules avec React

La commande composes pour les fichiers dans les modules CSS dans React

Projets

Projet Checklist en React

Projet Bloc-notes en React