Создание и запуск проекта React

Что такое React?

React — это открытая библиотека JavaScript для создания пользовательских интерфейсов, поддерживаемая Facebook. Она фокусируется на создании представлений и позволяет разработчикам эффективно строить сложные пользовательские интерфейсы с помощью компонентного подхода. Основные концепции React — это компоненты и однонаправленный поток данных, что делает код более понятным и поддерживаемым.

Основные особенности и преимущества React

• Компонентность: Создание пользовательского интерфейса с помощью компонентов делает код более модульным и повторно используемым.
• Виртуальный DOM: React использует виртуальный DOM для оптимизации производительности, обновляя реальный DOM только при необходимости.
• Однонаправленный поток данных: Данные текут в одном направлении между компонентами, что делает управление состоянием приложения более ясным и предсказуемым.
• Сильное сообщество и экосистема: React имеет большое сообщество и богатую поддержку сторонних библиотек, что упрощает разработку.

Использование React помогает разработчикам более эффективно создавать современные, отзывчивые веб-приложения.

Создание и запуск проекта React с использованием ServBay

В этой статье мы будем использовать среду Node.js, предоставляемую ServBay, для создания и запуска проекта React. Мы будем использовать функцию «Хост» в ServBay для настройки веб-сервера и реализуем доступ к проекту через обратное прокси и статическую файловую службу.

Создание проекта React

1. Инициализация проекта

   Сначала убедитесь, что вы установили среду Node.js, предоставляемую ServBay. Затем используйте следующую команду для инициализации нового проекта React:

   cd /Applications/ServBay/www
   npx create-react-app servbay-react-app

2. Установка зависимостей

   Перейдите в каталог проекта и установите зависимости:

   cd servbay-react-app
   npm install

Изменение выходного содержимого проекта React

1. Изменение файла src/App.js

   Откройте файл src/App.js и измените содержимое, чтобы веб-страница выводила "Hello ServBay!":

   import React from 'react';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <h1>Hello ServBay!</h1>
         </header>
       </div>
     );
   }
   
   export default App;

Переход в режим разработки

1. Запуск сервера разработки

   Запустите сервер разработки и укажите порт (например, 8585):

   npm start -- --port 8585

   Это запустит локальный сервер разработки и откроет порт 8585.

2. Настройка обратного прокси в ServBay

   Используйте функцию «Хост» в ServBay для доступа к серверу разработки через обратное прокси. В настройках «Хост» в ServBay добавьте новый обратный прокси:

   • Имя: My first React dev site
   • Домен: servbay-react-test.dev
   • Тип хоста: Обратное прокси
   • IP: 127.0.0.1
   • Порт: 8585

   Подробные шаги настройки см. в статье Добавление сайта для разработки на Node.js.

3. Доступ в режиме разработки

   Откройте браузер и перейдите по адресу https://servbay-react-test.dev, чтобы в реальном времени просматривать проект. Благодаря поддержке ServBay пользовательских доменов и бесплатных SSL-сертификатов, вы получите более высокий уровень безопасности.

Сборка производственной версии

1. Сборка производственной версии

   Когда разработка завершена, используйте следующую команду для сборки производственной версии:

   npm run build

   После завершения сборки статические файлы будут находиться в каталоге build.

2. Настройка службы статических файлов

   Используйте функцию «Хост» в ServBay для доступа к производственной версии через службу статических файлов. В настройках «Хост» в ServBay добавьте новый статический сайт:

   • Имя: My first React production site
   • Домен: servbay-react-test.prod
   • Тип хоста: Статический
   • Корневая директория сайта: /Applications/ServBay/www/servbay-react-app/build

3. Доступ в производственном режиме

   Откройте браузер и перейдите по адресу https://servbay-react-test.prod, чтобы просмотреть собранную производственную версию. Благодаря пользовательским доменам и бесплатным SSL-сертификатам от ServBay ваш сайт будет иметь более высокий уровень безопасности и надежности.

Следуя этим шагам, вы успешно создадите и запустите проект React, используя функции, предоставляемые ServBay, для управления и доступа к вашему проекту.