Реагировать на события компонента, не работающие на сервере NodeJs + Express

Question

Мы строим проект, используя стек MERN в первый раз. Это приложение Stand-ups and Retros. Проблема в том, что наши события реагирования не работают на стороне сервера, но отлично работают на стороне клиента. В основном мы можем обслуживать статическую страницу с использованием React, но не динамически, которая обновляет и сохраняет состояние при использовании Node & 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 и посетить Localhost: 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}]`); 
}) 

Я не показываю здесь компоненты React, потому что мы знаем, что они отлично работают на стороне клиента.

Мы считаем, что нам не хватает чего-то в маршрутизации Express, когда мы отправляем запросы, но не можем поместить на него палец.

Спасибо!

Answer 1

Ваши просмотренные сервером виды, как вы сказали, STATIC-- чистая разметка, только текст. Это то, что делает renderToString. Эти страницы по-прежнему должны включать JS на стороне клиента для обработки событий.

Еще один способ - написать весь код внутри ваших обработчиков событий непосредственно в опоре как анонимную функцию. Это плохая практика.

Answer 2

Благодарим вас за ребята. Мы действительно это ценим.

Мы проанализировали ваши ответы и приняли их во внимание.

Но с помощью нашего тренера Мэри мы поняли, что нам не нужен наш Javascript-код в нашем шаблоне просмотра, index.ejs со стороны сервера.

Простая ошибка, которую мы опустили, потому что, когда вы оказываете на стороне клиента с Реагировать с помощью index.html, вам не нужно включать <script> тег со всем кодом Javascript.

Таким образом, мы установили Webpack связать наши модули, которые были скомпилированы с Вавилонской, потому что мы используем последние ES6 синтаксис. Пусть боги кода простит нас за эту ошибку :), но это первый раз, когда мы делаем проект этой сложности с совершенно новым стеклом технологий, например MERN плюс несколько других промежуточного программного обеспечения и библиотек.

Я думаю Rails полностью упрямый, но NodeJs + ExpressJs ... Давайте просто сказать, что это одно удовольствие :)

Plus с первоначальной должности, это было 2 дня назад, мы реализовали еще несколько технологий, таких как Websockets и добавлено MongoDB как наша база данных, так что теперь наш код сложнее. И я почти забыл, мы также развертывается наше приложение на Heroku (я поставил ссылку, когда она будет закончена в пятницу 10 февраля.

Я вывешу GitHub репо, когда проект закончится. Это a cool Appups and Retros app :) Теперь мы даже говорим о Flux.

Это новая архитектура, которая заменит MVC легенда, по крайней мере в некоторых случаях и в некоторых компаниях, таких как Facebook?

Думаю, посмотрим!