• pour les personnes
  • pour les affaires
  • pour les universités
  • pour les gouvernements
Coursera
Diplômes en ligne
Carrières
Connexion
Inscrivez-vous gratuitement
Coursera
NIIT
Construire des interfaces utilisateur interactives avec la bibliothèque React
  • À propos
  • Résultats
  • Modules
  • Recommandations
  • Témoignages
  1. Parcourir
  2. Informatique
  3. Développement mobile et web
NIIT

Construire des interfaces utilisateur interactives avec la bibliothèque React

Ce cours fait partie de Spécialisation Développement frontal avec React

NIIT

Instructeur : NIIT

2 133 déjà inscrits

Inclus avec Coursera Plus

•En savoir plus
5 modules
Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.
niveau Intermédiaire
Certaines connaissances prérequises
18 heures pour terminer
3 semaines à 6 heures par semaine
Planning flexible
Apprenez à votre propre rythme

5 modules
Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.
niveau Intermédiaire
Certaines connaissances prérequises
18 heures pour terminer
3 semaines à 6 heures par semaine
Planning flexible
Apprenez à votre propre rythme
  • À propos
  • Résultats
  • Modules
  • Recommandations
  • Témoignages

Ce que vous apprendrez

  • Développez une interface utilisateur attrayante et réactive et une interface utilisateur transparente avec des vues navigables rapidement en utilisant les composants React Class

Compétences que vous acquerrez

  • Catégorie : Tests unitaires
    Tests unitaires
  • Catégorie : Test de logiciels
    Test de logiciels
  • Catégorie : Interface utilisateur (UI)
    Interface utilisateur (UI)
  • Catégorie : Interface de programmation d'application (API)
    Interface de programmation d'application (API)
  • Catégorie : Développement Web Front-End
    Développement Web Front-End
  • Catégorie : Composants UI
    Composants UI
  • Catégorie : Cadres JavaScript
    Cadres JavaScript
  • Catégorie : Jest (cadre de test JavaScript)
    Jest (cadre de test JavaScript)
  • Catégorie : Programmation événementielle
    Programmation événementielle
  • Catégorie : Javascript
    Javascript
  • Catégorie : React.js
    React.js

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Évaluations

5 devoirs

Enseigné en Anglais

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires
 logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Élaborez votre expertise du sujet

Ce cours fait partie de la Spécialisation Développement frontal avec React
Lorsque vous vous inscrivez à ce cours, vous êtes également inscrit(e) à cette Spécialisation.
  • Apprenez de nouveaux concepts auprès d'experts du secteur
  • Acquérez une compréhension de base d'un sujet ou d'un outil
  • Développez des compétences professionnelles avec des projets pratiques
  • Obtenez un certificat professionnel partageable

Il y a 5 modules dans ce cours

Une application frontale doit présenter une interface utilisateur attrayante et réactive, ainsi qu'une interface utilisateur transparente avec des vues à navigation rapide. Les applications à page unique (SPA) répondent à ces attentes car elles sont plus légères et efficaces. React, une bibliothèque JavaScript populaire, est utilisée pour développer des interfaces utilisateur complexes pour les applications à page unique (SPA). Facebook, Instagram, Netflix, Airbnb, etc, sont quelques-uns des sites web célèbres qui utilisent React.

Dans ce cours, vous apprendrez à construire une SPA en développant des composants React Class réutilisables et testables. La bibliothèque vous aide à explorer les fonctionnalités de React qui améliorent les performances des applications web en permettant des mises à jour partielles des pages.

L'élément React est le bloc de construction fondamental utilisé pour développer des SPA React. En tant que développeur, vous devrez créer les composants fonctionnels sans état de React en utilisant les éléments React. Dans ce sprint d'apprentissage, vous explorerez les techniques utilisées pour rendre les éléments React conditionnellement, ainsi que les techniques utilisées pour rendre des composants multiples. La pratique fournie pendant ce sprint d'apprentissage vous permettra d'ajouter React aux sites web existants et de créer des composants fonctionnels en utilisant les éléments React.

Inclus

13 vidéos2 lectures1 devoir1 devoir de programmation

13 vidéos•Total 33 minutes
  • Mise en contexte•3 minutes•Prévisualiser le module
  • Créez un programme React simple à l'aide des éléments React•3 minutes
  • Regardez et répétez : React Hello World•2 minutes
  • Regardez et répétez : élément de tableau React•2 minutes
  • Construire et rendre des composants sans état à l'aide de fonctions JavaScript•2 minutes
  • Watch and Repeat : Composant fonctionnel React•2 minutes
  • Rendre les composants React en fonction des conditions•2 minutes
  • Regarder et répéter : le rendu conditionnel de React•4 minutes
  • Rendre plusieurs composants à l'aide de listes et de clés•2 minutes
  • Regarder et répéter : liste et clés React•1 minute
  • Dossier pratique•1 minute
  • Débriefing de la pratique•2 minutes
  • Consolidation de l'apprentissage•1 minute
2 lectures•Total 20 minutes
  • Instructions pour télécharger la solution de l'exercice de programmation•10 minutes
  • Commencez avec les principes fondamentaux de React•10 minutes
1 devoir•Total 20 minutes
  • Commencez avec les principes fondamentaux de React•20 minutes
1 devoir de programmation•Total 75 minutes
  • GlassKart•75 minutes

Les pages web interactives de React nécessitent des composants avec état pour gérer leur propre état qui peut même être transmis à ses composants enfants à l'aide de props. En tant que développeur, vous devrez créer des composants avec état pour accepter les entrées de l'utilisateur, ajouter des éléments interactifs et récupérer des données avant le rendu. Dans ce sprint d'apprentissage, vous apprendrez à créer des composants de classe React et à gérer l'état en gérant les événements. Vous explorerez le concept de DOM virtuel et de réconciliation. La pratique vous aidera à construire des composants de classe avec état avec une meilleure lisibilité du code en utilisant la syntaxe JSX.

Inclus

12 vidéos1 lecture1 devoir1 devoir de programmation

12 vidéos•Total 45 minutes
  • Mise en contexte•4 minutes•Prévisualiser le module
  • Construire des composants de classe avec état à l'aide de la syntaxe ES6•0 minutes
  • Regardez et répétez : les composants d'état de React à l'aide de la classe React•4 minutes
  • Gérer l'état en gérant les événements avec des éléments React•4 minutes
  • Watch and Repeat : Gestion d'événements React•2 minutes
  • Expliquer la réconciliation et le DOM virtuel•2 minutes
  • Créez des vues plus lisibles en utilisant JSX•4 minutes
  • Watch and Repeat : expressions JSX•7 minutes
  • Watch and Repeat : Rendu conditionnel et gestion d'événements avec JSX•6 minutes
  • Dossier pratique•2 minutes
  • Débriefing de la pratique•3 minutes
  • Consolidation de l'apprentissage•2 minutes
1 lecture•Total 10 minutes
  • Construire des composants avec état en utilisant React•10 minutes
1 devoir•Total 30 minutes
  • Construire des composants avec état en utilisant React•30 minutes
1 devoir de programmation•Total 75 minutes
  • Pomodoro•75 minutes

Les applications à page unique créées à partir d'une approche basée sur les composants fonctionnent bien car les composants peuvent être réutilisés. Lors du développement d'une SPA, la première étape consiste à identifier les composants et à construire leur hiérarchie. En tant que développeur front-end, vous devrez identifier et créer des composants réutilisables pour l'application web React. Dans ce sprint d'apprentissage, vous explorerez les principes nécessaires pour décomposer une interface utilisateur en une hiérarchie de composants. Vous apprendrez également à partager des données entre plusieurs composants. La pratique vous aidera à acquérir des compétences pour créer des projets React rapidement en utilisant l'outil create-react-app qui offre une installation de construction moderne sans configuration.

Inclus

16 vidéos1 lecture1 devoir2 devoirs de programmation

