Black magic..? (yes)
getInitialStateAsync: function(callback) {
api.articles.get({
limit: 10,
offset: 0
}, function(err, result) {
callback(err, { articles: result });
});
},
//...
ReactAsync.renderToStringAsync(...);
react-router?
linkClickHandler: function(event) {
if (isBrowser && hasHistory) {
history.pushState({
articles: this.state.articles,
scrollPosition: document.body.scrollTop
}, null, '/?offset=' + this.state.articles.length);
}
// no event.preventDefault();
},
componentDidMount: function() {
if (isBrowser && hasHistory && history.state) {
this.setState({
articles: history.state.articles,
});
imagesLoaded(this.getDOMNode(), function() {
window.scrollTo(0, history.state.scrollPosition);
history.replaceState(null, null, window.location.origin);
});
}
},
// old jquery code from the news-stream
// ??
<NewsStreamContainer styles={styles}>
<CategoryNavigation
categories={this.state.categories}
activeCategory={this.state.activeCategory}
onCategoryClick={this.onCategoryClick}
/>
<CategoryContent>
<SourceNavigation
sources={currentCategory.sources}
activeSource={this.state.activeSource}
onSourceClick={this.onSourceClick}
/>
<SourceContent>
<ArticleList
articles={articles}
/>
</SourceContent>
</CategoryContent>
</NewsStreamContainer>
var React = require('react');
var NewsStream = require('sol-react-news-stream');
React.renderComponent(
React.createElement(NewsStream, { apiURL: apiURL }),
document.getElementById('newsStream')
);
Client-side js only
var React = require('react');
var NewsStream = require('sol-react-news-stream');
var App = React.createClass({
render: function() {
return (
<div>
<NewsStream apiURL={apiURL} />
</div>
);
}
});
Server + client-side
// fetch styles
var styles = fs.readFileSync(
__dirname + '/style.min.css',
'utf8'
);
// pass it to component
<NewsStream styles={styles}>..</NewsStream>
// inject the styles as a tag
<style
dangerouslySetInnerHTML={{__html: this.props.styles }}
/>
(Probably a better solution)
Building a News Aggregator using Streams and Functional JavaScript
Building Isomorphic Applications
(JavaScript Optional)