Cara Mencipta & Menjalankan Projek React dalam Persekitaran Lokal macOS dengan ServBay

Apakah Itu React?

React adalah pustaka JavaScript sumber terbuka yang dibangunkan dan diselenggara oleh Meta (dahulu dikenali sebagai Facebook) dan komuniti pembangunnya, khusus untuk membina antara muka pengguna (UI). React menggunakan konsep pembinaan UI berasaskan komponen, membolehkan pembangun mencipta SPA (Single-Page Application) atau lapisan paparan aplikasi web berskala besar yang rumit dan mudah diselenggara. Kekuatan utama React terletak pada paradigma pengaturcaraan deklaratif, mekanisme kemas kini DOM maya yang cekap, serta ekosistem komuniti yang luas.

Ciri-ciri dan Kelebihan Utama React

• Pembangunan Berasaskan Komponen: Pecahkan UI kompleks kepada komponen kecil dan boleh diguna semula, meningkatkan penyelenggaraan dan pengulangan kod.
• Paparan Deklaratif: Hanya gambarkan keadaan UI, dan React akan mengemaskini DOM agar sepadan dengan keadaan itu secara automatik—memudahkan logik pembangunan UI.
• Virtual DOM: Penyimpanan perwakilan DOM maya dalam memori dan mengemaskini DOM sebenar secara cekap hanya pada perubahan yang dikesan, meningkatkan prestasi aplikasi.
• Aliran Data Satu Hala: Data mengalir dari atas ke bawah, menjadikan pengesanan dan pemahaman perubahan keadaan aplikasi lebih mudah.
• JSX: Sintaks lanjutan JavaScript yang membolehkan penulisan struktur mirip HTML dalam kod JavaScript —meningkatkan kebolehbacaan kod.
• Ekosistem Kuat: Disokong oleh komuniti besar serta perpustakaan pihak ketiga melimpah seperti React Router, Redux/Zustand/MobX, Material UI, dan lain-lain—meliputi pengurusan keadaan, routing, dan komponen UI.

Dengan React, pembangun boleh membina aplikasi web moden yang berprestasi tinggi dengan lebih pantas dan efisien.

Menyediakan Persekitaran Pembangunan & Produksi React di ServBay

ServBay adalah persekitaran pembangunan web lokal yang hebat untuk pengguna macOS, membekalkan pelbagai pakej perisian seperti Node.js. Panduan ini menerangkan secara terperinci bagaimana menggunakan persekitaran Node.js ServBay serta fungsi Websites untuk mencipta, mengkonfigurasi dan menjalankan projek React, termasuk menetapkan reverse proxy untuk mod pembangunan dan pelayan fail statik untuk mod produksi.

Prasyarat

Sebelum bermula, pastikan anda telah selesai langkah-langkah berikut:

1. Pasang ServBay: ServBay telah berjaya dipasang dan dijalankan pada sistem macOS anda.
2. Pasang Pakej Node.js: Node.js telah dipasang melalui antara muka atau baris arahan ServBay. Sila rujuk Dokumentasi pemasangan Node.js ServBay untuk langkah terperinci. ServBay akan mengurus versi Node.js serta pemboleh ubah persekitaran secara automatik.

Membina Projek React

Kita akan menggunakan alat pembinaan frontend moden Vite untuk mencipta projek React dengan pantas. Vite menawarkan permulaan sejuk (cold start) yang sangat pantas dan hot module replacement (HMR) secara serta-merta, amat meningkatkan pengalaman pembangunan, dan kini merupakan pilihan utama untuk memulakan projek React baru (menggantikan create-react-app tradisional).

1. Buka Terminal dan Navigasi ke Direktori Root Laman Web

   Buka aplikasi Terminal anda. Direktori root laman web lalai yang disyorkan oleh ServBay ialah /Applications/ServBay/www. Tukar ke direktori ini:

   cd /Applications/ServBay/www

2. Cipta Projek React Baru Menggunakan Vite

   Jalankan perintah berikut untuk membuat projek baru bernama servbay-react-demo dengan templat React menggunakan scaffolding create-vite:

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

   • npx ialah penjalan pakej npm yang membolehkan anda melaksanakan alat baris arahan dari registry npm tanpa pemasangan global. Ini memastikan anda sentiasa menggunakan versi terkini create-vite.
   • create-vite merupakan alat scaffolding rasmi dari Vite.
   • servbay-react-demo ialah nama folder projek anda.
   • --template react menentukan templat React untuk struktur projek.

   Ikuti arahan di skrin hingga selesai penciptaan projek.

3. Masuk ke Direktori Projek & Pasang Kebergantungan

   Masuk ke direktori projek yang baru dan pasang segala kebergantungan yang diperlukan dengan npm:

   cd servbay-react-demo
   npm install

   • Anda juga boleh gunakan yarn install atau pnpm install jika anda lebih suka Yarn atau pnpm sebagai pengurus pakej.

Pilihan: Ubah Kandungan Projek React

Untuk memastikan pemasangan berjaya, anda boleh mengubah halaman utama projek untuk ujian.

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

   Gunakan editor kod kegemaran anda untuk membuka fail src/App.jsx (bagi templat JavaScript) atau src/App.tsx (jika memilih templat TypeScript) dalam direktori projek.

2. Ubah Kandungan

   Cari bahagian kod yang merender isi utama dan ubah untuk memaparkan "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.

Memulakan Mod Pembangunan

Dalam fasa pembangunan, kita akan menjalankan pelayan pembangunan lokal yang menawarkan HMR untuk kemudahan pembangunan. ServBay membolehkan permintaan dari luar dialihkan (reverse proxy) ke pelayan pembangunan ini.

1. Jalankan Pelayan Pembangunan di Terminal

   Dengan berada dalam root direktori projek servbay-react-demo, jalankan perintah berikut untuk memulakan pelayan pembangunan Vite pada port 8585 (sebagai contoh):

   npm run dev -- --port 8585

   • npm run dev akan menrun skrip dev dalam fail package.json projek —iaitu melancarkan pelayan pembangunan Vite.
   • -- --port 8585 akan memindahkan parameter port ke perintah Vite.

   Selepas pelayan pembangunan dimulakan, biasanya alamat lokal (cth: http://localhost:8585) akan dipaparkan pada terminal. Jangan tutup tetingkap terminal ini agar pelayan pembangunan terus berjalan.

2. Konfigurasi Reverse Proxy di ServBay

   Buka aplikasi ServBay dan navigasi ke bahagian Websites. Klik butang tambah untuk tetapan laman web baru:

   • Name: ServBay React Dev (nama deskriptif)
   • Domain: servbay-react-dev.servbay.demo (domain demo mengikut jenama ServBay)
   • Site Type: Pilih Reverse Proxy
   • Proxy IP: 127.0.0.1 (kerana pelayan pembangunan berjalan secara lokal)
   • Proxy Port: 8585 (sama dengan port yang digunakan di atas)

   Simpan konfigurasi tersebut. ServBay akan terus mengaktifkan tetapan, dan mengkonfigurasi pelayan web binaan seperti Caddy atau Nginx, untuk memforward permintaan ke servbay-react-dev.servbay.demo ke http://127.0.0.1:8585.

   Untuk maklumat terperinci cara menambah laman web di ServBay, rujuk Dokumentasi Pengurusan Website ServBay.

3. Akses Laman Web Pembangunan Anda

   Buka pelayar web anda dan lawati domain yang baru anda tetapkan: https://servbay-react-dev.servbay.demo.

   • Dengan keupayaan ServBay, laman pembangunan lokal anda secara automatik menerima sijil SSL (diterbitkan oleh ServBay User CA atau ServBay Public CA), jadi anda boleh mengaksesnya dengan selamat menerusi HTTPS. Untuk maklumat lanjut tentang SSL ServBay, lihat Mengamankan Laman Web Anda dengan SSL.
   • Kini, sebarang perubahan yang anda buat dan simpan dalam kod projek akan segera terpapar dalam penyemak imbas melalui hot module replacement (HMR).

Membina Versi Produksi

Setelah projek React anda selesai dibangunkan dan sedia untuk penyebaran, bina versi produksi yang telah dioptimumkan.

1. Bina Versi Produksi di Terminal

   Dari root direktori projek servbay-react-demo, jalankan arahan berikut untuk membina produksi:

   npm run build

   Arahan ini akan menjalankan skrip build dalam package.json dan, bagi projek React berasaskan Vite, akan menyusun, membundel dan mengoptimumkan kod kepada fail statik (HTML, CSS, JavaScript, aset lain) di dalam folder dist. Setelah selesai, satu mesej berjaya akan dipaparkan dalam terminal.

2. Sediakan Pelayan Fail Statik dalam ServBay

   Folder dist hasil binaan produksi mengandungi fail statik yang boleh terus dilayan melalui pelayan web. Dalam ServBay, anda boleh menambah laman web statik yang menunjuk ke direktori ini.

   Buka aplikasi ServBay, navigasi ke Websites dan klik tambah untuk konfigurasi laman web baru:

   • Name: ServBay React Prod (nama deskriptif)
   • Domain: servbay-react.servbay.demo (domain demo—bezakan daripada domain pembangunan)
   • Site Type: Pilih Static
   • Website Root Directory: /Applications/ServBay/www/servbay-react-demo/dist (menunjuk ke folder dist hasil binaan)

   Simpan konfigurasi. ServBay akan menyediakan laman web ini untuk melayani fail statik secara terus daripada folder dist.

3. Akses Laman Web Produksi Anda

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

   Kini anda sedang memaparkan laman web produksi yang telah dioptimumkan. Laman ini juga menerima sokongan SSL secara automatik melalui ServBay.

Rumusan

Dengan mengikuti langkah-langkah ini, anda telah berjaya mencipta projek React dalam persekitaran lokal macOS menggunakan ServBay, serta mengkonfigurasi reverse proxy untuk mod pembangunan dan perkhidmatan fail statik untuk produksi. ServBay mempermudah penubuhan dan pengurusan persekitaran pembangunan lokal—terutamanya dengan sokongan Node.js terbina dalam, konfigurasi laman web yang fleksibel (reverse proxy & statik), dan automasi SSL. Semua ini sangat memudahkan kerja pembangunan React anda. Anda kini boleh terus membangun, menguji, dan menyebarkan aplikasi React anda dengan lancar.