16 vidéos•Total 54 minutes
  • Mise en contexte•1 minute•Prévisualiser le module
  • Définir l'abstraction et l'encapsulation•2 minutes
  • Appliquer les principes utilisés pour décomposer l'interface utilisateur (IU) en composants•3 minutes
  • Appliquer les principes utilisés pour décomposer l'interface utilisateur (IU) en composants•5 minutes
  • Watch and Repeat : Créer un projet React à l'aide de l'outil Create-React-App•6 minutes
  • Watch and Repeat : Modules d'importation et d'exportation•5 minutes
  • Passer des données à travers l'arbre des composants en utilisant le contexte•3 minutes
  • Regardez et répétez : React Lift State up•2 minutes
  • Regarder et répéter : React Context•4 minutes
  • Réutiliser le code entre les composants à l'aide de la composition React•1 minute
  • Regardez et répétez : composition de composants React•4 minutes
  • Dossier pratique•2 minutes
  • Débriefing de la pratique•2 minutes
  • Résumé du défi•1 minute
  • Compte rendu du défi•3 minutes
  • Consolidation de l'apprentissage•2 minutes
1 lecture•Total 10 minutes
  • Décomposer l'interface utilisateur en une hiérarchie de composants•10 minutes
1 devoir•Total 25 minutes
  • Décomposer l'interface utilisateur en une hiérarchie de composants•25 minutes
2 devoirs de programmation•Total 220 minutes
  • Décomposer l'interface utilisateur en une hiérarchie de composants - Pomodoro•75 minutes
  • Décomposer l'interface utilisateur en hiérarchie de composants - Journler•145 minutes

La gestion de l'état est un processus complexe qui nécessite une compréhension claire du cycle de vie d'un composant. Pour gérer efficacement l'état à différentes phases de la vie d'un composant, un développeur front-end doit avoir des compétences pour travailler sans effort avec les méthodes du cycle de vie du composant React. Dans ce sprint d'apprentissage, vous apprendrez les différentes méthodes du cycle de vie qui aident à surveiller et à manipuler les composants de la classe React. Les exercices pratiques fournis avec ce sprint vous permettent de gérer l'état des composants tout en récupérant des données du serveur et de gérer les erreurs JavaScript

Inclus

13 vidéos1 lecture1 devoir2 devoirs de programmation

13 vidéos•Total 52 minutes
  • Mise en contexte•1 minute•Prévisualiser le module
  • Surchargez les méthodes du cycle de vie du composant React•11 minutes
  • Regarder et répéter : la phase de montage dans la méthode du cycle de vie React•3 minutes
  • Watch and Repeat : Phase de mise à jour et de démontage dans la méthode du cycle de vie de React•6 minutes
  • Définir des limites d'erreur pour capturer les erreurs JavaScript•1 minute
  • Watch and Repeat : Limite d'erreur•2 minutes
  • Effectuez des requêtes HTTP avec l'API Axios pour communiquer avec les serveurs•3 minutes
  • Regarder et répéter : Axios API•10 minutes
  • Dossier pratique•1 minute
  • Débriefing de la pratique•2 minutes
  • Résumé du défi•2 minutes
  • Compte rendu du défi•2 minutes
  • Consolidation de l'apprentissage•1 minute
1 lecture•Total 10 minutes
  • Gérer l'état de l'application à l'aide des méthodes du cycle de vie•10 minutes
1 devoir•Total 30 minutes
  • Gérer l'état de l'application à l'aide des méthodes du cycle de vie•30 minutes
2 devoirs de programmation•Total 220 minutes
  • Gérer l'état des applications avec les méthodes du cycle de vie - Pomodoro•75 minutes
  • Gérer l'état des applications à l'aide des méthodes du cycle de vie-Journler•145 minutes

Les tests font partie intégrante du processus de développement, car ils permettent d'identifier les défauts et les bogues dès les premières étapes du développement. Les tests unitaires consistent à tester les composants individuels du programme ou de l'application logicielle. En tant que développeur React, les composants doivent être testés de manière adéquate pour s'assurer qu'ils sont corrects, complets et performants. Dans ce sprint d'apprentissage, vous apprendrez à écrire du code de test pour tester les composants de la classe React à l'aide du framework Jest. Les exercices pratiques de ce sprint vous aideront à explorer les modèles de test communs pour écrire des codes de test. Les exercices vous permettront d'écrire des cas de test pour différents scénarios de gestion d'état.

Inclus

18 vidéos1 lecture1 devoir1 devoir de programmation

18 vidéos•Total 64 minutes
  • Mise en contexte•1 minute•Prévisualiser le module
  • Expliquez les tests unitaires•1 minute
  • Test à l'aide de Jest•3 minutes
  • Démonstration de modèles de test courants•5 minutes
  • Watch and Repeat : Test unitaire du composant Greetings•6 minutes
  • Démonstration des tests d'événements•0 minutes
  • Regarder et répéter : Test d'unité Composant couleur•6 minutes
  • Créer des Mocks avec des méthodes Jest•3 minutes
  • Watch and Repeat : Test unitaire du composant PrimaryColor•4 minutes
  • Watch and Repeat : Test unitaire du composant CompositeColor•3 minutes
  • Watch and Repeat : Test unitaire du composant ColorPalette•5 minutes
  • Watch and Repeat : Test unitaire du composant ColorChanger•4 minutes
  • Démonstration des tests d'instantanés•1 minute
  • Watch and Repeat : Test unitaire du composant message•2 minutes
  • Examiner d'autres bibliothèques de test•1 minute
  • Dossier pratique•3 minutes
  • Débriefing de la pratique•5 minutes
  • Consolidation de l'apprentissage•2 minutes
1 lecture•Total 10 minutes
  • Testez les composants de classe React à l'aide de Jest•10 minutes
1 devoir•Total 30 minutes
  • Testez les composants de classe React à l'aide de Jest•30 minutes
1 devoir de programmation•Total 75 minutes
  • Thème Comparateur•75 minutes

Obtenez un certificat professionnel

Ajoutez ce titre à votre profil LinkedIn, à votre curriculum vitae ou à votre CV. Partagez-le sur les médias sociaux et dans votre évaluation des performances.

Instructeur

NIIT
NIIT
NIIT
13 Cours•27 927 apprenants

Offert par

NIIT

Offert par

NIIT

Fondé en 1981, NIIT propose des services de formation gérés à des entreprises leaders du marché dans 30 pays. La gamme complète de services de formation gérés par NIIT comprend la conception de programmes sur mesure et le développement de contenu, l'administration de l'apprentissage, la prestation de l'apprentissage, l'approvisionnement stratégique, la technologie de l'apprentissage et les services de conseil

En savoir plus sur Développement mobile et web

  • Statut : Essai gratuit
    Essai gratuit
    M

    Meta

    React Basics

    Cours

  • Statut : Essai gratuit
    Essai gratuit
    S

    Scrimba

    Advanced React Skills

    Spécialisation

  • Statut : Essai gratuit
    Essai gratuit
    N

    NIIT

    Building User Interfaces Using Functional React Components

    Cours

  • Statut : Essai gratuit
    Essai gratuit
    S

    Scrimba

    Learn Advanced React

    Cours

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.
Étudiant(e) depuis 2018
’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’
Jennifer J.
Étudiant(e) depuis 2020
’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’
Larry W.
Étudiant(e) depuis 2021
’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’
Chaitanya A.
’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’
Coursera Plus

Ouvrez de nouvelles portes avec Coursera Plus

Accès illimité à 10,000+ cours de niveau international, projets pratiques et programmes de certification prêts à l'emploi - tous inclus dans votre abonnement.

En savoir plus

Faites progresser votre carrière avec un diplôme en ligne

Obtenez un diplôme auprès d’universités de renommée mondiale - 100 % en ligne

Découvrir les diplômes

Rejoignez plus de 3 400 entreprises mondiales qui ont choisi Coursera pour les affaires

Améliorez les compétences de vos employés pour exceller dans l’économie numérique

En savoir plus

Foire Aux Questions

L'accès aux cours et aux devoirs dépend de votre type d'inscription. Si vous suivez un cours en mode audit, vous pourrez consulter gratuitement la plupart des supports de cours. Pour accéder aux devoirs notés et obtenir un certificat, vous devrez acheter l'expérience de certificat, pendant ou après votre audit. Si vous ne voyez pas l'option d'audit :

  • Il se peut que le cours ne propose pas d'option d'audit. Vous pouvez essayer un essai gratuit ou demander une aide financière.

  • Le cours peut proposer l'option "Cours complet, pas de certificat" à la place. Cette option vous permet de consulter tous les supports de cours, de soumettre les évaluations requises et d'obtenir une note finale. Cela signifie également que vous ne pourrez pas acheter un certificat d'expérience.

