React Base Fiddle (JSX)

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

by Anton Kolesnikov

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

var CitySelect = React.createClass({
	choiseCity: function(e) {
  	this.props.city(e.target.value);
  },
	render: function() {
  	return <div>
    	<h3>Выбор города</h3>
    	<select onChange={this.choiseCity}>
      	{this.props.cities.map(function(city) {
      			return <option>{city}</option>
        	})
      	}
      </select>
    </div>;
  }
});

var WeatherData = React.createClass({
	getWeather: function() {
  	var api = 'a7b9b506c7022dcb553dc194a4316f4f';
    var city = {this.props.cityID};   
    var url = 'http://api.openweathermap.org/data/2.5/weather?id=' + cityID + '&appid=' + api + '&lang=ru&units=metric';
  },
	render: function() {
  	return <div>Данные о погоде {this.props.cityID}</div>;
  }
});

var Weather = React.createClass({
	getInitialState: function() {
  	return {
    	city: 'Krasnodar',
    	cities: {
        'Krasnodar': {
          id: '542420'
        },
        'Pyatigorsk': {
          id: '503550'
        }
			}
		}
  },
  changeCity: function(city) {
		this.setState({city: city});
  },
  render: function() {
    return (
    	<div>
        <h2>Компонент погода {this.state.city}</h2>
        <CitySelect cities={Object.keys(this.state.cities)} city={this.changeCity}/>
        <WeatherData cityID={this.state.cities[this.state.city].id}/>
			</div>
    );
  }
});

ReactDOM.render(
  <Weather />,
  document.getElementById('container')
);