У моего простого веб-приложения есть две страницы. (Экспресс в качестве сервера)Реагирование на стороне сервера с помощью реактивного маршрутизатора
/дома
/пункт
Чтобы проверить, если страница визуализации в клиенте и на сервере. Я печатаю текст на консоли. Я вижу текст «рендеринга» в консоли сервера и клиента, если я непосредственно набираю url localhost: 3000/item в браузере. Однако, если я получаю доступ к странице товаров через
<Link to="item">Item</Link>на домашней странице. Я вижу «рендер» только на стороне клиента, но не на стороне сервера? Поэтому я думаю, что он не отображается на стороне сервера. Или я что-то не понимаю? может кто-нибудь мне сказать?Другой вопрос: я хотел бы использовать тот же код для создания приложения phonegap, работающего в android. Есть ли проблема, если я использую рендеринг на стороне сервера React? Или я должен использовать рендеринг на стороне клиента React, а затем вызвать restful для получения данных?
еще один вопрос: , когда я использую этот код в сервер он дает мне "неожиданный маркер <" ошибка
React.renderToString (< Handler/>)
Так что я изменено на
React.renderToString(React.createElement(Handler))
Как настроить сервер так, чтобы он знал, как разбирать jsx код?
Спасибо всем
item.js
var React = require('react'),
DOM = React.DOM, div = DOM.div, button = DOM.button, ul = DOM.ul, li = DOM.li
// This is just a simple example of a component that can be rendered on both
// the server and browser
module.exports = React.createClass({
getInitialState: function() {
console.log('getInitialState');
return {
count: 0//this.props.initialCount
};
},
_increment: function() {
console.log('_increment');
this.setState({ count: this.state.count + 1 });
},
render: function() {
console.log('render');
return div({onClick:this._increment}, this.state.count);
}
});
server.js
app.use(function (req, res) {
Router.run(routes, req.path, function (Handler) {
res.send('<!DOCTYPE html>' + React.renderToString(React.createElement(Handler)));
});
});
browser.js
var React = require('react');
var Router = require('react-router');
var routes = require('./routes');
//var Info = require ('./pages/info.jsx');
/*React.render(
<h1>Hello, world!</h1>,
document.getElementById('main')
);*/
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler />, document);
});
вместо того, чтобы разобрать jsx каждый раз на стороне сервера, лучше разместить обработанный javascript на сервере. т.е. запустить jsx во время разработки и развернуть javascript напрямую. – arkoak
Это может быть хороший ресурс относительно пункта 3: http://jlongster.com/Backend-Apps-with-Webpack--Part-I – Daniel
Как насчет вопроса 1 и 2? кто-нибудь может мне помочь? – fingercross