Using widgets with React

This sample shows how to use React with ViewModels to create a custom widget experience. Specfically, it demonstrates how to use the ZoomViewModel to create a custom Zoom button.

1. Set up React as AMD modules

First, you need to add React and ReactDOM as AMD modules in your dojoConfig.

window.dojoConfig = {
  async: true,
  packages: [{
    name: "react",
    location: "https://fb.me/",
    main: "react-0.14.7.min"
  },{
    name: "react-dom",
    location: "https://fb.me/",
    main: "react-dom-0.14.7.min"
  }]
};

Now you can start using them as normal AMD modules.

2. Create a simple map and view

Create a simple map and add it to either a MapView or a SceneView. If you are unfamiliar with views or how to create a basic map, see the following resources:

• Get started with MapView
• Get started with SceneView
• API reference - View
• API reference - Map

var map = new Map({
  basemap: "topo"
});

var view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-100.33, 25.69],
  zoom: 10,
  ui: {
    components: ["attribution"] // empty the UI, except for attribution
  }
});

3. Create a React component

Create a React component with an initial state and predefined properties. For more information on this, see the React documentation. Next, bind the actions of the React component to the methods of the ZoomViewModel. It is also possible to bind the React component's style with the View's properties to determine the current min/max zoom level.

var Zoom = React.createClass({
  getInitialState: function() {
    return {
      vm: new ZoomViewModel(),
      maxZoomed: false,
      minZoomed: false
    };
  },
  getDefaultProps: function() {
    return {
      view: {}
    }
  },
  componentDidMount: function() {
    this.props.view.then(hitch(this, "onViewLoaded"));
  },
  onViewLoaded: function(view) {
    this.state.vm.view = view;
    watchUtils.init(view, 'zoom', hitch(this, "onZoomChange"));
  },
  onZoomChange: function(value) {
    this.setState({
      maxZoomed: value === view.constraints.maxZoom,
      minZoomed: value === view.constraints.minZoom
    });
  },
  zoomIn: function() {
    if (!this.state.maxZoomed) {
      this.state.vm.zoomIn();
    }
  },
  zoomOut: function() {
    if (!this.state.minZoomed) {
      this.state.vm.zoomOut();
    }
  },
  render: function() {
    var maxstate = this.state.maxZoomed ? 'button circle raised disable' : 'button circle raised';
    var minstate = this.state.minZoomed ? 'button circle raised disable' : 'button circle raised';
    return (
      <div className="zoom-btns">
        <div className={maxstate} onClick={this.zoomIn}>
        <div className="center"><i className="material-icons">add</i></div>
      </div>
      <div className={minstate} onClick={this.zoomOut}>
        <div className="center"><i className="material-icons">remove</i></div>
      </div>
      </div>
    );
  }
});

4. Render the React Component

Next, create a DOM element for the React component and add it to the UI layout. Once finished, render the React component.

var node = document.createElement("div");
view.ui.add(node, "bottom-left");
ReactDOM.render(<Zoom view={view}/>, node);