Mulai membuat aplikasi desktop dengan React Native for Desktop

2024-11-09

React Native for Desktop memungkinkan Anda membuat aplikasi Platform Windows Universal (UWP) menggunakan React.

Gambaran Umum React Native

React Native adalah kerangka kerja aplikasi seluler sumber terbuka yang dibuat oleh Facebook. Ini digunakan untuk mengembangkan aplikasi untuk Android, iOS, Web, dan UWP (Windows) yang menyediakan kontrol UI asli dan akses penuh ke platform asli. Bekerja dengan React Native memerlukan pemahaman tentang dasar-dasar JavaScript.

Untuk informasi umum selengkapnya tentang React, lihat halaman Gambaran umum React.

Prasyarat

Persyaratan penyiapan untuk menggunakan React Native for Desktop dapat ditemukan di halaman Persyaratan Sistem. Pastikan Mode Pengembang diaktifkan di Aplikasi Pengaturan Windows.

Menginstal React Native untuk Desktop

Anda dapat membuat aplikasi desktop Windows menggunakan React Native for Desktop dengan mengikuti langkah-langkah ini.

Buka jendela baris perintah (terminal) dan navigasikan ke direktori tempat Anda ingin membuat proyek aplikasi desktop Windows.
Anda dapat menggunakan perintah ini dengan Node Package Executor (NPX) untuk membuat proyek React Native tanpa perlu menginstal alat tambahan secara lokal atau global. Perintah akan menghasilkan aplikasi React Native di direktori yang ditentukan oleh <projectName>.
```
npx react-native init <projectName>
```
Jika Anda ingin memulai proyek baru dengan versi React Native tertentu, Anda dapat menggunakan --version argumen . Untuk informasi tentang versi React Native, lihat Versi - React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Beralih ke direktori proyek dan jalankan perintah berikut untuk menginstal paket React Native for Desktop:
```
cd projectName
npx react-native-windows-init --overwrite
```
Untuk menjalankan aplikasi, pertama-tama luncurkan browser web Anda (yaitu. Microsoft Edge), lalu jalankan perintah berikut:
```
npx react-native run-windows
```

Men-debug aplikasi desktop React Native Anda menggunakan Visual Studio

Instal Visual Studio 2022 dengan opsi berikut dicentang:
- Beban kerja: pengembangan Platform Windows Universal & Pengembangan desktop dengan C++.
- Komponen Individu: Aktivitas pengembangan &Node.js dukungan pengembangan.
Buka file solusi di folder aplikasi di Visual Studio (misalnya, AwesomeProject/windows/AwesomeProject.sln jika Anda menggunakan AwesomeProject sebagai <projectName>).
Pilih konfigurasi Debug dan platform x64 dari kontrol kotak kombo di sebelah kiri tombol Jalankan dan di bawah item menu Tim dan Alat.
Jalankan yarn start dari direktori proyek Anda, dan tunggu hingga pengemas React Native melaporkan keberhasilan.
Pilih Jalankan di sebelah kanan kontrol kotak kombo platform di VS, atau pilih item menu Debug-Start> tanpa Debugging. Sekarang Anda melihat aplikasi baru dan Chrome harus dimuat http://localhost:8081/debugger-ui/ di tab baru.
Pilih kunci F12 atau Ctrl+Shift+I untuk membuka Alat Pengembang di browser web Anda.

Men-debug aplikasi desktop React Native Anda menggunakan Visual Studio Code

Menginstal Visual Studio Code
Buka folder aplikasi Anda di VISUAL Code.
Instal plugin Alat Asli React untuk Visual Studio Code.

Buat file baru di direktori akar aplikasi, .vscode/launch.json dan tempelkan konfigurasi berikut:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

Tekan F5 atau navigasi ke menu debug (atau tekan Ctrl+Shift+D) dan di menu dropdown Debug pilih "Debug Windows" dan tekan panah hijau untuk menjalankan aplikasi.

Bagikan melalui