Разработка React приложения с бэкэндом на Express

Если вы ещё не слышали об этом, то Create React App это хороший способ начать работать с React. Он создаёт структуру проекта за вас, всё настраивает и подготавливает к работе. Вы пропускаете настройку Webpack и Babel, и можете сразу начинать писать своё приложение.

Но что если ваше приложение состоит не только из фронтенда? Что если вам нужно подключаться к серверу? Create React App это предусмотрел.

В этой статье мы настроим React приложение с Express приложением на бэкэнде, и настроим UI для получения каких-то данных с сервера.

И если ваше приложение написано не на Express, не переживайте! Такой процесс подойдёт и для вас тоже (просто пропустите этап настройки прокси).

Давайте приступим.

Создание Express приложения

Прежде всего нам нужно Express приложение. Если у вас оно уже есть, можете пропустить этот шаг.

Для этой статьи, мы создадим его с помощью утилиты express-generator.

Устанавливаем утилиту:

Install Express generator

Теперь нужно запустить эту утилиту чтобы создать Express приложение:

Create Express app process

Эта команда создаст папку react-backend. Теперь нужно установить зависимости:

Мы можем проигнорировать большинство из сгенерированных файлов, но отредактируем файл react-backend/routes/users.js чтобы по простому вернуть какие-то данные для примера. Вот изменения, которые мы внесём:

Это всё что мы сделаем с Express приложением. Запустите приложение с помощью:

(Прим. переводчика: После запуска команды, в терминале ничего не появится. Но вы можете проверить, что Express запущен просто набрав в терминале localhost:3001)

Оставьте его включенным и откройте новый терминал. Обратите внимание на переменную PORT. По умолчанию Express запускается на 3000 порту, но и Create React App запускается по умолчанию запускается на 3000 порту. Поэтому чтобы избежать конфликтов, мы запускаем Express на 3001 порту.

Создание React приложения

Вы можете разместить React приложение там где пожелаете. Это не обязательно должна быть подпапкой Express приложения, но чтобы всё было организованно мы сделаем именно именно так.

В первую очередь нам нужно установить create-react-app, если он у вас ещё не установлен:

После этого в папке react-backend, создайте React приложение:

Настройки прокси

Это ключевое изменение, которое позволит React приложению общаться с сервером на Express (ну или любым другим бэкэндом).

Внутри папки React ( client), откройте файл package.json (убедитесь, что это package.json не от Express’а — в нём должны должны быть такие вещи как «react» и «react-scripts»). После секции «scripts» добавьте строку «proxy», как здесь:

Порт (3001) в строке «proxy» должен совпадать с портом на котором запущен Express сервер.

Обратите внимание на то что можно указать любой сервер. Это может быть ещё один локальный сервер на Java или Python, или это может быть настоящий сервер в интернете. Не имеет значения.

Таким образом, каждый раз когда ваше React приложение делает запрос не за статическим ресурсом (не за изображением, CSS или index.html), он будет перенаправлять запрос на сервер указанный в "proxy".

Как работает прокси

Когда всё выше перечисленное проделано, запустите React сервер с помощью команды npm start (или yarn start).

Получение данных из React

На данный момент у нас запущенно 2 сервера: Express (на 3001 порту) и Create React App Webpack сервер (на 3000 порту).

Давайте сделаем вызов к конечной точке /users и убедимся что у нас всё работает.

Откройте файл client/src/App.js и настройте его следующим образом:

Вот что мы изменили:

  • Настроили начальное состояние: пустой массив users предотвратит this.state.users.map от взрыва перед тем как пользователи будут загружены;
  • Изменили render на отображение пользователей;
  • Добавили componentDidMount для получения данных с помощью fetch, и сохранения их в состоянии;

Create React App приходит с полифиллом fetch встроенным так, что всё готово к использованию, даже если браузер ещё не поддерживает его нативно.

Комментарии

Добавить комментарий

  • Misha

    You can put the React app anywhere you like. It doesn’t need to be a subfolder of the Express app, but that’s what we’ll do here to keep things organized.