Menyiapkan lab untuk React di Linux

Catatan

Artikel ini mereferensikan fitur yang tersedia sejak Pembaruan Agustus 2022, di mana rencana lab menggantikan akun lab. Untuk informasi selengkapnya, lihat Apa yang Baru dalam Pembaruan Agustus 2022.

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 ujung depan berbasis JavaScript. Kami akan menggunakan beberapa pustaka ini sambil membuat lab kami. Redux adalah pustaka yang menyediakan kontainer status yang dapat diprediksi untuk aplikasi JavaScript dan sering digunakan bersama React. JSX adalah ekstensi sintaks 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 Instruksi
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 Kecil

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

Konfigurasi komputer templat

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

  1. Menginstal Alat pengembangan.
  2. Instal ekstensi debugger untuk browser web Anda.
  3. Perbarui pengaturan firewall.

Instal Alat Pengembangan

  1. Instal browser web pilihan Anda.

  2. Instal Node.js.

    sudo apt install nodejs
    
  3. Instal Manajer Paket Simpul, yang akan digunakan untuk menginstal React, Redux, dan JSX.

    sudo apt install npm
    
  4. Instal Visual Studio Code.

  5. Instal ekstensi Alat Asli Reaktif untuk Kode Visual Studio.

  6. 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

Instal ekstensi debugger

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

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: