---
# System prepended metadata

title: PANDUAN INSTALASI KEBUTUHAN DAY 1 DAN PENGATURAN AWAL REACT JS
tags: [Documentation, Templates]

---


![logo-2](https://hackmd.io/_uploads/Byd-djlXyg.png)

PANDUAN INSTALASI KEBUTUHAN DAY 1 DAN PENGATURAN AWAL REACT JS
===
>Wonderfull Adventure Of Website Season 5 
[CODER Telkom University Surabaya] [color=#ff0000]

## Table of Contents

[TOC]

## Apa Yang Perlu Disiapkan?

1. **Laptop atau PC** dengan sistem operasi:
    - Windows 10/11 (disarankan versi terbaru)
    - macOS (versi terbaru)
    - Linux (untuk guidebook ini menggunakan debian based distro)
2. **Editor Kode**: Kami merekomendasikan Visual Studio Code (VS Code).
3. **Browser Modern**: Chrome, Firefox, atau Edge.
4. ==**Koneksi internet yang stabil**==

Instalasi NodeJs & NPM
---
Sebelum mulai dengan ReactJS, ==kita perlu menginstal Node.js== karena ReactJS bergantung pada ekosistem Node.js untuk menjalankan aplikasi dan mengelola dependensi menggunakan npm (Node Package Manager). 

Sebelum melanjutkan instalasi, pastikan anda sudah memenuhi persyaratan diatas dan memiliki ==koneksi internet yang stabil==

Berikut langkah-langkah instalasi berdasarkan sistem operasi Anda:


## Windows 
>Installasi Node.js untuk Sistem Operasi Windows
    
1. Pergi ke web [NodeJs]("https://nodejs.org/en/download/prebuilt-installer")

2. Pilih versi node js yang kalian inginkan (minimum untuk create-react-app adalah 14.0.0 ) atau bisa memilih versi yang sama  pada gambar
![Cuplikan layar 2024-11-24 101818](https://hackmd.io/_uploads/rJiNzhlmyg.png)

3. Klik download 
4. Buka set up node js nya 
![Cuplikan layar 2024-11-24 103839](https://hackmd.io/_uploads/BkXIfngQyx.png)

5. Centang license & agreement lalu klik next 
![Cuplikan layar 2024-11-24 103907](https://hackmd.io/_uploads/rkkwMnxmJl.png)

 
6. Pilih destinasi untuk tempat node js diinstal
![Cuplikan layar 2024-11-24 103924](https://hackmd.io/_uploads/SkpDM3g7kg.png)


7. Pada tampilan ini, anda bisa mengatur untuk instalasi node js nya. Pastikan opsi 'Add to PATH' tercentang agar Node.js, npm, dan modul yang terpasang secara global bisa dikenali oleh komputer. Jika sudah klik next
![Cuplikan layar 2024-11-24 104047](https://hackmd.io/_uploads/B1iuM2gXJg.png)


 
6. Pada tampilan ini, Anda diberikan pilihan untuk menambahkan tools pendukung seperti Python dan Visual Studio Build Tools. Namun, jika Anda tidak memerlukannya (misal untuk penggunaan Node.js dasar), Anda bisa melewati opsi ini dengan tidak mencentangnya
![Cuplikan layar 2024-11-24 104427](https://hackmd.io/_uploads/H14FMhxQyg.png)





7. Jika sudah muncul tampilan seperti ini, maka anda siap untuk menginstal Node.js pada komputer anda 
![Cuplikan layar 2024-11-24 104458](https://hackmd.io/_uploads/rJ1cMheQyg.png)



8. Jika sudah selesai proses instalasinya, anda bisa klik finish 
![Cuplikan layar 2024-11-24 104815](https://hackmd.io/_uploads/SyNTfhgmkg.png)


9. Buka powershell atau cmd untuk memeriksa apakah Node.js dan NPM sudah terinstal pada komputer. Setelah itu ketikkan kedua command dibawah ini :
```
node –-version 
```

```
npm –-version
```

![Cuplikan layar 2024-11-24 104939](https://hackmd.io/_uploads/SyQAf2emJe.png)

 
 
## Mac OS 
>Installasi Node.js untuk Sistem Operasi MacOS

### Instalasi Menggunakan Homebrew Package Manager (Disarankan) 
:::info 
#### Installasi Homebrew 
> lewati langkah ini jika homebrew sudah terinstall di komputer anda
:::

1. Pergi ke webiste resmi dari homebrew : [:beer: Homebrew]("https://brew.sh"). 
![image4](https://hackmd.io/_uploads/BJOktnxXkl.png)

2. Buka terminal di macos dengan menekan tombol `command (⌘) + space`. Lalu ketikan “terminal” dan tekan `return / enter`
![image](https://hackmd.io/_uploads/Byvpt3lQJe.png)

3. Salin kode yang ada di website  [:beer: Homebrew]("https://brew.sh"). 
![image4](https://hackmd.io/_uploads/BJOktnxXkl.png)

Atau Salin kode dibawah ini:
```bash!
/bin/bash -c "$(curl -fsSL     https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 
```

4. Tempelkan di terminal dan tekan enter
![image24](https://hackmd.io/_uploads/SJOicheXyl.png)
Masukkan password komputer anda dan tekan enter lagi
Setelah muncul seperti gambar dibawah, tekan enter lagi
![image14](https://hackmd.io/_uploads/ByS3cnl71l.png)

5. Tunggu hingga proses download dan instalasi selesai & pastikan komputer anda terkoneksi dengan internet selama instalasi
![image12](https://hackmd.io/_uploads/H1myjneQ1x.png)

6. Salin dan tempelkan perintah berikut di terminal, lalu tekan enter untuk menjalankan
![image](https://hackmd.io/_uploads/B1UnjnxmJe.png)
    > perintah dapat berbeda-beda sesuai komputer 


7. Setelah itu jalankan perintah dibawah di terminal
```bash!
brew --version
```
![image35](https://hackmd.io/_uploads/SyXPThgQJg.png)
Jika sudah persis seperti diatas, instalasi homebrew telah sepenuhnya berhasil

:::info 
#### Installasi Node JS & NPM 
:::

1. Buka terminal di macos dengan menekan tombol `command (⌘) + space`. Lalu ketikan “terminal” dan tekan `return / enter`
![image](https://hackmd.io/_uploads/Byvpt3lQJe.png)

2. Ketikan perintah berikut di terminal dan tekan enter
```bash!
brew install node
```
Tunggu hingga instalasi selesai
![image](https://hackmd.io/_uploads/HJOpRhg7ke.png)

3. Ketikan perintah berikut di terminal dan tekan enter
```bash!
node -v
npm -v
```
![image18](https://hackmd.io/_uploads/r1fz1aemJe.png)

Jika sudah tampil seperti diatas maka instalasi sudah berhasil

### Instalasi Menggunakan Installer

1. Pergi ke halaman download resmi NodeJs : [Node.js — Download Node.js®](https://nodejs.org/en/download/package-manager)
![image](https://hackmd.io/_uploads/Skfck6l71x.png)


2. Pastikan versi yang dipilih merupakan versi yang terbaru dan pilihan sudah seperti gambar dibawah
![image36](https://hackmd.io/_uploads/rkExlpl7yx.png)
Jika sudah, klik tombol download

3. Jika download sudah selesai, double klik pada item yang baru di download
![image1](https://hackmd.io/_uploads/rytmgpeXyx.png)


4. Pastikan setup instalasi tampil
![image26](https://hackmd.io/_uploads/SJcrlagQye.png)
Klik continue

5. Klik Continue di halaman lisensi
![image27](https://hackmd.io/_uploads/SJqvg6eXyg.png)

6. Klik Agree untuk melanjutkan
![image6](https://hackmd.io/_uploads/HykKlalQyx.png)


7. Klik Install
![image33](https://hackmd.io/_uploads/BkY1Z6e7yg.png)
> Anda bisa melakukan kustomisasi instalasi di bagian ini, juga memilih lokasi instalasi. Namun untuk saat ini kita akan menggunakan instalasi default.

![image28](https://hackmd.io/_uploads/HkUzZpx7kl.png)
Anda akan diminta untuk memasukkan password ketika menginstall

Tunggu proses installasi selesai
![image30](https://hackmd.io/_uploads/Sk5NWaxQye.png)


Instalasi berhasil jika sudah tampil seperti ini

![image13](https://hackmd.io/_uploads/BkR_WaeXJx.png)
:::info
:bulb: Pengaturan tambahan
Buka terminal dan jalankan perintah 
```bash!
export PATH=/usr/local/bin:$PATH
```
`Langkah ini dilakukan untuk menambahkan Node yang baru saja di instal kedalam path variable agar bisa diakses secara global`
:::

8. Jika sudah klik close, dan Klik move to trash untuk menghapus installer
![image25](https://hackmd.io/_uploads/BJvlGagXJe.png)

9. Ketikan perintah berikut di terminal dan tekan enter
```bash!
node -v
npm -v
```
![image31](https://hackmd.io/_uploads/rJXGG6lXkx.png)
Jika sudah tampil seperti diatas maka instalasi sudah sepenuhnya berhasil



## Linux (Debian Based)
>Installasi Node.js untuk Sistem Operasi Linux
1. Pergi ke web [NodeJs]("https://nodejs.org/en/download/prebuilt-installer")
![Screenshot from 2024-11-24 19-42-52](https://hackmd.io/_uploads/ryjVD3eQJg.png)


3. Buka terminal dengan menekan tombol window, lalu klik enter
![Screenshot from 2024-11-24 19-45-24](https://hackmd.io/_uploads/HJGDw3eXkl.png)

5. Salin command yang ada dibagian paling atas pada web Node.js 
![Screenshot from 2024-11-24 19-53-13](https://hackmd.io/_uploads/B1vuD3eX1l.png)
atau copy command di bawah:
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
```

4. Paste pada terminal dan klik enter, lalu tunggu prosesnya hingga muncul sesuai yang tertera pada gambar
![Screenshot from 2024-11-24 20-26-43](https://hackmd.io/_uploads/SkNhD3gQJg.png)


5. Restart terminal
6. Kembali pada halaman web Node.js lalu copy command yang tertera seperti pada gambar
![Screenshot from 2024-11-24 20-19-46](https://hackmd.io/_uploads/rJw6Dngmyg.png)
atau copy command dibawah ini :
```
nvm install 22
```

7. Paste pada terminal dan klik enter, lalu tunggu prosesnya hingga muncul sesuai yang tertera pada gambar
![Screenshot from 2024-11-24 20-28-53](https://hackmd.io/_uploads/ry7-dnlX1l.png)


7. Periksa apakah Node dan NPM sudah terinstal pada komputer, dengan mengetikkan kedua command di bawah ini : 

```
node -v
```
```
npm -v
```
![Screenshot from 2024-11-24 20-30-29](https://hackmd.io/_uploads/B1dMO2e7Jg.png)

## Penutup
**Itu tadi teman - teman, hal - hal yang perlu dipersiapkan dari menyiapkan pc atau laptop sampai dengan instalasi Node.js untuk mengikuti workshop WAOW day 1** :+1: 


Bila teman - teman memiliki kendala saat instalasi Node.js atau kendala lain, bisa didiskusikan di grup peserta :i_love_you_hand_sign: 

Terimakasih, semangat menjalani workshop day 1 :smiley: 
==**Love U All**== -anomali panitia WAOW Season 5