React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by zargyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

const api = 'http://dataservice.accuweather.com/currentconditions/v1';

class Weather extends React.Component {
  constructor() {
    super();
    this.state = {};
  }
	componentDidMount() {
    const { location, apiKey } = this.props;
    fetch(`${api}/${location}?apiKey=${apiKey}`)
    	.then(res => res.json())
      .then(data => this.setState({ data }));
  }
  render() {
  	const { data } = this.state;
    return data ? (
      <div>
        <h1>
        	{data[0].WeatherText}
          <h3>{data[0].Temperature.Imperial.Value + 'deg F'}</h3>
        </h1>
      </div>
    ) : <div>Loading</div>;
  }
}

ReactDOM.render(
  <Weather
  	location="94103"
    apiKey="h3FtTnOfmonhheSAOPGsjJrHxFqzFGlo"
  />,
  document.getElementById('container')
);