EsriJS with ReactJS
Rene Rubalcava | February 8, 2015
But what about Dojo?
React is not an MVC framework. React is closer to the V in MVC on steroids. For example, it's been pretty popular in replacing views in Backbone. So why can't we do the same with Dojo? If you are using EsriJS to build your mapping applications, you are probably used to using the Dijit library to build out widgets. This works great and is battle-tested. But what if you wanted to stick some React in there to replace that Dijit layer of your application? That's not difficult to do.
Before we dive in, let's talk a little about how React is typically used in application development. From what I have seen other developers do and how I have followed in my development is that React is used to build many simple components that can be composed together to build an interactive user interface. Think of something like iTunes with it's many rows of songs grouped by artists/albums. Each of those pieces could be a React component. It's a good methodology to follow whether you are using React or Dijit.
Show me the goods
This is the sample I put together. The repo for this sample can be seen here. This sample will simply display the xy coordinates of the mouse as you move it around the map. [caption id="attachment_775" align="aligncenter" width="694"] Image of sample application[/caption]
I'm going to skip over the basics of the app in setting up the EsriJS stuff and go right to the React.
This is a simple container I'll use to add DOM element to the page that will hold the widget. This is just a preference of mine, but I find it helps to keep things a little more organized for me.
You may notice there is no Dojo or EsriJS stuff brought into this widget. The only thing non-React in here is the map that was passed as part of the properties to the widget. You can listen for the mouse-move event of the map and update the xy of the state of the widget. State is pretty important in React. Using the setState method will update the coordinates and rerender the component with the new state. I won't get into details on the differences between state and props in React, but you can think of props as configuration for the component and state as the data that may change. Here is a good writeup on the subject.
Don't be afraid to mix and match your libraries if you want to. I may espouse pure Dojo development when working with EsriJS, but that doesn't mean you shouldn't mix things up once in a while. Hack away and enjoy!
Note - I did a follow up to this post on GeoNet with a more involved sample.