React Base Fiddle (JSX)

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

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>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<div id="container"></div>

Babel + JSX

class StoreMap extends React.Component {
  constructor (props) {
      super(props);
      this.map = {};
  }
  
  componentDidMount () {
  	// 地図ビュー用の <div> がレンダリングされたあとに L.Map を初期化
  	this.map = L.map('mapView', {
    	center: this.props.location,
      zoom: this.props.zoom
    });
    // 背景レイヤー
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);
    // 店舗マーカー
    const storeMarker = L.marker(this.props.location).bindPopup(this.props.storeName).addTo(this.map);
    storeMarker.openPopup();
  }
  
  componentWillReceiveProps (nextProps) {
  	// props が変更されたら Leaflet.js で状態を更新
  	this.map.setView(nextProps.location, nextProps.zoom);
  }

  render () {
  	const mapContainerStyle = {
      width: '100%',
      height: '450px',
    };
    return (
      <div id="mapView" style={mapContainerStyle}></div>
    );
  }
}

StoreMap.propTypes = {
  location: React.PropTypes.array,
  zoom: React.PropTypes.number,
  storeName: React.PropTypes.string
};

ReactDOM.render(
  <StoreMap location={[51.505, -0.09]} zoom={16} storeName={'店舗A'} />,
  document.getElementById('container')
);