7 Menyiapkan Lingkungan dan Alat

Bab ini menjelaskan lingkungan pengembangan dan alat yang

diperlukan untuk React dan diperlukan agar Anda dapat memulai
pengembangan frontend. Dalam bab ini, kita akan membuat aplikasi
React starter sederhana dengan menggunakan starter kit create-react-
app, yang dikembangkan oleh Facebook.

Dalam bab ini, kita akan membahas topik-topik berikut:

 Menginstal Node.js
 Menginstal Kode Visual Studio
 Ekstensi Kode Visual Studio
 Membuat dan menjalankan aplikasi React.js menggunakan create-
react-app
 Memodifikasi aplikasi React

7.1 Menginstal NodeJS

Saat mengerjakan beberapa proyek NodeJS, Anda mungkin
diminta untuk menjalankan proyek yang berbeda pada versi nodejs yang
berbeda atau untuk proyek NodeJS lama, Anda mungkin memerlukan
versi nodejs yang lama, dan yang lainnya memerlukan versi NodeJS yang
baru , atau untuk memeriksa fitur baru NodeJS, Anda perlu menginstal
versi terbaru dari NodeJS.

Seperti pada mesin yang sama, kita hanya dapat menginstal satu
versi NodeJS, jadi sangat sulit untuk menghapus dan menginstal versi
node baru sesuai kebutuhan proyek Anda.

Untuk mengatasi masalah ini, kita dapat menggunakan Node

Version Manager (NVM). NVM memungkinkan menginstal beberapa
versi NodeJS pada mesin yang sama dan beralih di antara versi NodeJS
yang diperlukan.

7.1.1 Instalasi NVM

Berikut adalah beberapa tahapan yang diperlukan dalam
menginstal NVM:
1. Mengunduh versi terbaru dari NVM di link berikut:
https://github.com/coreybutler/nvm-windows/releases/latest
2. Mengunduh nvm-setup.zip dan menginstal di windows.
3. Memverifikasi instalasi.

4. Mendapatkan daftar semua versi NodeJS yang tersedia

5. Beberapa versi NodeJS dapat diinstal menggunakan perintah di

bawah ini

6. Melepas pemasangan beberapa versi NodeJS

7. Mendapatkan daftar versi NodeJS yang diinstal

8. Beralih Antara Versi NodeJS yang diinstal

7.2 Menginstal Visual Studio Code

Visual Studio Code (VS Code) adalah editor kode sumber terbuka
untuk beberapa bahasa pemrograman. VS Code dikembangkan oleh
Microsoft. Ada banyak editor kode berbeda yang tersedia, seperti Atom
dan Brackets, dan Anda dapat menggunakan sesuatu selain VS Code jika
Anda terbiasa dengannya. Kode VS tersedia untuk Windows, macOS, dan
Linux, dan Anda dapat mengunduhnya dari
https://code.visualstudio.com/.
 Penginstalan untuk Windows dilakukan dengan penginstal MSI,
dan Anda dapat menjalankan penginstalan dengan pengaturan default.
Tangkapan layar berikut menunjukkan media kerja VS Code. Di sisi kiri
adalah bilah aktivitas, yang dapat Anda gunakan untuk menavigasi di
antara tampilan yang berbeda. Di sebelah bilah aktivitas adalah bilah sisi
yang berisi tampilan berbeda, seperti penjelajah file proyek.

Gambar 7.1 Workbench Visual Studio Code

VS Code menyediakan terminal terintegrasi yang dapat Anda

gunakan untuk membuat dan menjalankan aplikasi React. Terminal
dapat ditemukan di View | Menu terminal terintegrasi. Anda akan
menggunakan ini di bab selanjutnya saat kita membuat lebih banyak
aplikasi React.

7.2.1 Ekstensi VS Code

Ada banyak ekstensi yang tersedia untuk berbagai bahasa dan
kerangka kerja pemrograman. Jika Anda membuka Ekstensi dari bilah
aktivitas, Anda dapat mencari ekstensi yang berbeda. Salah satu ekstensi
yang sangat berguna untuk pengembangan React adalah cuplikan kode
React.js, yang kami sarankan untuk diinstal. Ini memiliki beberapa
cuplikan kode yang tersedia untuk aplikasi React.js, yang membuat
proses pengembangan Anda lebih cepat. Kita akan menunjukkan cara
menggunakan ekstensi itu nanti.

Tangkapan layar berikut menunjukkan halaman instalasi cuplikan kode

React.js:

Gambar 7.2 Code Snippet VS Code

Ekstensi ESLint membantu Anda menemukan kesalahan ketik dan

