Tutorial ReactJS #2 : Memahami Struktur Direktori Project React

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:

  1. Diinstal dulu, baru digunakan
  2. 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 .

Baca Juga  Tutorial ReactJS #1 : Pengenalan Dasar ReactJS

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.
Baca Juga  Tutorial ReactJS #3 : Components di React

 

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.

Baca Juga  Pengertian JSON dan Penggunaannya dalam Pemrograman

 

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/

Related Post

Be the first to comment

Leave a Reply

Your email address will not be published.


*


error: Ga bisa dicopy