Maison >interface Web >js tutoriel >React Interview Assignment-user-detail-app

React Interview Assignment-user-detail-app

WBOY
WBOYoriginal
2024-07-16 20:09:09569parcourir

React Interview Assignment-user-detail-app

application-détails-utilisateur

Étape 1

Vous allez créer une application Web à l'aide de create-react-app et dereact-router.

En utilisant les données utilisateur de l'API randomUser, vous afficherez une liste de 10 utilisateurs.

  1. Le nom de chaque utilisateur sera affiché sur la liste.
  2. En cliquant sur le nom d'un utilisateur, vous accédez à la page de détails de l'utilisateur correspondante, qui comprend la photo, le nom, l'adresse e-mail, l'état et le pays de l'utilisateur.

Données à afficher sur la page de détails de l'utilisateur :

  • Photo
  • Nom
  • E-mail
  • Localisation (état et pays)

URL API : https://randomuser.me/api/
Paramètre de requête : résultats=10

Supplémentaire :
Réfléchissez à la manière dont vous pouvez optimiser le code.

Étape 2

  • Mettre en œuvre la gestion de l'état.
  • Récupérez l'ensemble d'utilisateurs une seule fois. Aucun appel réseau lorsque l'on se déplace entre les pages.
  • Ajoutez un bouton sur la page de détails pour marquer un utilisateur comme favori.
  • Sur la page d'accueil, mettez en surbrillance les utilisateurs favoris avec un CSS spécial.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Intercepteurs dans AngularArticle suivant:Intercepteurs dans Angular