Pada tutorial sebelumnya kita sudah belajar dasar ReactJS, namun di sana kita hanya sebatas menggunakan ReactJS sebagai library dengan menyisipkan langsung ke HTML melalui CDN (Content Delivery Network).
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
Penulisan seperti ini boleh-boleh saja, hanya saja saat nanti kita membuat aplikasi besar, kita akan menemukan masalah. Yeitu kesulitan mengelola source code karena banyaknya kode, oleh sebab itu kita harus membuat project ReactJS.
Sebelum mulai, pastikan kita sudah menginstal Nodejs dan NPM di komputer/laptop kita. Jika belum tahu caranya, silahkan baca tutorial ini :
Pada tutorial ini menggunakan Nodejs v18.16.1 dan NPM v9.5.1.
Membuat Project Reactjs
Kita membutuhkan create-react-app untuk membuat project Reactjs. create-react-app adalah program berbasis CLI yang memang khusus digunakan untuk membuat projek React. Program ini akan meng-generate semua hal yang kita butuhkan untuk proyek awal, mulai dari package.json, file index.html, file index.js dan sebagainya.
Ada dua cara menggunakannya:
- Diinstal dulu, baru digunakan
- Digunakan langsung dengan NPX
Jika kita ingin menginstalnya, silahkan ketik perintah berikut di cmd/terminal :
npm install -g create-react-app
Tunggulah sampai proses instalasinya selesai, dan hasilnya seperti berikut :
Setelah itu, barulah kita bisa gunakan dengan seperti ini:
create-react-app nama-project
Atau jika kita tidak ingin menginstalnya, cukup pakai NPX saja.
npx create-react-app nama-project
Aturan penulisan nama project harus menggunakan huruf kecil. Jika ada dua suku kata, maka bisa dipisah dengan –.
Seakarang kita coba :
create-react-app belajar-react
Tunggulah sampai prosesnya selesai.
Jika yarn sudah terinstal di komputer kita, create-react-app secara default akan menggunakannya. yarn adalah package manager Nodejs buatan Facebook yang fungsinya sama seperti npm.
Tapi kalau tidak ada yarn, maka ia akan menggunakan NPM. Atau jika ingin tetap menggunakan npm, kita bisa tambahkan argumen –use-npm atau –use-pnpm (untuk PNPM).
Jika project sudah selesai dibuat, maka akan ada folder baru bernama belajar-react pada folder tempat perintah itu dijalankan.
Sekarang coba buka folder tersebut dengan VS Code. Klik menu File->Open Folder, lalu cari foldernya.
Memahami Struktur Direktori Project React
Berikut ini adalah struktur direktori dari proyek React.
- Folder node_modules berisi paket-paket modul Nodejs, semua library yang kita install dengan npm akan disimpan di sini.
- Folder public berisi file untuk publik seperti HTML, CSS, icon, dan gambar, dan aset publik lainnya.
- File index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen.
- Folder src berisi kode dari aplikasi Reactjs, di sinilah kita akan membuat komponen.
- File App.js berisi kode untuk komponen App atau komponen utama dari aplikasi.
- File App.test.js berisi kode untuk testing komponen App.
- File index.js berisi kode untuk render komponen App ke Real DOM.
- File serviceWorker.js berisi kode untuk service worker, ini kita butuhkan nanti saat membuat aplikasi PWA (Progressive Web Apps).
- File setTests.js berisi kode untuk testing aplikasi.
- File .gitignore berisi kode-kode yang akan diabaikan oleh Git.
- File package.json file JSON yang berisi keterangan proyek dan daftar modul-modul yang dibutuhkan.
- File yarn.lock adalah file yang digunakan Yarn untuk mengunci versi-versi modul Nodejs yang digunakan.
Itulah struktur direktori default di proyek Reactjs. Nanti kita akan banyak menulis kode di dalam folder src. Selanjtnya kita pelajari dulu tools yang biasa digunakan di dalam project Reactjs.
Memahami Tools di Project Reactjs
Pada proyek React, kita akan sering menggunakan beberapa tools berikut :
1. NPM dan Yarn
NPM dan Yarn merupakan tools yang dipakai untuk manajemen proyek di Nodejs.
Kita boleh pakai salah satu. Jika nyaman pakai Yarn silahkan pakai, tapi pakai NPM juga boleh.
Fungsi NPM dan Yarn :
-
- Menginstal tools dan library yang dibutuhkan di proyek
- Menjalankan script untuk webserver dan build
- Menjalankan Test, dan lain-lain.
Buat yang belum paham cara menggunakan NPM, bisa baca tutorial ini :
2. Jest
Jest adalah testing framework yang fungsinya untuk menjalankan test. Ini belum kita butuhkan di tahap awal belajar React. Tapi nanti di level advance, kita harus belajar gimana cara test aplikasi dengan Jest ataupun framework yang lainnya. Tujuannya agar aplikasi yang kita buat, 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. Jadi buat yang pernah belajar Webpack akan paham dengan fungsi React Script.
4. Git
Git merupakan salah satu version control system (VCS). Git kita butuhkan saat bekerja di sebuah tim untuk mencatat segala perubahan di source code. Untuk tahapan belajar, kita belum membutuhkan tools ini. Tapi jika ingin mempelajari Git, bisa ikuti Tutorial Git.
Itulah beberapa tools yang sering digunakan dalam proyek Reactjs. Pada tahapan awal, kita akan sering menggunakan NPM dan Yarn untuk menginstal dan menjalankan proyek.
Latihan Menjalankan Aplikasi React
Sekarang mari kita coba jalankan aplikasinya, silahkan buka terminal pada VS Code dengan menekan Ctrl+Shift+` (back tick). Kemudian ketik peintah berikut :
yarn start
jika menggunakan yarn.
npm start
jika menggunakan npm.
Tunggu sampai server selesai dibuat
Dan browser akan terbuka secara otomatis.
Di atas adalah hasil aplilkasi react yang kita buat dengan create-react-app. Berikutnya kita tinggal modif sesuai kebutuhan. Untuk menghentikan server, tekan Ctrl+C.
Latihan Build Aplikasi React
Apabila aplikasi sudah selesai dikembangkan, kita bisa build aplikasinya untuk dipublish. Caranya, ketik perintah berikut :
yarn build
jika menggunakan yarn.
npm run build
jika menggunakan npm.
Tunggu sampai prosesnya selesai.
Maka akan ada folder baru bernama build yang berisi kode dari aplikasi yang siap untuk upload atau di-deploy ke server.
Kita juga bisa hapus folder build jika sudah selesai dan menggantinya dengan yang baru, tinggal jalankan perintah build lagi.
Kita sudah belajar tentang cara membuat proyek di Reactjs serta belajar tentang struktur direktori dan tools yang di pakai di dalamnya.
Berikutnya kita akan pelajari tentang mengenal Komponen React. Semoga bermanfaat, jika ada pertanyaan silahkan tyliskan di kolom komentar.
Referensi :
- https://www.petanikode.com/reactjs-project/
Be the first to comment