Tutorial ReactJS #2: Struktur Direktori ReactJS

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.

1. Node version >= 8.10
2. 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 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 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.

Terimakasih…