13-07-2025 | Admin User Dasar 28 x dilihat

Cara Install React.js

Install React.js

Tujuan

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

Komputer dengan sistem operasi Windows, macOS, atau Linux.
Koneksi internet untuk mengunduh dependensi.
Kode editor seperti Visual Studio Code (disarankan), Sublime Text, atau lainnya.

Langkah 1: Menginstal Node.js dan npm

React.js memerlukan Node.js (yang mencakup npm, Node Package Manager) untuk menjalankan dan mengelola dependensi proyek.

Unduh Node.js:
- Kunjungi situs resmi nodejs.org.
- Unduh versi LTS (Long Term Support) yang direkomendasikan untuk stabilitas.
- Ikuti petunjuk instalasi untuk sistem operasi Anda.
Verifikasi Instalasi:
- Buka terminal (Command Prompt di Windows, Terminal di macOS/Linux).
- Jalankan perintah berikut untuk memeriksa versi Node.js dan npm:
```
node -v
npm -v
```
- Anda akan melihat nomor versi, misalnya v20.x.x untuk Node.js dan v10.x.x untuk npm. Jika tidak muncul, ulangi instalasi.

Langkah 2: Menginstal Create React App

Create React App adalah alat resmi untuk membuat proyek React dengan konfigurasi siap pakai. Untuk menginstal dan membuat proyek baru, ikuti langkah berikut:

Buka terminal.
Jalankan perintah berikut untuk membuat proyek React baru:
```
npx create-react-app my-first-react-app
```
- npx memungkinkan Anda menjalankan Create React App tanpa menginstalnya secara global.
- my-first-react-app adalah nama folder proyek. Anda bisa menggantinya sesuai keinginan, misalnya belajar-react.
- Proses ini akan mengunduh dependensi dan membuat struktur proyek, yang mungkin memakan waktu beberapa menit tergantung koneksi internet.

Setelah selesai, Anda akan melihat pesan sukses dan struktur folder seperti ini:

my-first-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Langkah 3: Masuk ke Direktori Proyek

Pindah ke direktori proyek yang baru dibuat dengan perintah:

cd my-first-react-app

Langkah 4: Menjalankan Aplikasi

Untuk menjalankan aplikasi React, gunakan perintah:

npm start

Perintah ini akan memulai server pengembangan dan membuka aplikasi di browser default Anda pada alamat http://localhost:3000.
Jika browser tidak terbuka otomatis, buka alamat tersebut secara manual.
Anda akan melihat halaman default dari Create React App, yang menampilkan logo React dan teks sambutan.

Langkah 5: Memahami Struktur Proyek

Berikut adalah penjelasan singkat tentang file dan folder penting:

public/index.html: File HTML utama yang menjadi entry point aplikasi.
src/: Folder tempat Anda menulis kode React (komponen, logika, dan gaya).
src/App.js: Komponen utama aplikasi yang dapat Anda modifikasi.
src/index.js: File yang merender aplikasi ke DOM.
package.json: Berisi dependensi proyek dan skrip seperti npm start.

Langkah 6: Menguji Aplikasi

Buka kode editor (misalnya VS Code) dan buka folder my-first-react-app.

Buka file src/App.js dan coba ubah teks di dalamnya, misalnya ganti <h1> di dalam komponen App:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Selamat Datang di Aplikasi React Saya!</h1>
    </div>
  );
}

export default App;

Simpan file. Server pengembangan akan otomatis memuat ulang (hot reloading), dan Anda akan melihat perubahan di browser.

Langkah 7: Membersihkan File Default (Opsional)

Untuk membuat proyek lebih ringkas:

Hapus file yang tidak diperlukan di folder src, seperti App.test.js, logo.svg, dan setupTests.js.
Kosongkan atau sesuaikan isi src/App.css untuk gaya kustom.

Contoh App.css sederhana:

.App {
text-align: center;
margin-top: 50px;
}