As ReactJS is only view layer and works by his own, which additional libraries to use for for full stack ReactJS suite - data layer, comunication with server (AJAX calls, REST), etc. when building SPA (single page application)?
Are they any ReactJS full stack frameworks (something like AngularJS) available?
答案 0 :(得分:6)
ReactJS单独为您提供DOM渲染,但Facebook也创建了Flux
,它为您提供了一个可以工作的架构。按照Flux制定的规则,您现在拥有一个带有DOM渲染,数据模型和两者之间通信的SPA。
当然,您使用Flux构建的SPA是独立的。 Flux并没有为您提供执行AJAX请求的工具。你需要另一个图书馆。但是,NodeJS社区充满了AJAX实现,我可能更喜欢它。
superagent
非常受欢迎。 (这是我使用的。)您可能会注意到它不支持承诺,因此您也可以查看superagent-bluebird-promise
,其中analyze
包含bluebird
承诺库。
另外需要注意的是,如果您打算使用Flux,我建议您使用越来越多的包装库中的一个来帮助您减少样板。查看Reflux
。
完整周期可能看起来像这样......
superagent
RecordList.jsx
const React = require('react');
const Reflux = require('reflux');
const RecordStore = require('../stores/RecordStore');
const RecordActions = require('../actions/RecordActions');
const RecordList = React.createClass({
mixins: [
// auto-magically create event listeners to state change to re-render
Reflux.connect(RecordStore)
],
// There is no `getInitialState()` here, but the one in `RecordStore` is inherited.
// load the initial data
componentDidMount: function () {
RecordActions.load();
},
// render records as a list
render: function () {
return (
<li>
{
this.state.records.map(function (record) {
return <ul>{record.name}</ul>;
})
}
</li>
);
}
});
module.exports = RecordList;
RecordActions.js
const Reflux = require('reflux');
const request = require('superagent-bluebird-promise');
const RecordActions = Reflux.createActions({
// create an action called 'load' and create child actions of 'completed' and 'failed'
load: {asyncResult: true}
});
// set up promise for loading records
RecordActions.load.listenAndPromise(() =>
request.get('/records')
.type('application/json')
.then(res => res.body)
);
module.exports = RecordActions;
RecordStore.js
答案 1 :(得分:4)
http://martyjs.org/这是Flux应用程序架构的一个实现。
(es6 support / React native support / Higher order components(containers:https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750))
答案 2 :(得分:1)
您可能想在GitHub上搜索“反应入门套件”。使用React构建SPA的流行技术堆栈包括:
至于入门套件,这里有一个有趣的React样板http://habd.as/awesome-react-boilerplates
列表答案 3 :(得分:0)
您还可以在mern.io检查MERN(MongoDB,Express,ReactJS,NodeJs)的完整堆栈。我一直在使用它,它已经很棒了。它附带了Webpack,Redux和React-Router以及其他基本框架。