EsriJS with ReactJS

I really enjoy experimenting with frameworks and libraries. Even back when I was doing ActionScript dev, I was a big fan of Swiz and Robotlegs. When it comes to JavaScript frameworks, I try to give each one a shot, from Backbone to Knockout and Angular. One library I have really grown to enjoy has been React. React is the hotness these days. One of the reasons is it’s use of the Virtual DOM which should not be confused with Shadow DOM. Basically because of the way React does redraws, it’s fast. It may not be the fastest, but it has a very active community.

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]

You may notice some oddness in a couple of the files in the repo where I’m mixing HTML with my JavaScript. That’s JSX. JSX is totally optional when working with React, but it’s nice to use so you can easily see the structure of your component.

I’m going to skip over the basics of the app in setting up the EsriJS stuff and go right to the React.

gist

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.

gist

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.

That’s it

Integrating React with Dojo isn’t very difficult at all. This widget works great and can be incorporated just about anywhere I may want that functionality. To use this sample you will need to use gulp as the build tool to convert the JSX into plain JavaScript and bower is used to add React to the application.

I would highly suggest you read through some of the React docs and the videos from the recent ReactConf when you have the chance.

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.