Using third-party JS

As we mentioned earlier, we can't simply mix React and standard JS libraries and expect the DOM to stay relatively consistent, however there are some situations where mixing the two is a requirement. We'll discuss how to do that now.

Let's say we'd like to insert a map into our application using Leaflet.js ( http://leafletjs.com/). Leaflet is a popular open source JS library for displaying OpenStreetMap data.

Leaflet's API expects to be given a JS element to render into, which is a relatively common pattern in JS libraries:

(defn leaflet-map [app owner] 
  (reify 
    om/IInitState  
    (init-state [_] 
      {:the-map nil})  
    om/IDidMount (did-mount [_] 
      (let [the-map (js/L.map "map")] 
        (om/set-state! owner :the-map the-map)))  
    om/IRender (render [this] 
      (dom/div {:id "map"} nil)) ``` 

Here, in render, we create an empty div with the ID map. During IDidMount, after the div is rendered into...