Heim  >  Artikel  >  Web-Frontend  >  React Interview Assignment-user-detail-app

React Interview Assignment-user-detail-app

WBOY
WBOYOriginal
2024-07-16 20:09:09551Durchsuche

React Interview Assignment-user-detail-app

Benutzerdetail-App

Stufe 1

Sie werden eine Web-App mit „create-react-app“ und „react-router“ erstellen.

Mithilfe der Benutzerdaten aus der randomUser-API erstellen Sie eine Liste mit 10 Benutzern.

  1. Der Name jedes Benutzers wird in der Liste angezeigt.
  2. Wenn Sie auf den Namen eines Benutzers klicken, gelangen Sie zur entsprechenden Benutzerdetailseite, die aus dem Foto, dem Namen, der E-Mail-Adresse, dem Bundesland und dem Land des Benutzers besteht.

Daten zur Anzeige auf der Benutzerdetailseite:

  • Foto
  • Name
  • E-Mail
  • Standort (Bundesstaat und Land)

API-URL: https://randomuser.me/api/
Abfrageparameter: Ergebnisse=10

Zusätzlich:
Überlegen Sie, wie Sie den Code optimieren können.

Stufe 2

  • Zustandsverwaltung implementieren.
  • Rufen Sie die Benutzergruppe nur einmal ab. Kein Netzwerkanruf, wenn wir zwischen Seiten wechseln.
  • Fügen Sie auf der Detailseite eine Schaltfläche hinzu, um einen Benutzer als Favorit zu markieren.
  • Heben Sie auf der Startseite Lieblingsbenutzer mit speziellem CSS hervor.

Das obige ist der detaillierte Inhalt vonReact Interview Assignment-user-detail-app. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Abfangjäger in AngularNächster Artikel:Abfangjäger in Angular