Menyiapkan lab untuk React di Linux

Artikel
10/27/2023

Catatan

Artikel ini mereferensikan fitur yang tersedia dalam paket lab, yang menggantikan akun lab.

React adalah pustaka JavaScript populer untuk membangun antarmuka pengguna (UI). React adalah cara deklaratif untuk membuat komponen yang dapat digunakan kembali untuk situs web Anda. Ada banyak pustaka populer lainnya untuk pengembangan frontend berbasis JavaScript. Kami akan menggunakan beberapa pustaka ini sambil membuat lab. Redux adalah pustaka yang menyediakan kontainer status yang dapat diprediksi untuk aplikasi JavaScript dan sering digunakan bersama React. JSX adalah ekstensi sintaksis pustaka ke JavaScript yang sering digunakan dengan React untuk menggambarkan seperti apa UI tersebut. NodeJS adalah cara mudah untuk menjalankan server web untuk aplikasi React Anda.

Artikel ini memperlihatkan kepada Anda cara menginstal Visual Studio Code untuk lingkungan pengembangan, alat, dan pustaka yang diperlukan untuk kelas pengembangan web React.

Konfigurasi lab

Untuk menyiapkan lab ini, Anda memerlukan langganan Azure untuk memulai. Jika Anda tidak memiliki langganan Azure, buat akun gratis sebelum Anda memulai.

Pengaturan paket lab

Setelah memiliki langganan Azure, Anda dapat membuat paket lab baru di Azure Lab Services. Untuk informasi selengkapnya tentang membuat rencana lab baru, lihat tutorial tentang cara menyiapkan rencana lab. Anda juga dapat menggunakan paket lab yang ada.

Aktifkan pengaturan paket lab Anda seperti yang dijelaskan dalam tabel berikut ini. Untuk mengetahui informasi selengkapnya tentang cara mengaktifkan gambar Marketplace Azure, lihat Menentukan citra Marketplace Azure yang tersedia bagi pembuat lab.

Pengaturan paket lab	Petunjuk
Gambar Marketplace	Aktifkan gambar 'Ubuntu Server 18.04 LTS'.

Pengaturan lab

Untuk petunjuk tentang cara membuat lab, lihat Tutorial: Menyiapkan lab. Gunakan pengaturan berikut saat membuat lab.

Pengaturan lab	Nilai
Ukuran Komputer Virtual	Bentuk dan

Kami menyarankan agar Anda menguji beban kerja Anda untuk melihat apakah ukuran yang lebih besar diperlukan. Untuk mengetahui informasi selengkapnya tentang setiap ukuran, lihat Ukuran VM.

Konfigurasi komputer templat

Langkah-langkah di bagian ini menunjukkan cara menyelesaikan hal berikut untuk menyiapkan templat VM:

Instal Alat pengembangan.
Instal ekstensi debugger untuk browser web Anda.
Perbarui pengaturan firewall.

Instal Alat Pengembangan

Instal browser web pilihan Anda.
Instal Node.js.
```
sudo apt install nodejs
```
Instal Manajer Paket Simpul, yang akan digunakan untuk menginstal React, Redux, dan JSX.
```
sudo apt install npm
```
Instal Visual Studio Code.
Instal ekstensi Alat Asli Reaktif untuk Kode Visual Studio.
Secara opsional, instal ekstensi untuk pengembangan dengan Redux dan JSX.

Create React App adalah cara yang didukung secara resmi untuk membuat aplikasi React dan tidak memerlukan konfigurasi lebih lanjut jika Anda menggunakan npm 5.2 ke atas. Untuk petunjuk selengkapnya tentang cara menggunakan Buat Aplikasi React, lihat dokumentasi memulainya.

Komponen lain yang diperlukan untuk situs web berbasis React diinstal menggunakan NPM ke dalam aplikasi tertentu. Misalnya, masukkan perintah berikut untuk menginstal pustaka Redux dan JSX:

npm install react-redux
npm install react-jsx

Menginstal ekstensi debugger

Instal ekstensi Alat Pengembang React untuk browser Anda sehingga Anda dapat memeriksa komponen React dan merekam informasi performa.

Untuk menjalankan aplikasi dalam mode pengembangan, gunakan npm start perintah bawaan. Url lokal dan jaringan akan dicantumkan dalam output perintah. Untuk informasi selengkapnya tentang cara menggunakan HTTPS alih-alih HTTP, lihat Membuat Aplikasi React: Menggunakan HTTPS dalam Pengembangan.

Memperbarui pengaturan firewall

Build resmi Ubuntu memiliki iptable yang terinstal dan akan mengizinkan lalu lintas masuk secara default. Namun, jika Anda menggunakan VM yang memiliki firewall yang lebih ketat, tambahkan aturan masuk untuk mengizinkan lalu lintas ke server NodeJS. Contoh di bawah in menggunakan iptable untuk mengizinkan lalu lintas ke port 3000.

sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT

Penting

Pendidik harus menggunakan templat VM atau VM lab lain untuk mengakses situs web siswa.

Biaya

Mari kita bahas contoh perkiraan biaya untuk kelas ini. Ukuran komputer virtual yang kami pilih adalah Kecil, yaitu 20 unit lab.

Untuk kelas 25 siswa dengan 20 jam waktu kelas terjadwal dan 10 jam kuota untuk pekerjaan rumah atau tugas, perkiraan biayanya adalah:

25 siswa × (20 jam terjadwal + 10 jam kuota) × 20 Unit Lab × USD0,01 per jam = 150,00 USD

Penting

Perkiraan biaya hanya sebagai contoh. Untuk informasi harga saat ini, lihat Harga Azure Lab Services.

Langkah berikutnya

Gambar templat sekarang dapat diterbitkan ke lab. Untuk informasi selengkapnya, lihat Menerbitkan templat VM.

Saat Anda menyiapkan lab, lihat artikel berikut ini: