Я делаю некоторые тесты с React и Express.Конечная цель - заставить Express подключиться к базе данных Mysql и получить от нее данные.
Я понимаю, как хорошо работают и React, и Express, и после нескольких попыток я смог получить свой Reactприложение для получения данных от Express.Это было сделано путем запуска React на порту 3000 и моего server.js на порту 8080, следуя этому руководству .
Что меня смущает теперь, когда у меня это работает локально, так это то, какя должен заставить его работать после создания моего приложения.
Я собрал его и загрузил, чтобы проверить, работает ли он, но, конечно, это не так.
http://creativiii.com/build/
Если вы проверите консоль, вы увидитеон не может связаться с /ping.
Экспресс работает только локально?Мне трудно это понять.
Вот мои сценарии на всякий случай:
App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
componentDidMount() {
fetch('/ping')
.then(response => response.json())
.then(posts => console.log(posts))
}
render() {
console.log(process.env.PORT)
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
server.js:
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/ping', function (req, res) {
return res.send(JSON.stringify({ a: 1 }));
});
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(process.env.PORT || 8080);
Редактировать: я написал неправильный заголовок, исправил его сейчас.