Вызов React View из Express

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

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

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

app.js

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

конфигурации | 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.

источник

2015-04-14 PositiveGuy

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

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

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

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

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

источник

2015-04-14 18:59:07

Что значит написать приложение для реагирования в одном приложении для реагирования и пакеты jsx include в файле app.js? – PositiveGuy

Экспресс не является средством просмотра страниц/генерации, так что не понимая этого пункта выше, пожалуйста, объясните еще раз спасибо. Я имею в виду, что у него есть метод render(). Таким образом, вы говорите, что не используйте это и использовать реактивный маршрутизатор, поскольку он имеет возможность визуализации – PositiveGuy

, поэтому, если вы не собираетесь использовать экспресс в качестве генератора страницы/представления, который, как я полагаю, означает, что я не буду устанавливать приложение. для выражения, что делает взгляды? – PositiveGuy

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

маршруты | индекс.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

источник

2015-04-14 19:21:15 deowk

спасибо, я бы подумал res.render(), но я, очевидно, не понимаю этого еще ... – PositiveGuy

удовольствие, пожалуйста, не забывайте отмечать как ваш принятый ответ, если он решил вашу проблему ... :) – deowk

Я jus любопытно, как это сделать без реагирования-маршрутизатора, чтобы узнать, как работает native response/express без каких-либо добавленных библиотек. – PositiveGuy

Другие ответы работают с обычным способом использования реакции, чтобы заменить элемент в 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. этот простой минималистский tutorial и это blog post помогло мне лучше понять ситуацию

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

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

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

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

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

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

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

источник

2015-08-25 16:00:18 ChetPrickles

Ссылка «Учебник» теперь сломана. Похоже, что этот домен припаркован. –

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

источник

2017-04-03 20:42:57 Tyler

Вызов React View из Express

ответ

Смежные вопросы