Вызов React View из Express

Я не могу найти хороший минимальный пример, где я могу подключить маршрут express.js, чтобы вызвать реакцию.

До сих пор это то, что у меня есть.

+-- app.js
+-- config
|   +-- server.js
+-- routes
|   +-- index.js
+-- views
|   +-- index.html

app.js

require('./config/server.js');
require('./routes/index.js');

config | server.js

"use strict";
var express = require('express'),
app = express(),

routes = require('./routes');

app.set('view engine', 'html');
app.engine('html', ); // how do I tell express that JSX is my template view engine?

var port = process.env.PORT || 3000;

app.engine('handlebars', exphbs({ defaultLayout: 'main'}));
app.set('view engine', 'handlebars');


var server = app.listen(port, function(){
    console.log('Accepting connections on port ' + port + '...');
});

маршруты | index.js

app.get('/', function(request, response){
    // how do we call the route that will run index.html ?
    request.render('index');
});

виды | index.html

<!DOCTYPE html>
<html>
<head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
    <script type="text/jsx" src="build/noEpisodes.js"></script>
</head>
<body>
    <div id="noEpisodesMessage"></div>
</body>
</html>

а затем мою страницу index.htm, а также созданную jsx.

Ответ 1

Обычная вещь - использовать react-router, чтобы позаботиться о маршрутах, напишите свое приложение React как одно приложение React (т.е. весь ваш источник JSX попадает в один файл app.js, который знает, как загружать все ваши "страницы" или "виды" ), а затем использовать экспресс (или Hapi или любой другой серверный процесс) в основном как ваш API и актив сервер, а не ваш генератор страницы/представления.

Затем вы можете использовать маршруты, настроенные в объекте react-router Router, чтобы на экспресс-стороне вы могли перенаправить своих пользователей на URL-адрес, с которым react-router может справиться с загрузкой контента, поэтому вы получаете

пользовательский запрос site.com/lol/monkeys
выразить перенаправления на /#/lol/monkeys
ваше приложение-ответ загружает правильный вид из-за маршрутов в маршрутизаторе
необязательно, ваше приложение делает history.replaceState так, чтобы пользователь увидел site.com/lol/monkeys (для этого есть некоторые трюки с обратным маршрутизатором)

Вы также можете автоматизировать большую часть этого процесса с помощью серверной рендеринга, но это имя может сбивать с толку: вы все равно пишете свое приложение React, как будто никакого сервера не задействовано вообще, а затем полагайтесь на механизм рендеринга React, чтобы полностью отобразить индивидуальный "страницы" для запрошенного URL-адреса, который покажет все правильное исходное содержимое, а затем загрузит ваше приложение и тихо подключит его к содержимому, которое ищет пользователь, так что любые взаимодействия, предшествующие загрузке начальной страницы, снова обрабатываются React, и последующая навигация - это "поддельная" навигация (ваш URL-адрес отобразит новый URL-адрес, но фактическая сетевая навигация не произойдет, React просто меняет содержимое в/из).

Хорошим примером для этого является https://github.com/mhart/react-server-example

Ответ 2

Другие ответы работают с обычным способом использования реакции, чтобы заменить элемент в dom таким образом

React.render(<APP />, document);

но если вы хотите отреагировать на свой "язык шаблонов" в выражении, вы также можете использовать реакцию для рендеринга простой строки html, например,

app.get('/', function(req, res) {
  var markup = React.renderToString(<APP />);  // <-- render the APP here
  res.send(markup);                          // <-- response with the component
});

есть еще несколько вещей, о которых вам нужно позаботиться в плане объединения всех зависимостей и работы с jsx. этот простой минималистский учебник, и этот пост в блоге помог мне понять ситуация лучше

обратите внимание, что пример кода в учебнике использует этот синтаксис

var markup = React.renderToString(APP());

который устарел и вызовет ошибку. для его использования вам придется заменить

var APP = require('./app');

var APP = React.createFactory(require('./app'));

или просто визуализировать jsx, как в первом примере. чтобы получить учебное пособие для работы, возможно, мне также пришлось использовать более поздние версии зависимостей в package.json.

После того, как вы получите это, , вы увидите более мощный способ использования реактивного движка для рендеринга в express

Ответ 3

Если вы хотите сохранить его простым, вы можете сделать это для точки входа вашего приложения:

маршруты | index.js

app.get('/', function(request, response){

    // how do we call the route that will run index.html ?
    res.sendfile('../views/index.html');
});

React нацелен на конкретный элемент на странице index.html в методе рендеринга:

React.render(<Application />, document.getElementById('foo'));

Итак, если ваш javascript включен в index.html, и элемент с этим идентификатором присутствует, он будет вводить ваше приложение в этот div. С этого момента вы можете выполнять всю маршрутизацию с помощью интерактивного маршрутизатора ИЛИ вы можете настраивать разные маршруты в экспресс и обрабатывать их, как вы делали index.html

Ответ 4

Вместо ручного обращения с React.render вы можете использовать библиотеку под названием response-helper (https://github.com/tswayne/react-helper). Он настраивает div для вас, связывает ваши реагирующие компоненты с div, позволяет передавать свойства на сервер ваших компонентов и может даже обрабатывать рендеринг на стороне сервера, если у вас есть веб-пакет, настроенный для вашего приложения node, или готовы используйте babel-register (не рекомендуется для prod).