Skip to content

Instantly share code, notes, and snippets.

@aaronschachter

aaronschachter/news.html

Created January 8, 2016 19:43
Show Gist options
  • Save aaronschachter/b2e0d2e760fbf34e82a0 to your computer and use it in GitHub Desktop.
Save aaronschachter/b2e0d2e760fbf34e82a0 to your computer and use it in GitHub Desktop.
Download ZIP
LDT News with React
Raw
news.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LDT News</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var NewsStory = React.createClass({
render: function() {
return (
<div className="newsStory">
<h2 className="newsStoryTitle">
{this.props.title}
</h2>
<h3>
{this.props.subtitle}
</h3>
<figure>
<img src={this.props.image_url} />
<figcaption>Photo: {this.props.image_credit}</figcaption>
</figure>
{this.props.children}
</div>
);
}
});
// tutorial9.js
var NewsStoryBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data.posts});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="newsStoryBox">
<h1>Let&#39;s Do This</h1>
<NewsStoryList data={this.state.data} />
</div>
);
}
});
// tutorial10.js
var NewsStoryList = React.createClass({
render: function() {
var newsStoryNodes = this.props.data.map(function(newsStory) {
var campaign_url = 'https://www.dosomething.org/node/' + newsStory.custom_fields.campaign_id;
return (
<NewsStory title={newsStory.title} subtitle={newsStory.custom_fields.subtitle} image_url={newsStory.attachments[0].url} image_credit={newsStory.custom_fields.photo_credit} campaign_id={newsStory.custom_fields.campaign_id}>
<ul>
<li>{newsStory.custom_fields.summary_1}</li>
<li>{newsStory.custom_fields.summary_2}</li>
<li>{newsStory.custom_fields.summary_3}</li>
</ul>
<a href={campaign_url}>Take action</a>
</NewsStory>
);
});
return (
<div className="newsStoryList">
{newsStoryNodes}
</div>
);
}
});
ReactDOM.render(
<NewsStoryBox url="http://dev-ltd-news.pantheon.io/?json=1" pollInterval={2000} />,
document.getElementById('content')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment