ClojureScript and Reagent
ClojureScript builds on the solid foundations of Clojure to make frontend web development straightforward and fun. Besides, functional concepts in CLJS are a very good match for React's vision of components and immutability.
If you want to use React as a view layer in ClojureScript, you will need either of two projects: OM and Reagent. While OM seems to be the better known of the two (among the others, used by CircleCI for their web-app), its API retains much of React's verbosity. For a more elaborate comparison, take a look here. All things considered, I like Reagent better and decided it warranted some experimentation time.
These days, Bootstrap components are the bread and butter of rapid web prototyping, and life's hard without them, even in Reagent. Unfortunately, while OM has its own library of components, no such convenience exists for Reagent.
On the other hand, we can easily wrap the react-bootstrap project and have access to all the goodies.
Using Bootstrap components
First, we add the CLJSJS dependency to the project. I'm using Leiningen, so it's just a matter of editing the
(defproject demo-proj "0.1.0" :dependencies [[org.clojure/clojure "1.6.0"] [org.clojure/clojurescript "0.0-3211"] [reagent "0.5.0"] [cljsjs/react-bootstrap "0.25.1-0"]] ...)
Going to the views files, we require the React Bootstrap namespace:
(ns demo-project.views (:require [reagent.core :as reagent] [cljsjs.react-bootstrap]))
We then use the magic
adapt-react-class method (reference) to convert a React component to a Reagent-flavoured one that can be used directly:
(def Button (reagent/adapt-react-class (aget js/ReactBootstrap "Button")))
Button component is now ready to use within the Hiccup templates:
[:div [:h2 "A sample title"] [Button "with a button"]]
We have seen how to take advantage of the vast amount of community-contributed React components and use them whithin a Reagent application without much effort.