Mencipta dan Menjalankan Projek React dengan ServBay

Apa Itu React?

React ialah pustaka sumber terbuka JavaScript yang dikekalkan oleh Meta (dahulu dikenali sebagai Facebook) serta komuniti pembangun. Ia digunakan khusus untuk membangunkan antara muka pengguna (UI). Melalui seni bina berasaskan komponen, React memudahkan pembangun menghasilkan UI interaktif yang kompleks serta mudah disenggara, sama ada aplikasi satu halaman (SPA) atau aplikasi web berskala besar. Kekuatan utama React terletak pada paradigma pengaturcaraan deklaratifnya, mekanisme kemas kini virtual DOM yang cekap, serta ekosistem komuniti yang meluas.

Ciri Utama & Kelebihan React

• Pembangunan Berasaskan Komponen: Memecah UI kompleks kepada komponen yang boleh diguna semula, meningkatkan kebergantungan dan kemudahan penyelenggaraan kod.
• Pandangan Deklaratif: Hanya perlu menggambarkan keadaan UI dan React akan mengurus kemas kini DOM mengikut keadaan tersebut, memudahkan logik pembangunan UI.
• Virtual DOM: Menyimpan representasi DOM secara maya dalam memori, melakukan kemas kini yang minima pada DOM sebenar untuk prestasi yang sangat baik.
• Aliran Data Sehala (One-way Data Flow): Data mengalir dari atas ke bawah, menjadikan perubahan keadaan aplikasi lebih mudah dijangka dan difahami.
• JSX: Sintaks lanjutan JavaScript yang membenarkan penulisan struktur mirip HTML di dalam kod JS, meningkatkan kebolehbacaan kod.
• Ekosistem yang Kuat: Komuniti yang besar serta pakej pihak ketiga yang meluas (seperti React Router, Redux/Zustand/MobX, Material UI dan lain-lain) meliputi pengurusan keadaan, routing, serta komponen UI.

Dengan menggunakan React, pembangun dapat menghasilkan aplikasi web moden yang pantas dan berprestasi tinggi dengan lebih efektif.

Menyediakan Persekitaran Pembangunan & Produksi React menggunakan ServBay

ServBay ialah persekitaran pembangunan web tempatan yang berkuasa untuk macOS dan Windows, menawarkan pelbagai pakej perisian termasuk Node.js. Panduan ini menerangkan langkah demi langkah bagaimana menggunakan Node.js dan ciri "Websites" dalam ServBay untuk membina, mengkonfigurasi dan melancarkan projek React, merangkumi konfigurasi proksi terbalik untuk pembangunan dan perkhidmatan fail statik untuk produksi.

Keperluan Awal

Pastikan perkara berikut telah disediakan sebelum anda bermula:

1. Pemasangan ServBay: ServBay telah dipasang dan berfungsi dengan baik di sistem anda.
2. Pemasangan Pakej Node.js: Node.js telah dipasang melalui antara muka atau CLI ServBay. Rujuk dokumentasi pemasangan Node.js dengan ServBay untuk langkah terperinci. ServBay mengurus versi Node.js dan pembolehubah persekitaran secara automatik.

Mencipta Projek React Baharu

Kita akan menggunakan pembina front-end moden Vite untuk mencipta projek React dengan pantas. Vite memberikan kebaikan seperti permulaan yang sangat laju serta HMR (Hot Module Replacement), dan kini menjadi pilihan utama untuk memulakan projek React (menggantikan create-react-app tradisional).

1. Buka terminal dan navigasi ke direktori root web anda

   Buka aplikasi terminal. ServBay mencadangkan direktori root berikut sebagai lokasi projek:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Cipta projek React baharu dengan Vite

   Jalankan arahan berikut untuk membina projek baharu servbay-react-demo menggunakan templat React:

   npx create-vite servbay-react-demo --template react

   • npx membolehkan anda menjalankan alat CLI dari npm Registry tanpa perlu memasangnya secara global, memastikan versi terbaru digunakan.
   • create-vite ialah alat rasmi untuk menjana projek menggunakan Vite.
   • servbay-react-demo merupakan nama folder projek anda.
   • --template react menyatakan bahawa anda memilih templat React.

   Ikuti arahan pada skrin untuk melengkapkan proses penciptaan projek.

3. Masuk ke direktori projek dan pasang kebergantungan

   Masuk ke dalam folder projek dan pasang kebergantungan yang diperlukan menggunakan npm:

   cd servbay-react-demo
   npm install

   • Alternatif anda boleh gunakan yarn install atau pnpm install jika anda memilih pengurus pakej lain seperti Yarn atau pnpm.

Ubah Kandungan Projek React (Pilihan)

Untuk menguji sama ada konfigurasi anda berjaya, kita boleh membuat sedikit perubahan pada halaman utama projek.

1. Buka fail src/App.jsx atau src/App.tsx

   Gunakan editor kod pilihan anda dan buka fail src/App.jsx (jika memilih templat JS) atau src/App.tsx (jika memilih TypeScript).

