Это очень распространенный вопрос среди более новых разработчиков реагирования, и один вопрос, который у меня был когда я начинал с реагирования и Node.js. В этом коротком примере я покажу вам, как сделать Create-React-App Работа с Node.js и экспресс-конец.
Create-React-App
Создайте проект, используя Create-React-App Отказ
npx create-react-app example-create-react-app-express
Создать /клиент каталог под Пример - React-App-Express Справочник и переместите весь код RACH BOOTERPATE, созданный Create-React-App в этот новый клиентский каталог.
cd example-create-react-app-expressmkdir client
Узел экспресс-сервер
Создать Package.json Файл внутри корневого каталога ( Пример - React-app-app-express ) и скопируйте следующее содержимое:
{
"name": "example-create-react-app-express",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4"
},
"devDependencies": {
"concurrently": "^4.0.1"
}
}Обратите внимание, что я использую одновременно Для запуска ACT APP и сервера одновременно. -Килл-другие-на-неудачники Флаг убьет другие процессы, если вы выступаете с ненулевым кодом состояния.
Установить Номемон Глобально и серверные зависимости:
npm i nodemon -g yarn
Создать server.js Файл и скопируйте следующее содержимое:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/api/hello', (req, res) => {
res.send({ express: 'Hello From Express' });
});
app.post('/api/world', (req, res) => {
console.log(req.body);
res.send(
`I received your POST request. This is what you sent me: ${req.body.post}`,
);
});
app.listen(port, () => console.log(`Listening on port ${port}`));Это простой экспресс-сервер, который будет работать по порту 5000 и имеет два маршрута API: Получить – /API/HELLO и Пост – /API/Мир Отказ
В этот момент вы можете запустить сервер Express со следующей командой (еще внутри корневого каталога):
node server.js
Теперь перейдите к http://localhost: 5000/API/Hello и вы получите следующее:
Мы проверим Пост Маршрут, как только мы построим приложение React.
Приложение React
Теперь переключитесь к клиент каталог, где живет наше приложение React.
Добавьте следующую строку в Package.json Файл создан Create-React-App Отказ
"proxy": "http://localhost:5000/"
Ключ к использованию экспресс-подтверждающего сервера с проектом, созданным с помощью Create-React-App это использовать прокси. Это сообщает серверу разработки веб-пакета прокси нашим запросам API на наш сервер API, учитывая, что наш экспресс-сервер работает на localhost: 5000 Отказ
Теперь измените ./Client/src/app.js Чтобы вызвать нашу экспресс-API Back-End, выделены смелыми изменениями.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {
response: '',
post: '',
responseToPost: '',
};
componentDidMount() {
this.callApi()
.then(res => this.setState({ response: res.express }))
.catch(err => console.log(err));
}
callApi = async () => {
const response = await fetch('/api/hello');
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
handleSubmit = async e => {
e.preventDefault();
const response = await fetch('/api/world', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ post: this.state.post }),
});
const body = await response.text();
this.setState({ responseToPost: body });
};
render() {
return (
);
}
}
export default App;Мы создаем Callapi Метод взаимодействия с нашими Получить Express API маршрут, затем мы называем этот метод в ComponentDidmount и наконец установить состояние в ответ API, который будет Здравствуйте из Express Отказ
Обратите внимание, что мы не использовали полностью квалифицированный URL http://localhost: 5000/API/Hello Чтобы позвонить нашему API, хотя наше приложение React работает на другом порту (3000). Это из-за прокси линия, которую мы добавили в Package.json файл ранее.
У нас есть форма с одним входом. При отправке звонков Handlesubmit , который в свою очередь называет наши Пост Маршрут Express API, затем сохраняет ответ на состояние и отображает сообщение пользователям: Я получил ваш почтовый запрос. Это то, что вы отправили мне: [сообщение от ввода] Отказ
Теперь открыть ./Client/src/app.css и изменить .App-header класс следующим образом (изменения жирным шрифтом)
.App-header {
...
min-height: 50%;
...
padding-bottom: 10px;
}Запуск приложения
Если у вас все еще есть сервер работает, продолжайте и остановите его, нажав Ctrl + C в своем терминале.
Из корневого каталога проекта выполните следующие действия:
yarn dev
Это запустит приложение React и запустит сервер одновременно.
Теперь перейдите к http://localhost: 3000 И вы попадете в приложение React, отображающее сообщение, исходящее из нашего Получить Экспресс маршрут. Хороший ?!
Теперь введите что-нибудь в поле ввода и отправьте форму, вы увидите ответ от Пост Экспресс маршрут отображается прямо под полевым полем.
Наконец-то посмотрите на свой терминал, вы увидите сообщение, которое мы отправили от клиента, то есть потому, что мы называем console.log на тело запроса в Пост Экспресс маршрут.
Развертывание производства к Heroku
Открыть server.js и заменить со следующим содержимым:
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// API calls
app.get('/api/hello', (req, res) => {
res.send({ express: 'Hello From Express' });
});
app.post('/api/world', (req, res) => {
console.log(req.body);
res.send(
`I received your POST request. This is what you sent me: ${req.body.post}`,
);
});
if (process.env.NODE_ENV === 'production') {
// Serve any static files
app.use(express.static(path.join(__dirname, 'client/build')));
// Handle React routing, return all requests to React app
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}
app.listen(port, () => console.log(`Listening on port ${port}`));Открыть ./package.json и добавьте следующее в Сценарии Вход
"start": "node server.js", "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
Heroku будет запускать Начать Сценарий по умолчанию, и это будет служить нашему приложению. Тогда мы хотим проинструктировать Heroku построить наше клиентское приложение, мы делаем это с Heroku-PostBuild скрипт
Теперь отправляйтесь на Heroku и войдите в систему (или откройте учетную запись, если у вас нет одного).
Создайте новое приложение и дайте ему имя
Нажмите на Развертывание Вкладка и следуйте инструкциям по развертыванию (которые, я думаю, они красивы самоуверенно, нет смысла реплицирования их здесь?)
И именно это, вы можете открыть свое приложение, нажав на Открытое приложение Кнопка в правом верхнем углу в панели инструментов Heroku для вашего приложения.
Посетите развернутое приложение для этого руководства: https://cra-express.herokuapp.com/
Другие варианты развертывания
Я пишу о других вариантах развертываниях здесь:
Структура проекта
Это будет окончательная структура проекта.
Получите полный код на Github Repository Отказ
Спасибо за чтение, и я надеюсь, что вам понравилось. Любой вопрос, предложения дайте мне знать в комментариях ниже!
Вы можете следовать за мной на Twitter , Github , Средний , LinkedIn или все они.
Этот пост был изначально размещен на моем личном Веб-сайт блога Отказ
Обновление 8/25/19: Я строил молитвенное веб-приложение под названием « Мое тихое время – молитвенный журнал ». Если вы хотите остаться в цикле, пожалуйста, зарегистрируйтесь по следующей ссылке: http://b.link/mqt
Приложение будет выпущено до конца года, у меня есть большие планы для этого приложения. Чтобы увидеть несколько скриншотов макета, следуйте следующей ссылке: http://pc.cd/lpy7.
Мой DMS на Twitter Открыты, если у вас есть какие-либо вопросы относительно приложения?