Heim > Web-Frontend > js-Tutorial > Hauptteil

React Interview Assignment-user-detail-app

WBOY
Freigeben: 2024-07-16 20:09:09
Original
557 Leute haben es durchsucht

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!

Quelle:dev.to
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!