JSFiddle - React, Tailwind, and code Playground

by zpao

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var CuriousArticles = React.createClass({
  render: function() {
      return this.transferPropsTo(
        <div>{this.props.doc.headline.main}</div>
    )
  }
});

var CuriousArticleNodes = React.createClass({
  render: function() {
      console.log(this.props.docs);
      return (
          <div>
            {this.props.docs.map(function(doc, i) {
              return (
                <CuriousArticles doc={doc} />
              );
            }, this)}
          </div>
      );
  }
});

var CuriousNYTimes = React.createClass({
  getInitialState: function() {
    return {
      docs: []
    };
  },
  componentDidMount: function() {
    var d = new Date();
    date = d.getDate().toString();
    month = ("0" + (d.getMonth() + 1)).slice(-2);
    year = d.getFullYear().toString();
    var todayDate = year+month+date;

    var nytimes_api = "http://api.nytimes.com/svc/search/v2/articlesearch.json?q=curious&begin_date="+todayDate+"&end_date="+todayDate+"&hl=true&api-key=b6af98fd41980d05424ea701d4a43261%3A11%3A68765757";

    $.get(nytimes_api, function(result) {
      var Docs = result.response.docs;

      this.setState({
        docs: Docs
      });
    }.bind(this));
  },
  render: function() {
    if (this.state.docs.length === 0) {
        return <div>loading...</div>;
    }
    return (
        <CuriousArticleNodes docs={this.state.docs}/>
    );
  }
});

React.renderComponent(<CuriousNYTimes />,document.body);