Tantangan ini sangat mudah. Kami harus membangun aplikasi penampil wikipedia sederhana di mana pengguna dapat mencari artikel wikipedia apa pun atau dengan menekan tombol maka artikel tersebut akan diarahkan ke artikel acak di wiki.

Anda dapat melihat aplikasinya secara langsung di sini, dan repositori github dengan kodenya ada di sini.

Sama seperti tantangan sebelumnya, saya menggunakan create-react-app untuk merancang aplikasi dalam hitungan detik. Lalu saya melihat ke dalam Wikipedia API untuk melihat cara kerjanya.

Meskipun saya mungkin seharusnya menggunakan Axios untuk menangani panggilan API, saya menggunakan Ambil API dan kemudian saya menelusuri halaman-halaman dan menampilkannya secara dinamis ke dalam daftar yang tidak biasa.

Markup berisi container, yang diatur menjadi 960px lebar dan berisi div actions dengan kolom input dan tombol untuk artikel acak dan juga ul untuk menampilkan kutipan wikipedia untuk setiap artikel yang dicari.

Saya menghabiskan sebagian besar waktu untuk desain karena bagian “fungsional” sangat mudah. Saya terinspirasi oleh desain “dribbble” ini.

Beberapa hal yang perlu diperhatikan:

  1. Daripada menggunakan tombol pencarian, saya memperbarui hasilnya dengan menangani peristiwa onChange pada kolom input. Hal ini membuat aplikasi bereaksi secara real time. Dengan setiap tombol yang ditekan oleh pengguna, sebuah fungsi dipanggil yang memperbarui daftar artikel wikipedia.
  2. Dalam file package.json untuk pembuatan aplikasi dengan create-react-app, saya menambahkan: "homepage" : "./" yang menetapkan jalur relatif ke "./" untuk keseluruhan aplikasi. Hal ini penting untuk diperhatikan karena jika Anda tidak mengaturnya, setelah menjalankan di terminal: npm run build untuk mendapatkan aplikasi siap produksi, Anda tidak akan dapat mempratinjaunya di mesin Anda jika Anda membuka file index.html. Lebih lanjut tentang itu di sini.

Untuk informasi lebih lanjut tentang tantangan ini dan bagaimana Anda dapat bergabung, silakan periksa repositori github P1xt di sini.