Maîtrise de React

Contenu du cours

Maîtrise de React

Maîtrise de React

1. Introduction aux Fondamentaux de React

Qu'est-ce Que React?SPAs vs. MPAs dans le Développement Web Comment React Fonctionne Avec le DOM Virtuel Introduction à JSX dans React Créer des Éléments JSX Complexes Rendu des Éléments dans React Défi : Rendu d'Élément Composant React Props dans React Défi : Composants Fonctionnels Rendu Conditionnel Défi : Rendu Conditionnel - Notification de Chat Défi : Rendu Conditionnel - Alerte Bancaire Rendu d'une Collection de Données Défi : Rendre une Collection de Données Récapitulatif de la Section Introduction à React

2. Stylisation dans les Applications React

Introduction à la Stylisation dans React Styles en Ligne Styles en Ligne en Pratique Défi : Styles en Ligne Styliser avec le Fichier CSS Styliser avec le Fichier CSS en Pratique Défi : Styliser Avec le Fichier CSS Stylisation Avec Les Modules CSS Organisation de la Structure des Dossiers Défi : Modules CSS Résumé de la Section sur le Style dans React

3. Hooks et Contexte React

Introduction : Hooks et Contexte React Hook useState Défi : Basculer la Visibilité Hook useRef Défi : Créer un Composant de Formulaire Hook useEffect Défi : Récupération et Affichage des Données Hook useMemo Défi : Filtrage de la Liste de Voitures Contexte Contexte en Pratique Défi : Application du Monde de l'Astronomie Résumé de la Section sur les Hooks et le Contexte de React

4. React in the Real World

Configuration de l'Environnement Éditeur de Code Configuration du Dossier de Projet Terminal Démarrer et Exécuter un Projet React avec Vite Résumé de la Section React dans le Monde Réel

Défi : Styliser Avec le Fichier CSS

Tâche

Nous allons maintenant procéder à la création du composant Alert, qui rendra tous les éléments passés en tant qu'enfants et leur appliquera des styles spécifiques. La tâche est :

Créez le composant Alert qui contient l'élément div à l'intérieur.
L'élément div doit avoir le nom de classe alert.
L'élément div doit avoir la prop children comme contenu.
L'élément div doit avoir le CSS suivant.

padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;

Pour créer un élément div dans le composant, utilisez <div>...</div>.
Pour passer props.children comme contenu textuel, encadrez-le avec {...} et définissez props.children. Résultat : <div>{props.children}</div>.
Pour ajouter un nom de classe à l'élément div, utilisez l'attribut className et définissez-le sur alert. Résultat : className="alert".
Pour importer le fichier avec les styles dans le fichier index.js, utilisez l'instruction import et fournissez le chemin correct vers le fichier. Résultat : import './index.css'.
Pour appliquer des styles à l'élément div, utilisez le sélecteur de nom de classe .alert et insérez les styles de la tâche.

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 7

Demandez à l'IA

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Contenu du cours

Maîtrise de React

Maîtrise de React

1. Introduction aux Fondamentaux de React

Qu'est-ce Que React?SPAs vs. MPAs dans le Développement Web Comment React Fonctionne Avec le DOM Virtuel Introduction à JSX dans React Créer des Éléments JSX Complexes Rendu des Éléments dans React Défi : Rendu d'Élément Composant React Props dans React Défi : Composants Fonctionnels Rendu Conditionnel Défi : Rendu Conditionnel - Notification de Chat Défi : Rendu Conditionnel - Alerte Bancaire Rendu d'une Collection de Données Défi : Rendre une Collection de Données Récapitulatif de la Section Introduction à React

2. Stylisation dans les Applications React

Introduction à la Stylisation dans React Styles en Ligne Styles en Ligne en Pratique Défi : Styles en Ligne Styliser avec le Fichier CSS Styliser avec le Fichier CSS en Pratique Défi : Styliser Avec le Fichier CSS Stylisation Avec Les Modules CSS Organisation de la Structure des Dossiers Défi : Modules CSS Résumé de la Section sur le Style dans React

3. Hooks et Contexte React

Introduction : Hooks et Contexte React Hook useState Défi : Basculer la Visibilité Hook useRef Défi : Créer un Composant de Formulaire Hook useEffect Défi : Récupération et Affichage des Données Hook useMemo Défi : Filtrage de la Liste de Voitures Contexte Contexte en Pratique Défi : Application du Monde de l'Astronomie Résumé de la Section sur les Hooks et le Contexte de React

4. React in the Real World

Configuration de l'Environnement Éditeur de Code Configuration du Dossier de Projet Terminal Démarrer et Exécuter un Projet React avec Vite Résumé de la Section React dans le Monde Réel

Défi : Styliser Avec le Fichier CSS

Tâche

Nous allons maintenant procéder à la création du composant Alert, qui rendra tous les éléments passés en tant qu'enfants et leur appliquera des styles spécifiques. La tâche est :

Créez le composant Alert qui contient l'élément div à l'intérieur.
L'élément div doit avoir le nom de classe alert.
L'élément div doit avoir la prop children comme contenu.
L'élément div doit avoir le CSS suivant.

padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;

Pour créer un élément div dans le composant, utilisez <div>...</div>.
Pour passer props.children comme contenu textuel, encadrez-le avec {...} et définissez props.children. Résultat : <div>{props.children}</div>.
Pour ajouter un nom de classe à l'élément div, utilisez l'attribut className et définissez-le sur alert. Résultat : className="alert".
Pour importer le fichier avec les styles dans le fichier index.js, utilisez l'instruction import et fournissez le chemin correct vers le fichier. Résultat : import './index.css'.
Pour appliquer des styles à l'élément div, utilisez le sélecteur de nom de classe .alert et insérez les styles de la tâche.

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 7

some-alt