Conception de sites Web avec React

Bibliothèque d'interface utilisateur UI

Développement Web4.3(91)9h 42min34 leçons6 sections

Ce que vous apprendrez

  • Comprendre ce qu'est React
  • Installer les outils et créer votre premier projet
  • Utiliser JSX et le compilateur Babel
  • Créer des composants
  • Manipuler les Props
  • Utiliser la méthode Map et les fonctions fléchées
  • Contrôler l'affichage avec des conditions
  • Gérer l'état avec le hook useState
  • Gérer les événements et travailler avec les formulaires
  • Réaliser un projet final

À propos du cours

Ce cours enseigne la conception de sites web avec React JS, une bibliothèque JavaScript pour construire des interfaces utilisateur interactives pour les applications web. Il commence par la définition de React, l'installation des outils, la création de votre premier projet et l'utilisation de l'outil Code SandBox. Ensuite, vous apprenez JSX et le compilateur Babel, la manipulation des valeurs, des styles et des propriétés, puis les composants, le travail avec les modules, Import et Export. Vous voyez alors les Props, la méthode Map, les fonctions fléchées et le contrôle de l'affichage grâce aux conditions. Vous apprenez aussi le State et le hook useState, la gestion des événements et le travail avec les formulaires. À la fin, vous réalisez un projet final en plusieurs étapes et vous téléchargez ses fichiers. Le cours convient à tous ceux qui veulent apprendre à construire des interfaces de sites web modernes, et il est préférable de connaître les bases de HTML et de JavaScript avant de commencer. Vous serez ensuite capable de construire des composants réutilisables et de créer seul une application web interactive. L'enseignement est pratique et progressif : suivez les leçons dans l'ordre pour passer de l'idée à l'application pas à pas.

Résultats attendus

  • Compréhension approfondie des concepts de React avec application pratique.
  • Capacité à créer des applications web interactives et modernes.
  • Maîtrise des outils comme JSX, Hooks et composants.
  • Créer un projet final qui reflète les compétences acquises pendant le cours.

Avis des apprenants

