Tworzenie i uruchamianie projektu React z ServBay

Czym jest React?

React to otwartoźródłowa biblioteka JavaScript, utrzymywana przez Meta (dawniej Facebook) oraz społeczność, przeznaczona do budowy interfejsów użytkownika (UI). Umożliwia projektowanie interaktywnych UI w oparciu o komponenty, dzięki czemu twórcy mogą efektywnie budować złożone i łatwe w utrzymaniu aplikacje jednostronicowe (SPA) oraz duże systemy webowe. Główne zalety Reacta to deklaratywny styl programowania, wydajny mechanizm aktualizacji wirtualnego DOM oraz ogromny ekosystem społeczności.

Najważniejsze cechy i zalety Reacta

• Rozwój komponentowy: Dzieli złożony interfejs na niezależne, wielokrotnego użytku komponenty, ułatwiając utrzymanie i ponowne wykorzystanie kodu.
• Deklaratywne widoki: Wystarczy opisać stan UI — React sam zadba o jego aktualizację w DOM, upraszczając logikę warstwy interfejsu.
• Wirtualny DOM: Utrzymuje w pamięci wirtualną reprezentację DOM, porównując zmiany i minimalizując operacje na rzeczywistym DOM, co znacząco poprawia wydajność.
• Jednokierunkowy przepływ danych: Dane zawsze przepływają z góry na dół, co ułatwia śledzenie stanu i zrozumienie aplikacji.
• JSX: Rozszerzenie składni JavaScript pozwalające pisać strukturę „HTML” wewnątrz kodu JS, co poprawia czytelność i ekspresję kodu.
• Silny ekosystem: Ogromne wsparcie społeczności i bogactwo bibliotek zewnętrznych (np. React Router, Redux/Zustand/MobX, Material UI), obejmujących zarządzanie stanem, routing, komponenty UI i więcej.

Dzięki React programiści mogą szybciej i efektywniej budować nowoczesne, wydajne aplikacje webowe.

Budowanie środowiska deweloperskiego i produkcyjnego React z ServBay

ServBay to potężne lokalne środowisko webowe, oferujące zestaw narzędzi (m.in. Node.js) dla użytkowników macOS i Windows. Niniejszy przewodnik omawia krok po kroku wykorzystanie środowiska Node.js oraz funkcji „Websites” ServBay do tworzenia, konfiguracji i uruchamiania projektu React — obejmuje zarówno konfigurację trybu deweloperskiego z odwrotnym proxy, jak i obsługę statycznego serwowania plików w trybie produkcyjnym.

Wymagania wstępne

Przed rozpoczęciem upewnij się, że:

1. Zainstalowano ServBay: Na Twoim systemie jest zainstalowany i uruchomiony ServBay.
2. Zainstalowano paczkę Node.js: Zainstalowałeś Node.js z poziomu interfejsu ServBay lub przez CLI. Szczegóły znajdziesz w dokumentacji instalacji Node.js w ServBay. ServBay automatycznie zarządza wersją Node.js oraz zmiennymi środowiskowymi.

Tworzenie projektu React

Do szybkiego utworzenia projektu React użyjemy Vite — nowoczesnego narzędzia oferującego błyskawiczne uruchamianie i natychmiastową aktualizację modułów Hot Module Replacement (HMR). Vite jest obecnie głównym wyborem dla nowych projektów React (zamiast tradycyjnego create-react-app).

1. Otwórz terminal i przejdź do katalogu root strony

   Uruchom terminal. Domyślny katalog root strony zalecany przez ServBay to:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Utwórz nowy projekt React z Vite

   Wykonaj poniższą komendę, aby za pomocą create-vite stworzyć projekt o nazwie servbay-react-demo, używając szablonu react:

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

   • npx to narzędzie do uruchamiania pakietów npm, pozwalające odpalać narzędzia bez konieczności globalnej instalacji — gwarantuje użycie najnowszej wersji.
   • create-vite to oficjalny generator projektów Vite.
   • servbay-react-demo to nazwa Twojego nowego folderu projektu.
   • --template react inicjuje projekt z gotowym szablonem React.

   Wykonaj polecenia zgodnie z instrukcjami na ekranie, by zakończyć tworzenie projektu.

3. Wejdź do katalogu projektu i zainstaluj zależności

   Przejdź do utworzonego katalogu i zainstaluj niezbędne pakiety:

   cd servbay-react-demo
   npm install

   • Możesz też użyć yarn install lub pnpm install, jeśli preferujesz inne menedżery paczek.

Modyfikacja widoku projektu React (opcjonalnie)

Aby sprawdzić czy środowisko działa, spróbujmy zmodyfikować stronę główną projektu.

1. Otwórz plik src/App.jsx lub src/App.tsx

   Użyj wybranego edytora kodu i otwórz plik src/App.jsx (dla szablonu JS) lub src/App.tsx (dla TypeScript).

2. Zmodyfikuj treść

   Znajdź sekcję odpowiedzialną za renderowanie głównej zawartości i zmień ją tak, by wyświetlała "Hello ServBay!":

   // ... inne importy ...
   import './App.css';
   
   function App() {
     // ... inny kod ...
     return (
       <>
         {/* ... inne elementy ... */}
         <h1>Hello ServBay!</h1>
         {/* ... inne elementy ... */}
       </>
     );
   }
   
   export default App;

   Zapisz plik.

Praca w trybie deweloperskim

Podczas pracy w trybie developerskim uruchamiany jest lokalny serwer oferujący HMR, usprawniający pracę nad kodem. ServBay może stosować odwrotne proxy, przekierowując zewnętrzne zapytania do tego serwera.

1. Uruchom serwer deweloperski w terminalu

   W katalogu projektowym servbay-react-demo wpisz:

   npm run dev -- --port 8585

   • npm run dev uruchamia skrypt dev z pliku package.json, czyli startuje serwer Vite.
   • -- --port 8585 przekazuje numer portu do serwera Vite.

   Po starcie serwera terminal wyświetli lokalny adres np. http://localhost:8585. Nie zamykaj okna terminala — serwer musi działać.

2. Skonfiguruj odwrotne proxy w ServBay

   Otwórz ServBay i przejdź do sekcji Websites. Dodaj nową konfigurację strony:

   • Nazwa: ServBay React Dev (dobrze opisująca)
   • Domena: servbay-react-dev.servbay.demo (domena z motywem ServBay)
   • Typ strony: wybierz Reverse Proxy
   • IP proxy: 127.0.0.1 (serwer działa lokalnie)
   • Port proxy: 8585 (taki, jaki wybrałeś dla serwera Vite)

   Zapisz konfigurację. ServBay automatycznie skonfiguruje serwer (Caddy lub Nginx), aby przekierowywał zapytania do servbay-react-dev.servbay.demo na http://127.0.0.1:8585.

   Instrukcje szczegółowe znajdziesz w dokumentacji zarządzania stronami w ServBay.

3. Odwiedź stronę developerską

   Otwórz w przeglądarce adres: https://servbay-react-dev.servbay.demo.

   • Dzięki ServBay Twoja lokalna strona deweloperska jest automatycznie zabezpieczona certyfikatem SSL (podpisanym przez ServBay User CA lub Public CA), więc możesz łączyć się przez HTTPS. Szczegóły w instrukcji korzystania z SSL w ServBay.
   • Edytując pliki projektu i zapisując zmiany, strona w przeglądarce automatycznie się odświeży — to właśnie działanie HMR.

Budowanie wersji produkcyjnej

Gdy aplikacja React jest gotowa do wdrożenia, zbuduj zoptymalizowaną wersję produkcyjną.

1. Zbuduj wersję produkcyjną w terminalu

   W katalogu projektu wpisz:

   npm run build

   To uruchomi skrypt build z package.json. W przypadku projektu Vite dla Reacta nastąpi kompilacja, pakowanie oraz optymalizacja kodu, który zostanie zapisany jako pliki statyczne (HTML, CSS, JS, zasoby itp.) w folderze dist w root katalogu projektu. Po zakończeniu pojawi się informacja o sukcesie.

2. Skonfiguruj hosting plików statycznych w ServBay

   Folder dist zawiera gotową wersję strony do udostępnienia przez serwer www. W ServBay możesz skonfigurować statyczny hosting dla tej lokalizacji.

   Otwórz ServBay, przejdź do sekcji Websites i dodaj nową konfigurację:

   • Nazwa: ServBay React Prod (identyfikująca produkcję)
   • Domena: servbay-react.servbay.demo (odmienna od domeny developerskiej)
   • Typ strony: wybierz Static
   • Katalog root strony: wskaż folder dist po buildzie:
     • macOS: /Applications/ServBay/www/servbay-react-demo/dist
     • Windows: C:\ServBay\www\servbay-react-demo\dist

   Zapisz ustawienia. ServBay uruchomi serwer do bezpośredniego udzielenia plików z katalogu dist.

3. Odwiedź stronę produkcyjną

   W przeglądarce wpisz domenę: https://servbay-react.servbay.demo.

   Zobaczysz zoptymalizowaną, gotową do wdrożenia wersję swojej aplikacji React. Strona korzysta z automatycznej obsługi SSL ServBay.

Podsumowanie

Po wykonaniu powyższych kroków zbudowałeś lokalny projekt React z wykorzystaniem ServBay, konfigurując zarówno tryb rozwoju (reverse proxy), jak i tryb produkcyjny (statyczny hosting). ServBay upraszcza budowanie i zarządzanie środowiskiem developerskim na macOS i Windows, oferując m.in. wsparcie dla Node.js, elastyczną konfigurację stron (reverse proxy, statyczny serwer) oraz automatyczne SSL, co czyni go idealnym narzędziem dla programistów React. Teraz możesz wygodnie tworzyć, testować i wdrażać swoje aplikacje React w lokalnym środowisku.