in Javascript, Programming

Tutorial react js – struktur komponen aplikasi – [part 6]

Halo, selamat datang di blog saya.

Melanjutkan tutorial React js sebelumnya yaitu tutorial untuk membuat aplikasi sederhana dengan React js. Sebelum lanjut membaca, bagi yang belum membaca artikel sebelumnya, saya sarankan untuk membacanya terlebih dahulu. Jika sudah, mari kita lanjut ke tutorial struktur komponen aplikasi react.

Sebelum saya melanjutkan tutorial ini, mari kita lihat kembali tampilan dari aplikasi yang akan saya buat.

Tutorial react - part 6 - component structur

Tutorial react – part 6 – component structure

Pada gambar di atas ditunjukkan bahwa terdapat 4 komponen yang akan saya buat. Komponen tersebut adalah SearchBar, VideoList, VideoListItem dan VideoDetail. Pada React, setiap komponen akan dibuat dalam sebuah file. Jadi, jika ada 4 komponen, maka saya akan membuat 4 file.

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.

Membuat komponen SearchBar

Berikut ini adalah langkah – langkah membuat komponen SearchBar

  1. Buat folder dengan nama components di dalam folder src
  2. Buat file SearchBar.js di dalam folder components
  3. Dalam file SearchBar.js kita akan menuliskan kode untuk membuat komponen dan kemudian meng-export komponen tersebut agar dapat dipanggil dan digunakan oleh komponen lain.
  4. Simpan file SearchBar.js

Berikut ini adalah struktur folder setelah ditambahkan file SearchBar.js:

Tutorial react js - struktur folder react

Tutorial react js – struktur folder react

Berikut ini adalah kode file SearchBar.js

Mari saya jelaskan maksud dari kode yang ada pada komponen SearchBar.js.

  1. Pertama, saya menggunakan import library dari React untuk menggunakannya,
  2. Kedua, saya membuat const dengan nama SearchBar yang isinya merupakan JSX untuk menggenerate sebuah html yang berupa input teks.
  3. Ketiga, saya meng-eksport komponen SearchBar agar dapat digunakan atau dipanggil oleh komponen lain (index.js sebagai komponen utama dari aplikasi)

Komponen SearchBar yang saya buat, tidak akan membuat output yang berbeda pada browser karena komponen ini belum dipanggil oleh komponen utama (index.js). Untuk memanggil dan menampilkan komponen SearchBar, ubah file index.js menjadi sebagai berikut:

Silakan dipahami alur yang dijalankan oleh file index.js. Jika merasa ragu atau kesulitan memahami Anda bisa tinggalkan komentar pada artikel ini.

Simpan file index.js, kemudian reload browser. Kode tersebut akan menampilkan halaman seperti berikut ini:

Tutorial react js - hasil import komponen SearchBar

Tutorial react js – hasil import komponen SearchBar.js

Sampai disini saya telah membuat sebuah komponen, yaitu komponen SearchBar. Komponen tersebut kemudian dipanggil oleh komponen utama yaitu index.js sehingga jika browser di reload, maka akan menampilkan form pencarian.

Terima kasih sudah membaca dan sampai jumpa pada artikel selanjutnya.

Write a Comment

Comment