Setup Project React.js

Goal

1. Mengerti Alat apa saja yang dibutuhkan. (Tools, IDE, Browser, Bahasa Pemrograman)
2. Mengerti Cara setup / memulai project React.js (menggunakan Vite)
3. Alasan kenapa menggunakan Vite?
4. Mengerti Struktur Dasar Project
5. Running / Debug Project

Tools

Kita memerlukan beberapa hal berikut untuk memulai belajar react.js :

• Koneksi internet
• VSCode (https://code.visualstudio.com/download)
• Node.js (https://nodejs.org/en/download/current)
• Vite

Pertama tentu saja kita memerlukan koneksi internet, dan untuk IDE atau alat codingnya saya memilih vscode karena gratis. Untuk node.js ada beberapa alasan kita untuk menginstall dan menggunakan nya yaitu : sebagai runtime (untuk menjalankan react agar bisa running di server), package manager (untuk instal beberapa library/package lain).

selanjutnya kita akan menggunakan vite sebagai build tools-nya. Nah untuk temen2 yang kurang familiar, jangan khawatir karena kita hanya akan fokus ke teknologi react nya saja, dan vite ini akan kita set di awal dan di akhir project nya selesai nanti. Intinya vite kita pilih karena bisa mempercepat proses build & development kita kedepannya.

Initial Project

kita bisa menjalankan perintah berikut :

npm create vite@latest

takan y dan enter untuk menginstall beberapa package vite.

Kita akan disuruh memasukkan nama project dan ketik belajar-react, lalu pilih React, dan pilih Javascript.

Selanjutnya kita bisa masuk ke folder project dengan cd belajar-react lalu ketik npm install untuk menginstall alat yang dibutuhkan untuk project kita.

Selain itu kita bisa membuka project tadi menggunakan vscode dengan code .

Setelah selesai kita bisa menjalankan project kita dengan ketik npm run dev

Jika sudah kita membuka nya melalui http://localhost:**5173**

Berikut kira-kira tampak struktur project jika sudah berhasil di setup.

Jika sudah kita bisa memulai belajar react nya 😎