belajar react js : mengenal struktur file

Belajar React Js 04 Struktur file pada React Js

Diposting pada

setelah kemarin kita membahas cara menginstall react Js dan Node Js, sekarang anaktik.com akan mengenalkan struktur file dari react js serta kegunaanya. Mari belajar react js, kali ini kita juga akan melakukan persiapan agar nantinya struktur file di dalam project kita tetap tersusun rapih.

ingat, tutorial ini bersifat opsional, jadi kamu boleh mengikutinya atau langsung skip ke tutorial selanjutnya.

Struktur file pada React Js

saat pertama kali menginstal React.Js kamu akan mendapati 3 folder utama yang ada di root directory React, ketiga folder tersebut adalah.

node module

folder ini berisi module-module utama dari Node.Js dan react js. yang sudah datang ketika kamu melakukan penginstalan react js.

apakah file ini penting? kamu bisa baca selengkapnya di stackOverflow

Public

Folder ini berisi data data tambahan yang diperlukan di dalam project mu. seperti favicon,logo dll.

Src

disinilah proses developing terjadi. seluruh file yang ada di folder ini bisa kamu edit dan menentukan tampilan yang akan keluar pada aplikasi kita.

pada dasarnya saat pertama kali program react di jalankan, react akan memanggil file index.html yang berada dalam folder public dan file index.js.

setelah itu defaultnya react akan merender file app dan di tampilkan di dalam div dengan id root di dalam file index.html.

nantinya kita hanya akan berfokus pada folder ini.

Penambahan document yang diperlukan

untuk memudahkan proses development menggunakan react, saya sendiri membuat beberapa folder terpisah untuk menyimpan component.

tujuannya adalah agar struktur filenya tertata rapih dan memudahkan kita saat mau menggunakan kembali component yang sudah dibuat.

buatlah folder Component dan Container di dalam folder src. tujuannya adalah untuk memecah 2 jenis component yaitu component utama (yang nantinya ada di dalam folder container) dan component secondary atau biasa disebut atom (yang nantinya berada di dalam folder component).

atom adalah sebutan element terkecil pada suatu Component seperti button,gambar,link, dll.

sedangkan container adalah gabungan dari beberapa atom yang nantinya di render membentuk suatu tampilan ui.

jadi kurang lebih struktur folder akan seperti ini:

struktur file pada react js

apakah kamu masih bingung dengan penjelasan diatas? mari saya contohkan dengan ilustrasi berikut:

perbedaan component dan container pada react js

pada gambar diatas terdapat 2 jenis kotak, yaitu yg berwarna biru dan merah.

kotak warna biru adalah container dan kotak berwarna merah adalah atom.

jadi setiap container memiliki beberapa atom, yang nantinya atom tsb memiliki logikanya masing masing.

kemudian di dalam folder container dan component tsb kita bisa buat sub-sub folder yang kita butuhkan.

misalnya kita membutuhkan button maka kita buat folder button di dalam component.

jika kita memerlukan navigasi maka kita akan membuat folder navigasi di dalam container.

Koneksi antar File pada React Js

seperti yang saya bilang diatas bahwa container bisa memiliki beberapa component. itu berarti kita perlu mengkoneksikan antar file agar saling terhubung.

hal tersebut bisa dilakukan dengan perintah import.

contoh, saya mau mengubah text tampilan default react js.

contoh program react js

buatlah file helloWorld.jsx di dalam folder component dan isi dengan kode berikut

setelah itu ubah file app.js menjadi seperti ini

maka tampilan pada aplikasi kita akan berubah menjadi seperti ini

maksud dari kode diatas adalah, kita membuat component dengan nama helloWorld yang berisi tag h1 dengan isi test.

lalu kita memanggil component tersebut dengan perintah

lalu menampilkannya di aplikasi kita.

perlu di ingat, bila file yang dituju berada 1atau lebih folder di atas folder tempat kita akan memanggil file tsb maka kita gunakan ../ contoh:

tutorial diatas adalah opsional, kamu boleh tidak mengikuti penataan file seperti yang saya contohkan diatas.

tapi di tutorial berikutnya saya akan menggunakan penataan file dan folder seperti diatas, jadi anda hanya perlu menyesuaikan.

di tutorial selanjutnya saya akan membahas tentang component pada React Js, sekian dan sampai jumpa

2
Gambar Gravatar
Pusatnya pengetahuan Teknik Informatika dan Pengetahuan Lainya

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *