Pada tutorial part 2 kali ini kita akan melanjutkan membahas tutorial ReactJS. Kali ini kita akan membahas direktori dari ReacJS.
Untuk mempermudah saat instalasi maka untuk install ReactJS maka kita harus memiliki NPM terlebih dahulu. Karena ini akan dengan mudah untuk proses pembuatan aplikasi di bandingkan teman semua menggunakan CDN yang telah di sediakan.
Persiapan
Aplikasi ReactJS dikelola oleh Facebook dan dapat bekerja pada platform apa pun, misalnya macOS, Windows, Linux, dll. Untuk membuat Proyek React teman semua menggunakan create-react-app, Anda harus menginstal hal-hal berikut di sistem teman semua.
- Node version >= 8.10
- NPM version >= 5.6
Mari teman semua kita cek versi dari Node dan NPM yang kita miliki, di sini saya menggunakan Node v14.17.0 dan npm 7.18.1

Install ReactJS
Kita dapat menginstal React menggunakan npm package manager dengan menggunakan perintah berikut. Tidak perlu khawatir tentang kerumitan instalasi React. Paket npm create-react-app akan mengelola semua yang diperlukan untuk proyek React.
npm install -g create-react-app
Buat Project Baru
Setelah instalasi React berhasil, teman semua dapat membuat proyek React baru menggunakan perintah create-react-app. Di sini, saya memilih nama “teman-project” untuk proyek saya.
create-react-app reactproject
npx create-react-app reactproject

Perintah di atas akan memakan waktu untuk menginstal React dan membuat proyek baru dengan nama “teman-project” Sekarang, kita dapat melihat terminal seperti di bawah ini.

Sekarang teman bisa coba buka project yang telah kita buat dengan VS Code, maka kita akan mendapatkan struktur file seperti di bawah ini.

Kita telah selesai membuat project pertama kita dengan create-react-app.
Struktur Direktori Project React
Berikut ini adalah struktur direktori dari proyek React.
- 📁
node_modules
berisi paket-paket modul Nodejs; semua libaray yang kita install 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 kita akan membuat 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 kita butuhkan nanti 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.
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.
Kamu boleh pakai salah satu. Jika nyaman pakai Yarn, silahkan pakai itu. 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.
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, kamu harus belajar gimana cara test aplikasimu 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 kamu 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.
Jika teman ingin mempelajari Git, bisa ikuti tutorial di bawah ini.
Tutorial Git flow – Work flow Dasar
Dan teman semua bisa pelajari tutorial ReactJS sebelumnya:
Tutorial React JS Part #1: Pengenalan Dasar React JS
Demikian untuk tutorial kali ini, semoga bermanfaat. Salam ngoding untuk teman semua.