Reaktionskomponentenereignisse funktionieren nicht auf NodeJs + Express-Server

Question

Wir erstellen zum ersten Mal ein Projekt mit dem MERN-Stack. Es ist eine Stand-ups und Retros App. Das Problem ist, dass unsere Reaktionskomponentenereignisse nicht auf der Serverseite funktionieren, aber perfekt auf der Clientseite funktionieren. Grundsätzlich können wir eine statische Seite mit React bedienen, aber keine dynamische Seite, die den Status aktualisiert und speichert, wenn der Knoten & Express als unser Server verwendet wird. Jede Hilfe, um diesen Block zu reparieren, wird sehr geschätzt.

Wir haben unser Projekt mit react-app initialisiert. Unsere package.json wie folgt aussieht: { "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" } } Wenn wir npm start laufen und besuchen localhost: 3000 wir diese Ansicht erhalten, die dynamisch aktualisiert wird: client side rendering screenshot

Wenn wir den Knoten Server mit nodemon --exec babel-node --presets 'react,es2015' src/server.js keine der Tasten öffnen arbeiten.

Der einzige erkennbare Unterschied in der Registerkarte Netzwerk ist Bundle.js. Welches ist nicht auf der Serverseite geladen.

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}]`); 
}) 

Ich zeige die React-Komponenten hier nicht, weil wir wissen, dass sie für die Clientseite gut funktionieren.

Wir glauben, dass wir etwas im Express-Routing vermissen, wenn wir die Anfragen senden, aber nicht den Finger darauf legen können.

Vielen Dank!

Answer 1

Ihre Server gerenderten Ansichten sind, wie Sie sagten, STATIC-- reines Markup, nur Text. Das macht renderToString. Diese Seiten müssen weiterhin JS auf der Clientseite enthalten, um Ereignisse verarbeiten zu können.

Ein anderer Weg ist, den gesamten Code innerhalb Ihrer Event-Handler direkt in die Stütze als anonyme Funktion zu schreiben. Das ist schlechte Praxis.

Answer 2

Vielen Dank für Ihr Feedback Jungs. Wir schätzen es sehr.

Wir haben Ihre Antworten analysiert und in Betracht gezogen.

Aber mit Hilfe unseres Trainers Mary stellten wir fest, dass wir unseren Javascript-Code in unserer View-Vorlage index.ejs auf der Serverseite nicht benötigten.

Ein einfacher Fehler, die wir da weggelassen, wenn Sie auf der Client-Seite machen mit Reagieren mit index.html, Sie keine <script>-Tag mit allen Javascript-Code enthalten müssen. So

wir installiert Webpack zu unseren Modulen zu bündeln, die mit Babel zusammengestellt wurden, weil wir die neueste ES6 Syntax verwenden. Mögen die Götter des Codes uns diesen Fehler verzeihen :) Aber es ist das erste Mal, dass wir ein Projekt dieser Komplexität mit einem völlig neuen Technologie-Stack wie MERN plus mehreren anderen Middleware und Bibliotheken machen.

Ich denke, Rails völlig eigenwillig, aber NodeJS + Express.js ... sagen wir einfach, es ist ein Spaß :)

Plus ab dem ersten Beitrag, dass vor 2 Tagen war, haben wir umgesetzt ein paar mehr Technologien wie Websockets und hinzugefügt MongoDB als unsere Datenbank, so jetzt ist unser Code komplexer. Und ich habe fast vergessen, wir entfalteten auch unsere App auf Heroku (Ich werde den Link setzen, wenn es am Freitag, den 10. Februar fertig ist.

Ich werde nach dem Github Repo, sobald das Projekt abgeschlossen ist. Es ist eine coole Standups und Retros App :) Jetzt sprechen wir sogar über Flux.

Ist das eine neue Architektur, die die MVC Legende ersetzen wird, zumindest in einigen Fällen und in einigen Unternehmen wie Facebook?

Ich denke, wir werden sehen!