Belajar React js Pemula #2: Menyusun dan Memahami Struktur Direktori Project React dengan Mudah

Belajar React js Pemula - Memulai perjalanan dengan React js bisa terasa menantang, terutama bagi pemula. Namun, dengan panduan ini, kamu akan memahami langkah-langkah dasar menyusun dan memahami struktur direktori project belajar React js dengan mudah. Sebelum melanjutkan, pastikan kamu sudah memahami dasar-dasar React js dari tutorial sebelumnya.

Pada artikel ini, kita akan belajar tentang cara membuat project belajar React js menggunakan create-react-app dan memahami struktur direktori yang dihasilkan. Proses ini penting karena struktur direktori yang rapi dan terorganisasi adalah kunci untuk pengembangan aplikasi yang skalabel.

Persiapan Awal: Instalasi Node.js dan NPM

Sebelum memulai, pastikan kamu sudah menginstal Node.js dan NPM di komputer. Node.js memungkinkan kamu untuk menjalankan JavaScript di luar browser, sementara NPM digunakan untuk mengelola paket-paket yang dibutuhkan dalam project.

Jika belum tahu caranya, kamu bisa mengikuti tutorial:

• Cara Install Node.js
• Mengenal NPM untuk Manajemen Project Node.js

Pada panduan ini, kita menggunakan Node.js versi 14.18.0 dan NPM versi 6.14.15. Setelah instalasi selesai, pastikan semuanya berjalan lancar dengan mengetik perintah berikut di terminal:

node -v
npm -v

Jika versi Node.js dan NPM muncul, berarti kamu siap untuk melanjutkan ke langkah berikutnya.

Baca Juga: Belajar React JS Pemula #1: Pengenalan Dasar ReactJS

Membuat Project React js dengan Create React App

Create-React-App adalah alat berbasis CLI yang dirancang untuk mempermudah pembuatan proyek belajar React js. Alat ini akan menghasilkan semua file dan folder yang dibutuhkan untuk memulai, termasuk package.json, file HTML, dan entry point seperti index.js.

Ada dua cara untuk menggunakannya:

1. Menginstalnya terlebih dahulu dengan perintah:

   [sudo] npm install -g create-react-app

(Sudo digunakan jika kamu menggunakan sistem operasi Linux)

1. Menggunakan perintah npx tanpa perlu instalasi permanen:

   npx create-react-app nama-project

Misalnya, jika kita ingin membuat project bernama "belajar-react", cukup jalankan perintah:

npx create-react-app belajar-react

Setelah proses selesai, kamu akan melihat folder baru bernama "belajar-react". Ayo buka folder tersebut menggunakan VS Code dengan memilih menu File > Open Folder.

Memahami Struktur Direktori Project React

Berikut ini adalah struktur direktori default dari project React yang dihasilkan oleh create-react-app:

📁 belajar-react
|-- 📁 node_modules
|-- 📁 public
|   |-- 📄 index.html
|   |-- 📄 favicon.ico
|-- 📁 src
|   |-- 📄 App.js
|   |-- 📄 index.js
|   |-- 📄 App.css
|-- 📄 .gitignore
|-- 📄 package.json
|-- 📄 README.md

Baca Juga: React JS Versi Terbaru, Caritahu Yuk!

Mari kita bahas fungsi setiap folder dan file penting di dalamnya:

Folder node_modules

Berisi semua dependencies atau modul Node.js yang dibutuhkan oleh aplikasi. Saat kamu menginstal pustaka baru dengan NPM atau Yarn, isinya akan bertambah secara otomatis.

Folder public

Folder ini berisi aset publik yang akan digunakan oleh aplikasi. Di sini terdapat file index.html yang menjadi entry point aplikasi React.

• index.html: File ini digunakan sebagai wadah untuk me-render komponen React ke dalam DOM.

Folder src

Semua kode utama aplikasi React berada di folder ini. Beberapa file penting di dalamnya adalah:

• App.js: Komponen utama aplikasi yang akan digunakan sebagai kerangka dasar.
• index.js: File ini digunakan untuk me-render komponen utama (App) ke dalam DOM.
• App.css: File CSS untuk komponen App.

File .gitignore

Berisi daftar file dan folder yang akan diabaikan oleh Git. Misalnya, folder node_modules biasanya tidak diikutsertakan dalam repository karena ukurannya besar.

File package.json

Berisi informasi tentang project, termasuk dependencies yang dibutuhkan, skrip untuk menjalankan aplikasi, dan konfigurasi lainnya.

Tools yang Digunakan dalam Project React

Pada project React, kita akan sering menggunakan beberapa tools berikut:

1. NPM atau Yarn

Tools ini digunakan untuk mengelola dependencies, menjalankan skrip, dan membangun aplikasi. Kamu bisa memilih salah satu sesuai preferensi.

2. Jest

Merupakan framework untuk testing. Meskipun belum terlalu dibutuhkan di tahap awal, Jest akan sangat membantu saat kamu mulai membuat aplikasi yang lebih kompleks.

3. React Scripts

React Scripts digunakan untuk menjalankan development server, membangun aplikasi, dan menjalankan skrip lainnya. Di balik layar, React Scripts menggunakan Webpack untuk menggabungkan kode menjadi file yang siap digunakan.

Latihan: Menjalankan dan Memahami Proyek

Menjalankan Aplikasi React

Setelah project selesai dibuat, kamu bisa menjalankan aplikasi dengan perintah berikut di terminal:

npm start

Browser akan terbuka secara otomatis, menampilkan halaman default dari create-react-app. Untuk menghentikan server, tekan Ctrl+C di terminal.

Membuild Aplikasi React

Jika aplikasi sudah siap untuk di-deploy, gunakan perintah berikut untuk membuild aplikasi:

npm run build

Hasilnya akan disimpan di folder build. Folder ini berisi file yang sudah dioptimalkan untuk produksi.

Tips dan Trik dalam Menyusun Struktur Direktori

Agar proyek tetap rapi dan mudah dikelola, pertimbangkan tips berikut:

• Pisahkan Komponen: Buat folder khusus untuk menyimpan semua komponen React.
• Gunakan Modular CSS: Jika menggunakan CSS, simpan file CSS di folder yang sama dengan komponen terkait.
• Tambah Folder utils: Gunakan folder ini untuk menyimpan fungsi atau helper yang sering digunakan.

Kesimpulan

Belajar React js tidak hanya tentang memahami kode, tetapi juga tentang memahami struktur proyek yang baik. Dengan mengetahui fungsi setiap file dan folder, kamu akan lebih mudah mengelola proyek, terutama jika proyek tersebut semakin besar.

Ingin berbagi pengalaman atau bertanya lebih lanjut? Yuk, bergabung dengan komunitas di CodePolitan! Baik pemula maupun ahli, kamu bisa bertanya, membaca, dan menulis semua pemikiran yang ingin kamu bagikan.