初めてMERNスタックを使用してプロジェクトを構築しています。それはスタンドアップとレトロアプリです。問題は、私たちのコンポーネントイベントを反応させることがサーバー側では行われていないことです。しかし、クライアント側では完全に動作します。基本的にReactを使用して静的ページを提供することはできますが、Node & Expressをサーバーとして使用している状態を更新して保存する動的ページは動的には提供できません。このブロックを修正するための助けがあれば幸いです。NodeJs + Expressサーバで反応しないコンポーネントイベントが発生する
react-appでプロジェクトを初期化しました。 私たちのpackage.jsonは次のようになります。 { "name": "standup", "version": "0.1.0", "private": true, "devDependencies": { "babel-cli": "^6.22.2", "babel-core": "^6.22.1", "ejs": "^2.5.5", "express-react-engine": "^0.6.0", "express-react-views": "^0.10.2", "http-server": "^0.9.0", "mocha": "^3.2.0", "react-router": "^3.0.2", "react-scripts": "0.8.5", "should": "^11.2.0", "supertest": "^3.0.0" }, "dependencies": { "body-parser": "^1.16.0", "express": "^4.14.1", "react": "^15.4.2", "react-addons-test-utils": "^15.4.2", "react-dom": "^15.4.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } 我々はnpm startを実行して、ローカルホストにアクセスしてください：3000我々は動的に更新され、このビューを取得：client side rendering screenshot
我々はボタンのnodemon --exec babel-node --presets 'react,es2015' src/server.jsどれも動作しません使用してノードのサーバーを開く 。
[ネットワーク]タブの唯一の違いは、Bundle.jsです。どちらがサーバー側にロードされていません。
This is our Express server:
import path from 'path';
import {Server} from 'http';
import Express from 'express'
import React from 'react';
import { renderToString } from 'react-dom/server';
import HomePage from './components/HomePage'
import RetroPage from './components/RetroPage'
import StandupPage from './components/StandupPage'
const app = new Express();
const server = new Server(app);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
console.log(path)
app.use(Express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
let markup = renderToString(<HomePage />)
res.render('index', {markup});
});
app.get('/standup', (req, res) => {
let markup = renderToString(<StandupPage/>)
res.render('index', {markup})
})
app.get('/retro', (req, res) => {
let markup = renderToString(<RetroPage/>)
res.send(markup);
})
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, err => {
if (err) {
return console.error(err);
}
console.info(`Server running on http://localhost:${port} [${env}]`);
})
クライアント側で正常に動作していることがわかっているので、ここでリアクションコンポーネントを表示していません。
Expressルーティングではリクエストを送信しても指を置くことができないと考えています。
ありがとうございました！
私はあなたがしたいことに従っているかどうかはわかりません。あなたはサーバー側のレンダリングをしようとしていますか？あなたはリアクション・ルータ経由でページ間を移動することを確実にしています...私はこれまでにReactプロジェクトを見たことがあります：フロントエンドのためのリアクションとReactプロジェクトによって呼び出されるNode/Express REST API 。 – Turtle