83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
|
/*
|
||
|
|
App
|
||
|
|
<App />
|
||
|
|
*/
|
||
|
|
var App = React.createClass({ displayName: "App",
|
||
|
|
getInitialState: function () {
|
||
|
|
return {
|
||
|
|
articles: {
|
||
|
|
'article': {
|
||
|
|
"color": "FEC006",
|
||
|
|
"title": "Snow in Turkey Brings Travel Woes",
|
||
|
|
"thumbnail": "",
|
||
|
|
"category": "News",
|
||
|
|
"excerpt": "Heavy snowstorm in Turkey creates havoc as hundreds of villages left without power, and hundreds of roads closed",
|
||
|
|
"date": new Date() },
|
||
|
|
|
||
|
|
'article-1': {
|
||
|
|
"color": "2196F3",
|
||
|
|
"title": "Landslide Leaving Thousands Homeless",
|
||
|
|
"thumbnail": "",
|
||
|
|
"category": "News",
|
||
|
|
"excerpt": "An aburt landslide in the Silcon Valley has left thousands homeless and on the streets.",
|
||
|
|
"date": new Date() },
|
||
|
|
|
||
|
|
'article-2': {
|
||
|
|
"color": "FE5621",
|
||
|
|
"title": "Hail the size of baseballs in New York",
|
||
|
|
"thumbnail": "",
|
||
|
|
"category": "News",
|
||
|
|
"excerpt": "A rare and unexpected event occurred today as hail the size of snowball hits New York citizens.",
|
||
|
|
"date": new Date() },
|
||
|
|
|
||
|
|
'article-3': {
|
||
|
|
"color": "673AB7",
|
||
|
|
"title": "Earthquake destorying San Fransisco",
|
||
|
|
"thumbnail": "",
|
||
|
|
"category": "News",
|
||
|
|
"excerpt": "A massive earthquake just hit San Fransisco leaving behind a giant crater.",
|
||
|
|
"date": new Date() } } };
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
renderArticle: function (key) {
|
||
|
|
return (
|
||
|
|
React.createElement("div", { className: "column" },
|
||
|
|
React.createElement(Article, { key: key, index: key, details: this.state.articles[key] })));
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
render: function () {
|
||
|
|
return (
|
||
|
|
React.createElement("div", { className: "app" },
|
||
|
|
React.createElement("div", { className: "container" },
|
||
|
|
Object.keys(this.state.articles).map(this.renderArticle))));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
} });
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
Article
|
||
|
|
<Article />
|
||
|
|
*/
|
||
|
|
var Article = React.createClass({ displayName: "Article",
|
||
|
|
render: function () {
|
||
|
|
var details = this.props.details,
|
||
|
|
styles = {
|
||
|
|
backgroundColor: '#' + details.color };
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
React.createElement("article", { className: "article" },
|
||
|
|
React.createElement("h3", { className: "article__category", style: styles }, details.category),
|
||
|
|
React.createElement("h2", { className: "article__title" }, details.title),
|
||
|
|
React.createElement("p", { className: "article__excerpt" }, details.excerpt)));
|
||
|
|
|
||
|
|
|
||
|
|
} });
|
||
|
|
|
||
|
|
|
||
|
|
ReactDOM.render(React.createElement(App, null), document.querySelector('#app'));
|