ServBay

Українська

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
ไทย
한국어

Українська

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
ไทย
한국어

Appearance

Створення та запуск React-проєкту за допомогою ServBay ​

Що таке React? ​

React — це відкритий JavaScript-фреймворк, який підтримується компанією Meta (раніше Facebook) та її спільнотою, призначений для побудови інтерфейсів користувача (UI). Він базується на компонентному підході до розробки інтерактивних інтерфейсів, що дозволяє ефективно створювати складні й масштабовані односторінкові застосунки (SPA) та великі веб-додатки. Основними перевагами React є декларативний стиль програмування, швидке оновлення за допомогою віртуального DOM та потужна екосистема спільноти.

Ключові особливості та переваги React ​

  • Компонентна архітектура: розбиває складний інтерфейс на незалежні та багаторазові компоненти, підвищуючи підтримуваність і повторне використання коду.
  • Декларативний підхід: описує стан інтерфейсу простим способом, а React самостійно оновлює DOM відповідно до змін — це спрощує логіку розробки UI.
  • Віртуальний DOM: зберігає віртуальне представлення DOM у пам’яті та мінімізує реальні оновлення DOM за рахунок порівняння змін, тим самим підвищуючи продуктивність.
  • Односпрямований потік даних: дані передаються згори вниз, що робить управління станом застосунку прозорішим і легшим для розуміння.
  • JSX: розширення синтаксису JavaScript, що дозволяє писати структуру, схожу на HTML, прямо в коді, підвищуючи читабельність.
  • Потужна екосистема: широка підтримка спільноти й великий вибір сторонніх бібліотек (React Router, Redux/Zustand/MobX, Material UI та інші) для управління станом, маршрутизації, UI-компонентів тощо.

З React розробники можуть швидко й ефективно створювати сучасні високопродуктивні веб-додатки.

Налаштування середовища розробки та продакшену для React за допомогою ServBay ​

ServBay — сучасне локальне веб-середовище для розробників, що містить різноманітні пакети, зокрема Node.js, для користувачів macOS і Windows. У цьому гайді ви дізнаєтесь, як скористатися Node.js-середовищем ServBay та функціоналом «Вебсайти» для покрокового створення, налаштування й запуску React-проєкту — включно з реверс-проксі для режиму розробки і статичною видачею для продакшену.

Перед початком ​

Переконайтеся, що виконали такі підготовчі кроки:

  1. Встановили ServBay: Програма встановлена та запущена у вашій системі.
  2. Встановили пакет Node.js: Через інтерфейс ServBay або командний рядок додали Node.js. Детальніше дивіться документацію щодо встановлення Node.js у ServBay. ServBay автоматично керує версіями та змінними середовища для Node.js.

Створення нового React-проєкту ​

Скористаємося сучасним інструментом зборки — Vite, який забезпечує швидкий запуск і миттєве оновлення модулів (HMR). Vite став основним вибором для нових React-проєктів (на заміну традиційному create-react-app).

  1. Відкрийте термінал та перейдіть до кореневої папки сайтів

    Запустіть свою термінальну програму. Рекомендована коренева папка сайтів у ServBay:

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    cmd
    cd C:\ServBay\www

  2. Створіть новий React-проєкт за допомогою Vite

    Виконайте команду для створення нового проєкту servbay-react-demo з шаблоном для React:

    bash
    npx create-vite servbay-react-demo --template react
    • npx — інструмент для виконання npm-пакетів, що дозволяє запускати CLI-додатки без глобальної установки, завжди у свіжій версії.
    • create-vite — офіційний генератор проєктів Vite.
    • servbay-react-demo — назва папки для вашого проєкту.
    • --template react — використовує шаблон React для структури проєкту.

    Дотримуйтесь підказок на екрані для завершення створення проєкту.

  3. Перейдіть у папку проєкту та встановіть залежності

    Зайдіть у папку нового проєкту і встановіть залежності через npm:

    bash
    cd servbay-react-demo
npm install
    • За бажанням можете використовувати yarn install або pnpm install для Yarn чи pnpm.

Редагування стартової сторінки React-проєкту (необов’язково) ​

Для швидкої перевірки вашого налаштування ви можете змінити головну сторінку застосунку.

  1. Відкрийте файл src/App.jsx або src/App.tsx

    Відкрийте улюблений редактор коду та знайдіть src/App.jsx або src/App.tsx у вашому проєкті відповідно до обраного типу шаблону.

  2. Оновіть основний контент

    Знайдіть блок для головного контенту та змініть його, щоб показувалося "Hello ServBay!":

    javascript
    // ... імпорт інших модулів ...
import './App.css';

function App() {
  // ... інший код ...
  return (
    <>
      {/* ... інші елементи ... */}
      <h1>Hello ServBay!</h1>
      {/* ... інші елементи ... */}
    </>
  );
}

export default App;

    Збережіть файл.

Запуск у режимі розробки ​

Для розробки зазвичай запускається локальний сервер із підтримкою гарячого оновлення модулів (HMR). ServBay дозволяє налаштувати реверс-проксі для перенаправлення зовнішніх запитів до цього сервера.

  1. Запустіть dev-сервер у терміналі

    З кореня проєкту servbay-react-demo виконайте команду для запуску сервера Vite із вказаним портом (наприклад, 8585):

    bash
    npm run dev -- --port 8585
    • npm run dev запускає скрипт dev, визначений у файлі package.json (стартує dev-сервер Vite).
    • -- --port 8585 — передає параметр порту команді Vite.

    Після старту dev-серверу термінал зазвичай показує локальний адресу, наприклад, http://localhost:8585. Не закривайте вікно терміналу!

  2. Налаштуйте реверс-проксі у ServBay

    Відкрийте інтерфейс ServBay. Зайдіть у розділ Вебсайти (Websites). Натисніть «Додати» і створіть нову конфігурацію:

    • Назва (Name): ServBay React Dev (довільне назва)
    • Домен (Domain): servbay-react-dev.servbay.demo (демо-домен із брендингом ServBay)
    • Тип сайту (Site Type): виберіть Reverse Proxy
    • Proxy IP: 127.0.0.1 (локальний dev-сервер)
    • Proxy Port: 8585 (той самий порт, що й у dev-сервері)

    Збережіть конфігурацію. ServBay автоматично застосує зміни та налаштує вбудований вебсервер (Caddy чи Nginx) для переспрямування трафіку з servbay-react-dev.servbay.demo на http://127.0.0.1:8585.

    Детальну інструкцію щодо створення сайту читайте в документації ServBay по управлінню вебсайтами.

  3. Тестуйте сайт у браузері

    Відкрийте браузер і зайдіть на адресу: https://servbay-react-dev.servbay.demo.

    • Завдяки функціоналу ServBay ваш локальний сайт автоматично захищено SSL-сертифікатом (від ServBay User CA або ServBay Public CA), тож ви можете безпечно працювати через HTTPS. Детальніше про SSL у ServBay — захист сайту SSL.
    • Після кожної зміни у редакторі та збереження файлу сторінка у браузері повинна автоматично оновлюватися — це працює гаряче оновлення модулів (HMR).

Продакшен-білд — оптимізований варіант сайту ​

Коли розробка завершена й проєкт готовий до публікації, час створити продакшен-білд.

  1. Створіть продакшен-білд у терміналі

    З кореневої папки проєкту servbay-react-demo виконайте:

    bash
    npm run build

    Ця команда запускає скрипт build з вашого package.json. Для проєктів на основі Vite це компілює, збирає й оптимізує вихідний код у набір статичних файлів (HTML, CSS, JS, медіа тощо), які потрапляють до папки dist. Після успішної збірки у терміналі буде відповідне повідомлення.

  2. Налаштуйте сервіс статичних файлів у ServBay

    У папці dist знаходяться всі статичні файли вашого сайту. У ServBay можна створити нову конфігурацію для статичного сайту на основі цієї папки.

    У інтерфейсі ServBay перейдіть у розділ Вебсайти (Websites) і натисніть «Додати»:

    • Назва (Name): ServBay React Prod (описова назва)
    • Домен (Domain): servbay-react.servbay.demo (демо-домен, відмінний від dev-варіанта)
    • Тип сайту (Site Type): виберіть Static
    • Коренева папка сайту (Website Root Directory): папка з білдом
      • macOS: /Applications/ServBay/www/servbay-react-demo/dist
      • Windows: C:\ServBay\www\servbay-react-demo\dist

    Збережіть конфігурацію. ServBay автоматично налаштує вебсервер для видачі статичних файлів з каталогу dist.

  3. Тестування продакшен-сайту

    Відкрийте браузер і переходьте за доменом: https://servbay-react.servbay.demo.

    Перед вами оптимізована продакшен-версія сайту, яка також автоматично отримала захист SSL через ServBay.

Підсумок ​

Виконавши ці кроки, ви створили React-проєкт у локальному середовищі за допомогою ServBay і налаштували реверс-проксі для розробки та статичний хостинг для продакшену. ServBay значно спрощує запуск і керування локальним середовищем для macOS та Windows, забезпечує інтегровану підтримку Node.js, гнучке налаштування сайтів (реверс-проксі, статичний сервіс) і автоматичний SSL. Це ідеальний вибір для комфортної, ефективної та захищеної розробки на React. Продовжуйте вдосконалювати, тестувати й розгортати ваші React-додатки!