Створення та запуск 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-проєкту — включно з реверс-проксі для режиму розробки і статичною видачею для продакшену.
Перед початком
Переконайтеся, що виконали такі підготовчі кроки:
- Встановили ServBay: Програма встановлена та запущена у вашій системі.
- Встановили пакет Node.js: Через інтерфейс ServBay або командний рядок додали Node.js. Детальніше дивіться документацію щодо встановлення Node.js у ServBay. ServBay автоматично керує версіями та змінними середовища для Node.js.
Створення нового React-проєкту
Скористаємося сучасним інструментом зборки — Vite, який забезпечує швидкий запуск і миттєве оновлення модулів (HMR). Vite став основним вибором для нових React-проєктів (на заміну традиційному create-react-app
).
Відкрийте термінал та перейдіть до кореневої папки сайтів
Запустіть свою термінальну програму. Рекомендована коренева папка сайтів у ServBay:
macOS:
bashcd /Applications/ServBay/www
1Windows:
cmdcd C:\ServBay\www
1Створіть новий React-проєкт за допомогою Vite
Виконайте команду для створення нового проєкту
servbay-react-demo
з шаблоном для React:bashnpx create-vite servbay-react-demo --template react
1npx
— інструмент для виконання npm-пакетів, що дозволяє запускати CLI-додатки без глобальної установки, завжди у свіжій версії.create-vite
— офіційний генератор проєктів Vite.servbay-react-demo
— назва папки для вашого проєкту.--template react
— використовує шаблон React для структури проєкту.
Дотримуйтесь підказок на екрані для завершення створення проєкту.
Перейдіть у папку проєкту та встановіть залежності
Зайдіть у папку нового проєкту і встановіть залежності через npm:
bashcd servbay-react-demo npm install
1
2- За бажанням можете використовувати
yarn install
абоpnpm install
для Yarn чи pnpm.
- За бажанням можете використовувати
Редагування стартової сторінки React-проєкту (необов’язково)
Для швидкої перевірки вашого налаштування ви можете змінити головну сторінку застосунку.
Відкрийте файл
src/App.jsx
абоsrc/App.tsx
Відкрийте улюблений редактор коду та знайдіть
src/App.jsx
абоsrc/App.tsx
у вашому проєкті відповідно до обраного типу шаблону.Оновіть основний контент
Знайдіть блок для головного контенту та змініть його, щоб показувалося "Hello ServBay!":
javascript// ... імпорт інших модулів ... import './App.css'; function App() { // ... інший код ... return ( <> {/* ... інші елементи ... */} <h1>Hello ServBay!</h1> {/* ... інші елементи ... */} </> ); } export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15Збережіть файл.
Запуск у режимі розробки
Для розробки зазвичай запускається локальний сервер із підтримкою гарячого оновлення модулів (HMR). ServBay дозволяє налаштувати реверс-проксі для перенаправлення зовнішніх запитів до цього сервера.
Запустіть dev-сервер у терміналі
З кореня проєкту
servbay-react-demo
виконайте команду для запуску сервера Vite із вказаним портом (наприклад, 8585):bashnpm run dev -- --port 8585
1npm run dev
запускає скриптdev
, визначений у файліpackage.json
(стартує dev-сервер Vite).-- --port 8585
— передає параметр порту команді Vite.
Після старту dev-серверу термінал зазвичай показує локальний адресу, наприклад,
http://localhost:8585
. Не закривайте вікно терміналу!Налаштуйте реверс-проксі у 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 по управлінню вебсайтами.
- Назва (Name):
Тестуйте сайт у браузері
Відкрийте браузер і зайдіть на адресу:
https://servbay-react-dev.servbay.demo
.- Завдяки функціоналу ServBay ваш локальний сайт автоматично захищено SSL-сертифікатом (від ServBay User CA або ServBay Public CA), тож ви можете безпечно працювати через HTTPS. Детальніше про SSL у ServBay — захист сайту SSL.
- Після кожної зміни у редакторі та збереження файлу сторінка у браузері повинна автоматично оновлюватися — це працює гаряче оновлення модулів (HMR).
Продакшен-білд — оптимізований варіант сайту
Коли розробка завершена й проєкт готовий до публікації, час створити продакшен-білд.
Створіть продакшен-білд у терміналі
З кореневої папки проєкту
servbay-react-demo
виконайте:bashnpm run build
1Ця команда запускає скрипт
build
з вашогоpackage.json
. Для проєктів на основі Vite це компілює, збирає й оптимізує вихідний код у набір статичних файлів (HTML, CSS, JS, медіа тощо), які потрапляють до папкиdist
. Після успішної збірки у терміналі буде відповідне повідомлення.Налаштуйте сервіс статичних файлів у 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
- macOS:
Збережіть конфігурацію. ServBay автоматично налаштує вебсервер для видачі статичних файлів з каталогу
dist
.- Назва (Name):
Тестування продакшен-сайту
Відкрийте браузер і переходьте за доменом:
https://servbay-react.servbay.demo
.Перед вами оптимізована продакшен-версія сайту, яка також автоматично отримала захист SSL через ServBay.
Підсумок
Виконавши ці кроки, ви створили React-проєкт у локальному середовищі за допомогою ServBay і налаштували реверс-проксі для розробки та статичний хостинг для продакшену. ServBay значно спрощує запуск і керування локальним середовищем для macOS та Windows, забезпечує інтегровану підтримку Node.js, гнучке налаштування сайтів (реверс-проксі, статичний сервіс) і автоматичний SSL. Це ідеальний вибір для комфортної, ефективної та захищеної розробки на React. Продовжуйте вдосконалювати, тестувати й розгортати ваші React-додатки!