in Javascript, Programming

Tutorial react js – pengaturan awal project – [part 3]

Halo, selamat datang di blog saya.

Tutorial react js sebelumnya telah membahas mengenai pengenalan react js dan membuat hello world dengan react js. Sebelum lanjut membaca, saya sampaikan terlebih dahulu tujuan utama saya membuat tutorial react ini adalah agar pembaca dapat membuat aplikasi react js walaupun hanya sekedar aplikasi sederhana saja. Oleh karenanya, saya akan membuat artikel react js tutorial secara berurutan dari tahap pengaturan awal project sampai jadi sebuah aplikasi sederhana dengan menggunakan react js. Jadi, sebaiknya ketika membaca tutorial ini diharapkan pembaca benar – benar mempraktikannya agar tujuan utamanya tercapai. 😀

Rancangan aplikasi React

Berikut ini adalah mock up atau tampilan aplikasi React yang akan dibuat.

tutorial react js - membuat aplikasi sederhana

tutorial react js – membuat aplikasi sederhana

Kita akan membuat aplikasi yang dapat digunakan untuk mencari video layaknya Youtube. Terdapat beberapa komponen react yang akan dibuat yaitu :

  • Komponent A (search bar) = komponen search bar (digunakan untuk input query pencarian video)
  • Komponent B  (list video) = daftar video hasil dari pencarian
  • Komponent C (detail video) = detail video yang dipilih (berasal dari komponen B yang diklik)

Alur aplikasi

  1. Ketika pengguna melakukan pencarian dengan menginputkan query pencarian pada komponen A (search bar), maka komponen B (list video) akan otomatis terupdate,
  2. Komponen B merupakan daftar video hasil dari pencarian,
  3. Ketika salah satu dari daftar video yang berada pada komponen B dipilih atau diklik, maka komponen C (detail video) akan menampilkan detail video berupa video yang dapat diputar dan deskripsi dari video.

Kita akan menggunakan data yang berasal dari Youtube. Data tersebut kita ambil dengan layanan API Youtube.

Saya sudah memaparkan mock up atau tampilan dan alur proses dari aplikasi yang akan kita buat dengan React js. Proses implementasi akan saya tulis di artikel selanjutnya.

Terima kasih sudah membaca dan sampai jumpa pada artikel selanjutnya.

Write a Comment

Comment

Webmentions

  • Tutorial react js - struktur komponen aplikasi - [part 6] - Sigit Hanafi Notes 21st July 2017

    […] Sebelum kita lanjut untuk membuat komponen – komponen tersebut, mari kita ingat terlebih dahulu alur aplikasi. Untuk mengingat kembali alur aplikasi yang akan kita buat, Anda bisa lihat pada artikel sebelumnya. […]