Cara Install React untuk Pemula - Perwira Learning Center

 

Cara Install React untuk Pemula

 

1. Latar Belakang

    React merupakan pustaka JavaScript yang dikembangkan oleh Facebook (Meta) untuk membangun antarmuka pengguna yang dinamis dan interaktif. Sebelum dapat menggunakan React, seorang developer perlu menyiapkan lingkungan pengembangan yang tepat di komputernya.

    Proses instalasi React sering menjadi hambatan pertama bagi pemula. Artikel ini hadir untuk memandu langkah demi langkah agar lingkungan pengembangan React dapat berjalan dengan baik dan siap digunakan untuk membangun project pertama Anda.

 

2. Alat dan Bahan

a. Perangkat Lunak

    • Terminal / Command Prompt
    • Text Editor (VS Code)
    • Web Browser (Firefox / Chrome)
    • Node.js & npm (unduh di nodejs.org)

b. Perangkat Keras

    • Laptop / Komputer

3. Pembahasan

3.1 Apa Itu Node.js dan npm?

Sebelum menginstal React, Anda perlu menginstal Node.js terlebih dahulu. Node.js adalah runtime JavaScript yang memungkinkan JavaScript berjalan di luar browser. npm (Node Package Manager) adalah manajer paket yang ikut terinstal bersama Node.js dan digunakan untuk menginstal library termasuk React.

3.2 Cara Install Node.js

    1. Kunjungi situs resmi nodejs.org dan unduh versi LTS (Long Term Support).
    2. Jalankan installer dan ikuti instruksi yang muncul.
    3. Verifikasi instalasi dengan membuka terminal dan ketik: node -v dan npm -v

3.3 Membuat Project React dengan Vite

Vite adalah build tool modern yang lebih cepat dibandingkan Create React App. Berikut cara membuat project React menggunakan Vite:

npm create vite@latest nama-project -- --template react
cd nama-project
npm install
npm run dev

Setelah menjalankan perintah di atas, buka browser dan akses http://localhost:5173. Jika halaman React muncul, instalasi berhasil!

 

 3.4 Struktur Folder Project React

Setelah project dibuat, Anda akan melihat struktur folder seperti berikut:

    • src/ — Folder utama tempat kode React ditulis.
    • public/ — Folder untuk aset statis seperti gambar dan ikon.
    • package.json — File konfigurasi project dan daftar dependency.
    • vite.config.js — File konfigurasi Vite.

4. Daftar Pustaka

Dicoding Indonesia. (2022). Cara memulai React untuk pemula. https://www.dicoding.com/blog/cara-memulai-react-untuk-pemula/

Petani Kode. (2021). Tutorial ReactJS untuk pemula: cara install dan setup React. https://www.petanikode.com/reactjs-untuk-pemula/

Niagahoster. (2023). Cara install React JS untuk pemula. https://www.niagahoster.co.id/blog/react-js/

Dewaweb. (2022). Cara install React JS di komputer. https://www.dewaweb.com/blog/react-js/