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 komponenApp
atau komponen utama dari aplikasi; - 📄
App.test.js
berisi kode untuk testing komponenApp
; - 📄
index.js
berisi kode untuk render komponenApp
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 :