9 Langkah Cara Install React 18 dengan Vite

Macam mana nak install projek React JS? Ikuti 9 langkah mudah cara install React 18 di PC/laptop anda menggunakan Vite:

1. Pastikan kita sudah ada Terminal (macOS/Linux) atau gunakan Git Bash (Windows) untuk run command.

2. Lepas tu, kita perlukan NodeJS (run-time environment).
Boleh gunakan nvm (Node Version Manager) atau download installer Nodejs daripada laman web nodejs.org
Nodejs ni dah install sekali dengan npm (Node Package Manager) untuk kita install apa-apa npm package yang diperlukan.
Buka Terminal/CMD. Semak versi Node JS sama ada sudah tersedia di dalam laptop kita:

node -v && npm -v

3. Kemudian, kita boleh gunakan Visual Studio Code (atau apa-apa code editor) untuk edit source code di dalam projek React kita. Semak versi VS Code sama ada sudah tersedia di dalam laptop kita:

code -v

Dah ada 3 tool asas ni? Cukup!

Saya nak letak folder projek ni dalam Desktop dengan nama react2024

4. Sekarang, kita akan gunakan Vite untuk install React. Buka terminal. Run command

npm create vite@latest react2024

untuk download React 18.

5. Jika keluar prompt
Need to install the following packages: create-vite@[latest-version]
sebegini (untuk first time Vite user), taip ‘y’ untuk proceed.

6. Bila diminta untuk pilih framework, boleh pilih React

7. Kemudian kita diminta untuk pilih variant. Untuk permulaan, tak perlu pilih Typescript atau lain-lain. Jadi, kita pilih Javascript sahaja.

8. Bila dah selesai muat turun & scaffolding, masuk ke folder react2024 tersebut. Run

cd react2024

npm install

npm run dev

untuk test dalam mode development.

9. Klik http://127.0.0.1:5173 (localhost, port 5173) dan lihat paparan di web browser.

Siap! Sekarang kita boleh mulakan pembangunan aplikasi web menggunakan React framework.

Seterusnya, kita akan belajar mengenai struktur projek React yang sudah kita install. Nantikan entri akan datang!