2. Ubah kandungan

   Cari kod utama yang merender halaman dan tukar kepada paparan "Hello ServBay!":

   // ... import lain ...
   import './App.css';
   
   function App() {
     // ... kod lain ...
     return (
       <>
         {/* ... elemen lain ... */}
         <h1>Hello ServBay!</h1>
         {/* ... elemen lain ... */}
       </>
     );
   }
   
   export default App;

   Simpan fail tersebut.

Memasuki Mod Pembangunan

Ketika peringkat pembangunan, pelayan pembangunan tempatan dijalankan supaya HMR dan ciri mudah lain tersedia. ServBay membolehkan anda menyediakan proksi terbalik untuk mengarahkan permintaan luaran ke pelayan pembangunan ini.

1. Jalankan server pembangunan dalam terminal

   Di root projek servbay-react-demo, jalankan arahan berikut untuk memulakan server Vite dengan port tersuai (contoh: 8585):

   npm run dev -- --port 8585

   • npm run dev akan menjalankan skrip dev yang ditakrifkan dalam package.json, biasanya untuk melancarkan pelayan pembangunan Vite.
   • -- --port 8585 menetapkan port untuk projek anda.

   Setelah server bermula, anda akan nampak alamat tempatan seperti http://localhost:8585 dalam terminal. Pastikan terminal dibiarkan terbuka dan jangan tutup server ini.

2. Konfigurasi proksi terbalik laman web dalam ServBay

   Buka antara muka ServBay. Pergi ke bahagian Websites dan tekan butang tambah untuk mewujudkan konfigurasi laman baru:

   • Nama (Name): ServBay React Dev (nama deskriptif)
   • Domain: servbay-react-dev.servbay.demo (domain demo berkaitan jenama ServBay)
   • Jenis laman web (Site Type): Pilih Reverse Proxy
   • IP proksi (Proxy IP): 127.0.0.1 (pelayan pembangunan berjalan secara tempatan)
   • Port proksi (Proxy Port): 8585 (sama dengan port pelayan anda)

   Simpan konfigurasi. ServBay akan mengkonfigurasi pelayan web terbina (Caddy atau Nginx) untuk mengalihkan semua permintaan dari servbay-react-dev.servbay.demo kepada http://127.0.0.1:8585.

   Untuk langkah terperinci, sila rujuk panduan pengurusan website ServBay.

3. Akses laman pembangunan anda

   Buka browser dan lawati domain yang dipasang: https://servbay-react-dev.servbay.demo.

   • ServBay secara automatik mengkonfigurasi sijil SSL untuk laman web anda (ditandatangani oleh ServBay User CA atau ServBay Public CA) supaya anda boleh mengakses laman tersebut dengan selamat melalui HTTPS. Untuk maklumat lanjut tentang SSL ServBay, sila rujuk Melindungi Website Anda Dengan SSL.
   • Kini apabila anda membuat perubahan dan menyimpan fail dalam editor kod, halaman browser akan dikemas kini secara automatik — iaitu ciri HMR yang sedang berfungsi.

Membina Versi Produksi

Setelah projek React anda siap untuk dideploy, bina versi produksi yang telah dioptimumkan.

1. Bina versi produksi dalam terminal

   Dari root projek servbay-react-demo, jalankan arahan:

   npm run build

   Skrip ini akan menghasilkan fail statik yang telah dioptimumkan (HTML, CSS, JS dan aset lain), biasanya disimpan dalam folder dist di root projek anda. Selepas siap, mesej kejayaan akan dipaparkan dalam terminal.

2. Konfigurasi servis fail statik dalam ServBay

   Folder dist yang dihasilkan mengandungi fail siap untuk dihidangkan oleh pelayan web. Dalam ServBay, cipta satu lagi konfigurasi laman web statik yang menunjuk ke direktori ini.

   Buka antara muka ServBay, pergi ke Websites dan tambahkan konfigurasi baru:

   • Nama (Name): ServBay React Prod
   • Domain: servbay-react.servbay.demo (domain demo berbeza untuk produksi)
   • Jenis laman web (Site Type): Pilih Static
   • Root direktori laman web (Website Root Directory):
     • macOS: /Applications/ServBay/www/servbay-react-demo/dist
     • Windows: C:\ServBay\www\servbay-react-demo\dist

   Simpan konfigurasi baharu dan ServBay akan menyediakan pelayan web yang menyampai fail statik tersebut secara langsung.

3. Akses laman produksi

   Buka pelayar dan kunjungi domain produksi: https://servbay-react.servbay.demo.

   Anda akan melihat laman web versi produksi yang telah dioptimumkan, lengkap dengan sokongan SSL automatik dari ServBay.

Kesimpulan

Dengan mengikuti langkah-langkah ini, anda telah berjaya mencipta projek React menggunakan ServBay dalam persekitaran tempatan, dengan konfigurasi proksi terbalik untuk mod pembangunan dan perkhidmatan fail statik untuk produksi. ServBay memudahkan pemasangan dan pengurusan persekitaran pembangunan di macOS dan Windows, menyediakan sokongan Node.js terbina, konfigurasi laman web yang fleksibel (termasuk proksi terbalik dan servis statik), serta fungsi SSL automatik — semua ini sangat membantu pembangun React. Teruskan membina, menguji dan menyebarkan aplikasi React anda menggunakan asas tersebut.