Lorsque vous vous inscrivez au cours, vous avez accès à tous les cours de la Specializations, et vous obtenez un certificat lorsque vous terminez le travail. Votre certificat électronique sera ajouté à votre page de réalisations - de là, vous pouvez imprimer votre certificat ou l'ajouter à votre profil LinkedIn. Si vous souhaitez uniquement lire et visualiser le contenu du cours, vous pouvez auditer le cours gratuitement.

Si vous vous êtes abonné, vous bénéficiez d'une période d'essai gratuite de 7 jours pendant laquelle vous pouvez annuler votre abonnement sans pénalité. Après cette période, nous ne remboursons pas, mais vous pouvez résilier votre abonnement à tout moment. Consultez notre politique de remboursement complèteS’ouvre dans un nouvel onglet.

Oui, pour certains programmes de formation, vous pouvez demander une aide financière ou une bourse si vous n'avez pas les moyens de payer les frais d'inscription. Si une aide financière ou une bourse est disponible pour votre programme de formation, vous trouverez un lien pour postuler sur la page de description.

Plus de questions

Visitez le Centre d'Aide pour les Étudiants

Aide financière disponible,

Pied de page Coursera

Compétences techniques

  • ChatGPT
  • Codage
  • Informatique
  • Cybersécurité
  • DevOps
  • Piratage éthique
  • IA générative
  • Programmation Java
  • Python
  • Développement Web

Compétences analytiques

  • Intelligence artificielle
  • Big Data
  • Analyse de valeur et de rentabilité
  • analyse des données
  • Science des données
  • Modélisation financière
  • Apprentissage automatique
  • Microsoft Excel
  • microsoft power bi
  • SQL

Compétences professionnelles

  • Comptabilité
  • Marketing numérique
  • Commerce électronique
  • Finance
  • Google
  • Conception graphique
  • IBM
  • Marketing
  • Project Management
  • Le marketing appliqué aux réseaux sociaux

Ressources professionnelles

  • Certifications informatiques essentielles
  • Compétences à acquérir pour les hauts revenus
  • Comment obtenir un certificat PMP
  • Comment apprendre l'Intelligence artificielle (IA)
  • Certifications populaires en cybersécurité
  • Certifications appréciées en analyse des données
  • Que fait un analyste de données ?
  • Ressources pour le développement de carrière
  • Test d'aptitude professionnelle
  • Partagez votre histoire d'apprentissage Coursera

Coursera

  • À propos
  • Ce que nous proposons
  • Direction
  • Carrières
  • Catalogue
  • Coursera Plus
  • Certificats Professionnels
  • Certificats MasterTrack®
  • Diplômes
  • Pour l'entreprise
  • Pour les gouvernements
  • Pour le campus
  • Devenir un partenaire
  • Impact social
  • cours gratuits
  • Recommandations de crédits ECTS

Communauté

  • Étudiants
  • Partenaires
  • Testeurs bêta
  • Blog
  • Le podcast Coursera
  • Blog Tech

Plus

  • Presse
  • Investisseurs
  • Conditions
  • Confidentialité
  • Aide
  • Accessibilité
  • Contact
  • Articles
  • Répertoire
  • Filiales
  • Déclaration sur l’esclavage moderne
  • Ne pas vendre/partager
Apprendre partout
Télécharger dans l'App Store
Disponible sur Google Play
Logo Certified B Corporation
© 2025 Coursera Inc. Tous droits réservés.
  • Facebook Coursera
  • Linkedin Coursera
  • Twitter Coursera
  • YouTube Coursera
  • Instagram Coursera
  • TikTok Coursera
Coursera

Bon retour

​
Votre mot de passe est masqué
​

ou

Vous débutez chez Coursera ?


Vous rencontrez des difficultés pour vous connecter ? Centre d'Aide pour les Étudiants

Ce site est protégé par reCAPTCHA Enterprise et la Politique de confidentialité Google et les Termes et Conditions s'appliquent.