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:
- 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. - 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 fileindex.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.