Scribd
Unggah
20 tayangan5 halaman

Pengenalan ReactJS 06

Cara Instalasi ReactJS

Diunggah oleh

shavenprojects
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
20 tayangan5 halaman

Pengenalan ReactJS 06

Cara Instalasi ReactJS

Diunggah oleh

shavenprojects
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

### 1.

Menggunakan `Create React App` (CRA)

`Create React App` adalah tool resmi dari tim React yang mempermudah setup proyek
React baru. Ini adalah cara termudah untuk memulai tanpa perlu konfigurasi manual.

#### Langkah-langkah

1. **Install Node.js dan npm**

Pastikan Anda memiliki **Node.js** dan **npm** (Node Package Manager) yang
sudah terinstall. Anda bisa mendownload dan menginstalnya dari [https://nodejs.org]
(https://nodejs.org).

2. **Buat Proyek React Baru**

Buka terminal atau command prompt, kemudian jalankan perintah berikut untuk
membuat proyek React baru:

```bash

npx create-react-app nama-proyek

```

- `npx` adalah tool dari npm yang memungkinkan Anda menjalankan package dari npm
tanpa perlu menginstalnya secara global.

- Ganti `nama-proyek` dengan nama proyek yang ingin Anda buat.

3. **Masuk ke Direktori Proyek dan Jalankan Aplikasi**

```bash

cd nama-proyek

npm start

```

Aplikasi React Anda akan berjalan di `http://localhost:3000`.

### 2. Menggunakan Vite untuk Setup yang Lebih Cepat


**Vite** adalah bundler modern yang menawarkan setup lebih ringan dan waktu build
lebih cepat dibandingkan `Create React App`.

#### Langkah-langkah

1. **Install Vite dan Buat Proyek Baru**

Jalankan perintah berikut di terminal untuk membuat proyek React dengan Vite:

```bash

npm create vite@latest nama-proyek --template react

```

2. **Install Dependencies**

Setelah proyek dibuat, masuk ke direktori proyek:

```bash

cd nama-proyek

npm install

```

3. **Jalankan Aplikasi**

Untuk memulai server pengembangan, jalankan:

```bash

npm run dev

```

Aplikasi akan berjalan di `http://localhost:5173`.


### 3. Instalasi Manual dengan Webpack (Advanced)

Metode ini memungkinkan Anda mengatur sendiri semua konfigurasi, dari babel hingga
loader CSS. Ini biasanya digunakan untuk proyek yang memerlukan pengaturan khusus.

#### Langkah-langkah Singkat

1. **Buat Folder Proyek Baru dan Install Dependencies**

```bash

mkdir nama-proyek

cd nama-proyek

npm init -y

npm install react react-dom

npm install -D webpack webpack-cli webpack-dev-server babel-loader @babel/core


@babel/preset-react

```

2. **Buat File Konfigurasi Webpack dan Babel**

- Buat file `webpack.config.js` dan tambahkan konfigurasi webpack.

- Buat file `.babelrc` untuk konfigurasi babel.

3. **Buat Struktur Folder**

- Buat folder `src` dengan file `index.js` sebagai entry point aplikasi.

4. **Jalankan Aplikasi**

Tambahkan script `start` di `package.json`, lalu jalankan dengan:

```bash

npm start

```
### 4. Menggunakan CDN (untuk Proyek Sederhana)

Anda juga bisa menambahkan React melalui CDN untuk proyek sederhana yang tidak
memerlukan setup atau tooling khusus.

#### Langkah-langkah

Tambahkan script berikut ke dalam file HTML:

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>React App</title>

<script src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin></script>

<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin></script>

</head>

<body>

<div id="root"></div>

<script>

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(React.createElement('h1', null, 'Hello, React!'));

</script>

</body>

</html>

```
Metode ini hanya cocok untuk proyek kecil atau percobaan karena tidak memiliki banyak
fitur yang ditawarkan oleh environment pengembangan React yang lengkap.

Anda mungkin juga menyukai