Build the UI with Reagent

Web Development with Clojure, Third Edition — by Dmitri Sotnikov, Scot Brown (28 / 107)

👈 Add ClojureScript Support | TOC | Managing State with Re-Frame 👉

Reagent is more opinionated than React regarding component life cycle. While React is agnostic about the strategy used to trigger component updates; Reagent makes this decision for us. Reagent uses a data-driven approach where components observe the state of reactive atoms. Components just specify the state they’re concerned with, and Reagent handles the life cycle for us. As a result, we typically only need to implement the render functions of our components.

Before we can build our UI, we need to add the Reagent dependency to our project:

​ :dependencies
​ [...
​  [reagent ​"1.0.0"​]]

Since our dependencies have changed, we also need to restart cljsbuild.

​ ​...​
​ Successfully compiled "target/cljsbuild/public/js/app.js" in ... seconds.
​ ^C
​ ​$ ​​lein​​ ​​cljsbuild​​ ​​auto​
​ Watching for changes before compiling ClojureScript...
​ ​...​

To use Reagent, we have to require it in our namespace just like in Clojure. Let’s open up the guestbook.core ClojureScript namespace. Recall that it’s found in the src/cljs source folder and not the src folder that contains the Clojure source files. Update the namespace declaration to include the following require form: