title: loading json data from local file into React JS
body: <p>I have a React component and I want to load in my JSON data from a file. The console log currently doesn't work, even though I'm creating the variable <strong>data</strong> as a global</p>
  
  <pre><code>'use strict';
  
  var React = require('react/addons');
  
  // load in JSON data from file
  var data;
  
  var oReq = new XMLHttpRequest();
  oReq.onload = reqListener;
  oReq.open("get", "data.json", true);
  oReq.send();
  
  function reqListener(e) {
      data = JSON.parse(this.responseText);
  }
  console.log(data);
  
  var List = React.createClass({
    getInitialState: function() {
      return {data: this.props.data};    
    },
    render: function() {
      var listItems = this.state.data.map(function(item) {
          var eachItem = item.works.work;        
  
          var photo = eachItem.map(function(url) {
              return (
                  &lt;td&gt;{url.urls}&lt;/td&gt; 
              )
          });
      });
      return &lt;ul&gt;{listItems}&lt;/ul&gt;
    }
  });
  
  var redBubble = React.createClass({
      render: function() {
        return (
          &lt;div&gt;
            &lt;List data={data}/&gt;          
          &lt;/div&gt;
        );
      }
    });
  
  module.exports = redBubble;
  </code></pre>
  
  <p>Ideally, I would prefer to do it something like this, but it's not working - it tries to add <strong>".js"</strong> onto the end of the filename.</p>
  
  <pre><code>var data = require('./data.json');
  </code></pre>
  
  <p>Any advice on the best way, preferably the "React" way, would be much appreciated!</p>