Ces avis proviennent d'apprenants qui ont acheté le contenu et en ont complété au moins 50% — il n'y a aucun avis de personnes n'ayant pas suivi le contenu.
4.3
★★★★☆
91 avis
5★
32
4★
55
3★
4
2★
0
1★
0

    Contenu du cours

    1

    Introduction à React

    4 leçons
    1. Qu'est-ce que ReactPrésente la bibliothèque React et sa popularité, explique les composants avec l'exemple d'un sandwich burger, la découpe de l'interface en composants et la mise à jour du DOM en ne modifiant que la partie concernée.6:55
    2. Installation des outilsExplique l'installation des outils nécessaires au cours React : Visual Studio Code, Node.js avec NPM et Git, et l'activation d'IIS dans les fonctionnalités Windows pour exécuter un serveur web local.8:50
    3. Créer votre premier projetExplique la création du premier projet React, les commandes npm pour lancer et construire, le contenu du dossier public et d'index.html, et le fichier index.js qui relie l'application à l'élément root et affiche Hello World.22:16
    4. Outil Code SandBoxPrésente CodeSandbox pour exécuter des projets React dans le navigateur, ses avantages comme le travail depuis n'importe quel appareil, la collaboration en équipe et l'installation de paquets, et explique les parties de son interface, les réglages de police et le partage d'un projet.16:22
    2

    Utiliser JSX avec React

    6 leçons
    1. Explication de JSX et du Compilateur BabelExplique JSX dans React et son lien avec le JavaScript pur, en comparant la création d'un élément H1 via le DOM directement et avec JSX, ainsi que le rôle de Babel pour convertir le code en JavaScript compréhensible par le navigateur.24:07
    2. Application Pratique SimpleExercice pratique React sur un programme simple qui prend deux nombres de l'utilisateur et affiche le résultat d'une opération sur eux, puis affiche l'interface à travers un seul élément qui regroupe toutes les parties.5:25
    3. Gestion des ValeursExplique comment écrire des valeurs JavaScript dans JSX entre accolades, en précisant que seule une expression qui produit une valeur est permise et non une instruction complète, avec les template literals et un petit exercice affichant un nom et un copyright.15:23
    4. Gestion du Style et des PropriétésExplique les attributs des éléments JSX et leur mise en forme : utiliser className au lieu de class, écrire les attributs en camelCase, ajouter un fichier CSS externe, avec l'avertissement de React en cas de nom d'attribut incorrect.24:13
    5. Ajout de Style Personnalisé aux ÉlémentsExplique le style en ligne dans JSX : l'attribut style n'accepte pas une chaîne mais un objet JavaScript, les noms de propriétés s'écrivent en camelCase et les valeurs peuvent changer selon des conditions dans le fichier JavaScript.14:48
    6. Application PratiqueUn défi pratique qui applique les notions JSX précédentes en créant une application React de zéro, avec un fichier qui importe la bibliothèque et affiche un seul élément à l'écran.21:39
    3

    Composant

    14 leçons
    1. Qu'est-ce que le composant ?Explique concrètement le concept de composant dans React, en séparant des parties de la page comme l'en-tête et la liste dans des fichiers distincts et en les réutilisant, tout en corrigeant une erreur de référence par l'import.29:53
    2. Modification du code pour la nouvelle mise à jourExplique la mise à jour du code pour la nouvelle version de React : utiliser createRoot de react-dom/client à la place de ReactDOM.render pour supprimer l'avertissement de la console, puis appeler render sur la racine.5:21
    3. Intégration du composant avec l'application pratique précédenteApplique le concept de composant à l'exemple de salutation selon l'heure, en déplaçant la logique du titre dans un fichier de composant distinct, en l'exportant avec export default et en utilisant createRoot pour réduire le code.11:09
    4. Gestion du modèle et explication de l'importation et de l'exportationExplique import, export et les modules en ES6 : exporter une valeur ou une fonction avec export default ou par nom, et l'importer dans un autre fichier sous le nom de son choix, avec un exemple double et triple.25:52
    5. Application Pratique sur le ModèleExercice pratique sur les modules, l'import et l'export : construire un fichier qui exporte quatre fonctions arithmétiques d'addition, soustraction, multiplication et division, et les importer dans le fichier principal pour afficher leurs résultats.10:19
    6. Explication des PropsExplique les Props de React et comment transmettre différentes valeurs à un même composant pour qu'il les affiche, au lieu de les écrire en dur, puis comment le composant les lit via props.24:48
    7. Application Pratique sur les PropsUn exercice pratique sur les Props : construire un composant carte de joueur qui reçoit ses données d'un fichier séparé, puis le réutiliser dans App et le styliser avec CSS.33:17
    8. Utilisation de React DevToolsUtilise l'extension React DevTools du navigateur pour inspecter l'arbre des composants et les props, et repérer puis corriger une erreur de nom de propriété lors de l'ajout d'une image à la carte.15:32
    9. Explication de la Méthode MapExplique la fonction map pour afficher d'un coup les éléments d'un tableau de données, en écrivant le composant une seule fois, et pourquoi chaque élément a besoin d'une key unique.16:24
    10. Application Pratique sur la Méthode MapUn exercice pratique sur map pour créer un dictionnaire d'emojis : un fichier de données de symboles et de significations, et un composant carte affichant symbole, nom et description.30:47
    11. Explication des Fonctions Clés UtiliséesExplique les méthodes de tableau map, filter, reduce, find et findIndex, et comment chacune traite les éléments et renvoie un résultat selon une condition ou une accumulation.19:17
    12. Explication de la Fonction FléchéeExplique les fonctions fléchées d'ES6 et comment convertir les fonctions utilisées avec map, filter, reduce et findIndex en une syntaxe plus courte et plus lisible.10:19
    13. Contrôle de l'Affichage par ConditionsExplique le rendu conditionnel dans React pour afficher un écran différent selon l'état de l'utilisateur, en construisant un formulaire de connexion avec l'opérateur ternaire.19:56
    14. Application PratiqueUn exercice pratique de rendu conditionnel qui bascule entre les écrans de connexion et d'inscription selon la variable userIsRegistered, transmise de App au composant Form.12:15
    4

    Explication des Hooks

    5 leçons
    1. Introduction à l'étatPrésente le concept de state dans React : quand les données du state changent, l'interface change, illustré par l'exemple du glaçon et de l'eau et par un compteur qui augmente et diminue avec deux boutons.12:53
    2. Explication du Hook UseStateExplique le hook useState dans React : pourquoi modifier une valeur ordinaire ne met pas l'interface à jour, et comment useState renvoie un tableau contenant la valeur et une fonction de modification qui déclenche un nouveau rendu.29:29
    3. Application pratiqueExercice pratique sur useState : une horloge affichant l'heure actuelle comme état initial, et un bouton qui appelle une fonction via onClick pour mettre à jour l'état avec la nouvelle heure, ce qui réaffiche automatiquement l'interface.17:00
    4. Gestion des événementsExplique la gestion des événements dans React, comme le survol d'un bouton, sa sortie et le clic, et le changement de la couleur de fond avec le state et les événements onMouseOver, onMouseOut et onClick.12:56
    5. Travailler avec les formulairesExplique la gestion des champs de saisie et des formulaires dans React : lire la valeur depuis event.target avec l'événement onChange et la stocker dans le state, puis l'afficher lors de l'appui sur le bouton d'envoi avec onSubmit.19:01
    5

    Projet final

    4 leçons
    1. Étape UnDémarre la première étape du projet Keeper App, similaire à Google Keep, en construisant les composants Header, Note et Footer, en les assemblant dans App et en les affichant dans la page.25:34
    2. Étape DeuxExplique la deuxième étape de Keeper App avec des données factices dans un fichier notes.js, et l'affichage de l'ensemble des notes dans App avec la fonction map, en passant key, title et content à chaque composant.8:01
    3. Étape TroisConstruit la troisième étape de Keeper App en créant un composant CreateNote avec un formulaire contenant un champ titre, une zone de texte de trois lignes et un bouton d'ajout, plus un bouton de suppression sur chaque note, mis en forme en CSS.10:31
    4. Étape QuatreConstruit la quatrième étape de Keeper App en ajoutant le state pour rendre l'application interactive : récupérer le titre et le contenu depuis les champs avec handleChange, et ajouter de nouvelles notes puis les supprimer de la liste.21:31
    6

    Extensions

    1 pièces jointes
    1. Télécharger les fichiers du projet final

    Formateur

    Ing. Amr Abdel Fattah

    Ing. Amr Abdel Fattah

    Ingénieur en systèmes informatiques spécialisé dans le développement d'applications mobiles et de sites Web, avec une expérience dans la création de plateformes et d'applications Web populaires.
    49.3K vues20 cours

    Cours similaires