Contenu du cours

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

Résumé de la Section React dans le Monde Réel

Suivez ces étapes pour développer une application React sur votre machine locale :

Installer Node.js et npm :

Visitez le site officiel de Node.js à https://nodejs.org ;
Téléchargez l'installateur pour votre système d'exploitation et suivez les instructions d'installation pour installer Node.js et npm.

Installer un éditeur de code :

Choisissez un éditeur de code qui vous convient, tel que Visual Studio Code;
Installez l'éditeur de code sur votre ordinateur;
Cet éditeur de code sera votre outil pour écrire du code React.

Créer un dossier de projet :

Créez un dossier vide sur votre ordinateur pour stocker votre projet React;
Ce dossier servira de répertoire racine pour votre projet.

Ouvrez l'éditeur de code :

Lancez l'éditeur de code de votre choix ;
Accédez au dossier du projet que vous avez créé à l'étape 3 ;
Cela vous permettra de commencer à travailler sur votre projet React dans l'éditeur de code.

Ouvrez le terminal :

Dans l'éditeur de code, ouvrez le terminal ou l'interface de ligne de commande ;
C'est ici que vous exécuterez des commandes pour configurer et gérer votre projet React.

Configurez le projet :

Dans le terminal, exécutez la commande npx create-react-app . ;
Cette commande initialise un nouveau projet React en utilisant l'outil Create React App.

Démarrez la page en direct :

Exécutez la commande npm start une fois le projet créé ;
Cela démarre le serveur de développement et ouvre un aperçu en direct de votre application React dans le navigateur.

Personnalisez le projet :

Ouvrez le dossier src dans votre répertoire de projet ;
Vous pouvez supprimer tous les fichiers par défaut créés par Create React App ;
Construisez vos composants React, ajoutez des styles et implémentez des fonctionnalités dans le dossier src .

Bon codage !

En suivant ces étapes, vous aurez un projet React de base configuré et prêt pour le développement. Vous pouvez maintenant commencer à construire vos composants React, à styliser votre application et à ajouter des fonctionnalités selon les besoins de votre projet.

Tout était clair ?

Merci pour vos commentaires !

Section 4. Chapitre 6

Demandez à l'IA

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