sintaks dengan cepat dan membuat pemformatan kode sumber lebih
mudah:
 Gambar 7.3 Ekstensi ESLint

Prettier adalah pemformat kode. Dengan ekstensi Prettier, Anda

bisa mendapatkan pemformatan kode otomatis. Anda juga dapat
mengatur ini dari pengaturan VS Code sehingga Anda dapat memformat
kode secara otomatis setelah menyimpan kode Anda:
 Gambar 7.4 Ekstensi Prettier

Ini hanya beberapa contoh ekstensi hebat yang bisa Anda dapatkan
untuk VS Code. Selanjutnya, kita akan membuat aplikasi React pertama
kita dan mempelajari cara menjalankan dan memodifikasinya.

7.3 Membuat dan Menjalankan Aplikasi

React
Sekarang setelah kita menginstal Node.js dan editor kode, kita
siap untuk membuat aplikasi React.js pertama kita. Kita menggunakan
kit create-react-app (https://github.com/facebook/create-react-app)
Facebook untuk ini. Berikut adalah langkah-langkah yang perlu Anda
ikuti untuk membuat aplikasi pertama Anda:

1. Buka PowerShell atau terminal yang Anda gunakan dan ketik perintah
berikut:

Perintah ini membuat aplikasi React bernama myapp. Runner paket

npm adalah npx dan, saat Anda menggunakannya, Anda tidak perlu
menginstal paket sebelum menjalankannya:

2. Setelah aplikasi dibuat, pindahkan ke folder aplikasi Anda:

3. Kemudian, kita dapat menjalankan aplikasi dengan perintah berikut.

Perintah ini menjalankan aplikasi di port 3000 localhost dan
membuka aplikasi di browser:

4. Sekarang, aplikasi Anda sedang berjalan, dan Anda akan melihat

halaman berikut di browser Anda. Perintah npm start memulai
aplikasi dalam mode pengembangan:
7.4 Memodifikasi Aplikasi React
Sekarang, kita belajar bagaimana memodifikasi aplikasi React yang
kita buat menggunakan create-react-app. Kita akan menggunakan VS
Code, yang kita instal sebelumnya:

1. Buka folder aplikasi React Anda dengan VS Code dengan memilih File
| Open Folder. Anda akan melihat struktur aplikasi di file explorer.
Folder paling penting di fase ini adalah folder src, yang berisi kode
sumber JavaScript:
2. Buka file App.js dari folder src di editor kode. Ubah teks di dalam
elemen tautan menjadi Hello React (elemen <a>) dan simpan file.
Anda tidak perlu tahu apa-apa lagi tentang file ini saat ini.
3. Sekarang, jika Anda melihat browser, Anda harus segera melihat
bahwa teks tautan diubah. Browser di-refresh secara otomatis ketika
Anda memodifikasi dan menyimpan file JavaScript di proyek React
Anda:

Untuk men-debug aplikasi React, kita juga harus menginstal

React Developer Tools, yang tersedia untuk browser Chrome, Firefox,
dan Edge. Plugin Chrome dapat diinstal dari toko web Chrome
(https://chrome.google.com/webstore/category/extensions), sedangkan
add-on Firefox dapat diinstal dari Firefox situs pengaya
(https://addons.mozilla.org). Setelah Anda menginstal React Developer
Tools, Anda akan melihat tab Components baru di alat pengembang
browser Anda setelah Anda menavigasi ke aplikasi React Anda.

Anda dapat membuka alat pengembang dengan menekan Ctrl +

Shift + I (atau F12) di browser Chrome. Tangkapan layar berikut
menunjukkan alat pengembang di browser Chrome:
 Alat pengembang browser adalah alat yang sangat penting, dan
sebaiknya dibuka selama pengembangan sehingga Anda dapat segera
melihat kesalahan dan peringatan.

7.5 Kesimpulan
Dalam bab ini, kita menginstal semua yang diperlukan untuk
memulai pengembangan frontend kita dengan React.js. Pertama, kita
menginstal NodeJS dan editor VS Code. Kemudian, kita menggunakan
starter kit create-react-app untuk membuat aplikasi React.js pertama
kita. Akhirnya, kita menjalankan aplikasi dan mendemonstrasikan cara
memodifikasinya. Ini hanyalah gambaran umum tentang struktur dan
modifikasi aplikasi, dan kami akan melanjutkannya di bab-bab
berikutnya. Pada bab berikutnya, kita akan membiasakan diri dengan
dasar-dasar pemrograman React. Dalam JavaScript, kita akan
menggunakan sintaks ES6 karena menyediakan beberapa fitur yang
membuat pengkodean lebih bersih.