Struktur Project & Tools pada ReactJS

 


Sebelum memulai pembuatan project selanjutnya, maka perlu dipahami struktur dari project react tersebut. Hal ini diperlukan untuk memudahkan dalam penambahan-penambahan form atau file yang berkatan.

Struktur direktori proyek React.

  • 📁 node_modules berisi paket-paket modul Nodejs; semua libaray yang diinstall dengan npm akan disimpan di sini.
  • 📁 public berisi file untuk publik seperti HTML, CSS, icon, dan gambar, dan aset publik lainnya;
    • 📄 index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen.
  • 📁 src berisi kode dari aplikasi Reactjs, di sinilah akan membuat atau ditaruh komponen;
    • 📄 App.js berisi kode untuk komponen App atau komponen utama dari aplikasi;
    • 📄 App.test.js berisi kode untuk testing komponen App;
    • 📄 index.js berisi kode untuk render komponen App ke Real DOM;
    • 📄 serviceWorker.js berisi kode untuk service worker, ini dibutuhkan saat membuat aplikasi PWA (Progressive Web Apps);
    • 📄 setTests.js berisi kode untuk testing aplikasi.
  • 📄 .gitignore berisi kode-kode yang akan diabaikan oleh Git.
  • 📄 package.json file JSON yang berisi keterangan proyek dan daftar modul-modul yang dibutuhkan.
  • 📄 yarn.lock adalah file yang digunakan Yarn untuk mengunci versi-versi modul Nodejs yang digunakan.


Tools di Project Reactjs

Pada proyek React, sering menggunakan beberapa tools berikut :

1. NPM dan Yarn

NPM dan Yarn merupakan tools yang dipakai untuk manajemen proyek di Nodejs.

Fungsi NPM dan Yarn:

  • Menginstal tools dan library yang dibutuhkan di proyek
  • Menjalankan script untuk webserver dan build
  • Menjalankan Test serta fungsi lain.

2. Jest

Jest adalah testing framework yang fungsinya untuk menjalankan test. Jest digunakan untuk menguji suatu project yag dibuat aman dari bugs.

3. React Script

React script dijalankan dari NPM dan Yarn. Fungsinya untuk menggabungkan atau kompilasi source menjadi satu sehingga dapat dibuka dari browser. React Script menggunakan Webpack di dalamnya.

4. Git

Git merupakan salah satu version control system ( VCS ). Git dibutuhkan jika bekerja dalam tim untuk mencatat segala perubahan di source code. 


Menjalankan project React 

yarn start # menggunakan yarn

npm start # menggunakan npm

kemudian browser terbuka secara otomatis atau jika tidak bukan browser ketikan localhost:3000 



Build Project React

Untuk build project, gunakan perintah :

yarn build # menggunakan yarn

npm run build # menggunakan npm

Jika project React sudah di build maka akan ditampilkan seperti dibawah ini struktur yang terlihat :