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

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

В этом посте мы настроим приложение React вместе с серверным приложением Express и подключим пользовательский интерфейс для получения некоторых данных из серверной части.

И, если ваш бэкэнд не написан с использованием Express, не волнуйтесь! Этот же процесс будет работать и для вас (перейдите к разделу Настройка прокси).

Давай займемся этим.

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

Сначала нам понадобится приложение Express. Если он у вас уже есть, вы можете пропустить этот шаг.

Для целей этого поста мы сгенерируем его с помощью утилиты express-generator. Установите генератор:

$ npm install -g express-generator
  # or: yarn global add express-generator

Затем запустите его, чтобы создать приложение Express:

$ express react-backend

Будет создана react-backend папка. Затем обязательно установите зависимости:

$ cd react-backend
$ npm install   # or yarn

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

Это все, что мы будем делать с Express. Запустите приложение, запустив его в терминале:

$ PORT=3001 node bin/www

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

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

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

Перво-наперво убедитесь, что у вас установлен create-react-app, если вы еще этого не сделали:

$ npm install -g create-react-app

Затем из папки react-backend создайте приложение React:

$ create-react-app client

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

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

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

Порт (3001) в строке «прокси» должен совпадать с портом, на котором работает ваш сервер Express.

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

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

Как только это будет сделано, запустите сервер разработки React, запустив npm start (или yarn start).

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

На данный момент работают 2 сервера: Express (порт 3001) и сервер разработки Webpack приложения Create React (порт 3000).

Давайте позвоним на /users конечную точку и убедимся, что весь конвейер работает.

Откройте client/src/App.js и настройте его так:

Вот изменения:

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

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

Теперь разверните его в производственной среде!

Ознакомьтесь с частью 2, Создание приложения React с помощью Express в производственной среде, где мы создаем приложение Express + React и развертываем его в Heroku.

Дальнейшее чтение

Первоначально опубликовано на daveceddia.com