Menyiapkan lab untuk React di Windows

  • Artikel

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 akan menampilkan cara menginstal Visual Studio 2019 untuk lingkungan pengembangan Anda, serta alat, dan pustaka yang diperlukan untuk kelas pengembangan web React.

Konfigurasi lab

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

Pengaturan paket lab

Setelah mendapatkan 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 akun lab Petunjuk
Gambar Marketplace Aktifkan gambar 'Komunitas Visual Studio 2019 (rilis terbaru) pada Windows Server 2019 (x64)'.

Pengaturan lab

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

Pengaturan lab Nilai
Ukuran Komputer Virtual  Sedang

Sebaiknya uji 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:

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

Instal Alat Pengembangan

Gambar 'Visual Studio 2019 Community (rilis terbaru) di Windows Server 2019 (x64)' sudah memiliki beban kerja pengembangan Node.js yang diperlukan yang diinstal untuk Visual Studio 2019.

  1. Instal browser web pilihan Anda. Gambar telah menginstal Internet Explorer secara default.
  2. Navigasi ke Node.js situs web Anda dan pilih tombol Unduh. Anda dapat menggunakan versi layanan jangka panjang (LTS) terbaru, versi saat ini dengan fitur terbaru tersebut, atau rilis sebelumnya. Menginstal NodeJS juga akan menginstal Node Package Manager, yang akan digunakan untuk menginstal React, Redux, dan JSX.
  3. Perbarui Visual Studio 2019 ke rilis terbaru, jika diperlukan.

Komponen lain yang diperlukan untuk situs web berbasis React diinstal menggunakan NPM ke dalam aplikasi tertentu. Untuk menambahkan paket NPM, lihat mengelola paket NPM Anda di Visual Studio.

Misalnya, jika menggunakan Jendela Interaktif Node.js dalam proyek, masukkan perintah berikut untuk menginstal pustaka React, Redux, dan JSX:

.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx

Untuk membuat aplikasi Node.js dengan React pertama Anda di Visual Studio, lihat Tutorial: Membuat aplikasi Node.js dan React di Visual Studio.

Menginstal ekstensi debugger

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

Memperbarui pengaturan firewall

Secara default, lalu lintas masuk ke server Node.js Anda akan diblokir. Jika Anda ingin mengakses situs web siswa saat dijalankan, tambahkan aturan firewall yang terikat untuk mengizinkan lalu lintas. Lihat properti proyek Port Aplikasi untuk melihat port mana yang akan digunakan selama penelusuran kesalahan. Contoh di bawah menggunakan cmdlet PowerShell New-NetFirewallRule untuk memungkinkan akses ke port 1337.

New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow

Penting

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

Biaya

Mari membahas contoh perkiraan biaya untuk kelas ini. Misalkan Anda memiliki kelas yang berisi 25 siswa. Setiap siswa memiliki 20 jam waktu kelas terjadwal. Setiap siswa juga memiliki tambahan 10 jam kuota untuk pekerjaan rumah atau tugas di luar waktu kelas yang dijadwalkan. Ukuran komputer virtual yang kami pilih adalah Sedang, yaitu 55 unit lab.

  • 25 siswa × (20 jam terjadwal + 10 jam kuota) × 55 Unit Lab × USD0,01 per jam = 412,50 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: