This sample shows how to use React with ViewModels to create a custom widget experience. Specifically, 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.
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:
var map = newMap({
basemap: "topo-vector"});
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.