Настройка React и Express не должна быть сложной. Оба они поставляются с генератором проектов, который вы можете запустить из командной строки, который создает всю необходимую вам базовую файловую структуру.

После обновления npm в 2017 году вы можете запускать последнюю версию этих генераторов, используя npx. В вашем терминале OSX / Linux просто выполните следующие команды:

mkdir node-react-app && cd node-react-app
npx create-react-app client
npx express-generator backend --no-view
cd backend && npm install

Create-react-app поддерживается создателями React, Facebook, и является стандартным способом запуска проекта React. Под капотом он легко управляет Webpack, babel, yarn и eslint для конфигурации, которая удовлетворяет большинству потребностей. И, что лучше всего, нет блокировки, поэтому вы можете в конечном итоге отредактировать базовые конфигурации, если вам нужно что-то более сложное.

Экспресс-генератор - аналогичный инструмент, поддерживаемый создателями Express. Обычно он поставляется со своим собственным интерфейсом jade или ejs, но этого можно избежать с помощью флага --no-view. В отличие от create-response-app, зависимости не устанавливаются сразу, поэтому мы должны npm install.

Теперь нужно решить две проблемы.

Во-первых, оба генератора по умолчанию работают на порту 3000. В серверной части app.js обрабатывает основную логику приложения, а bin / www обрабатывает выделение портов. Чтобы изменить порт по умолчанию в bin / www, измените следующую строку:

//FROM
var port = normalizePort(process.env.PORT || '3000');
//TO
var port = normalizePort(process.env.PORT || '3001');

Во-вторых, приложение React работает на порту 3000, но ему необходимо отправлять запросы API на бэкэнд на порт 3001. Наивный подход заключался бы в прямой отправке запросов API на localhost: 3001.

Давайте посмотрим, что происходит с этим подходом. Перейдите в каждую папку в два отдельных терминала и запустите бэкэнд с yarn start и клиент с npm run start. Затем добавьте в client / src / App.js следующее:

fetch('http://localhost:3001/users')
  .then(response => response.text())
  .then(data => console.log({data}));

Проверив консоль, вы обнаружите ошибку CORS.

Вы можете решить проблему CORS напрямую, но это в конечном итоге вызовет проблемы в производственной среде, когда клиент обращается не к localhost, а к вашему домену. К счастью, в приложении create-react-app есть простое решение. В client / package.json добавьте следующую строку:

"proxy": "http://localhost:3001"

Теперь вы можете изменить выборку на:

fetch('/users')
.then(response => response.text())
.then(data => console.log({data}));

Когда сервер обновится, вы увидите успешное соединение с вашим сервером! Поздравляем с успешным подключением React и Express!

Дополнительно:

Чтобы обеспечить простую работу обоих проектов одновременно, вы можете использовать пакет npm одновременно. В основной папке приложения node-response-app выполните следующие команды:

npm init -y 
npm i concurrently

Теперь в package.json в разделе скриптов добавьте следующую строку:

"start": "concurrently \"cd backend && npm run start\" \"cd client && yarn start\"",

Теперь в основной папке вы можете просто запустить npm run start, чтобы оба приложения заработали.

Если вам нужны более сложные настройки, ознакомьтесь с моими Node Base и React Base, которые я использую для своих личных проектов.