Lambda Island

Subscribe to gain access to this episode

Subscribe Login

or try out one of our freebies instead.

11. Reagent, part 3: Keys & Lifecycle Methods

One of the more popular wrapper libraries for using React with ClojureScript is Reagent. We’ll build a kanban style board to demonstrate the main features.

Transcript

We already learned the basics of React in Episode 6. If you’re new to React I would suggest you check that out. In this episode we’ll work with a ClojureScript wrapper library called Reagent to build a kanban-style board with cards and columns.

Start with a new Chestnut app, this time with the --reagent option. Chestnut combines a minimal setup with all tooling and setup to work comfortably.

$ lein new chestnut kanban --template-version 0.14.0 -- --reagent

One of the libraries used by this template is no longer compatible with the latest versions of Java. To fix that, add these dependencies in project.clj.

(defproject kanban "0.1.0-SNAPSHOT"
  :dependencies [,,,
                 [org.clojure/core.rrb-vector "0.0.14"]
                 [javax.xml.bind/jaxb-api "2.2.4"]
                 ,,,
                 ]
  ,,,)

Now start Figwheel, either from a terminal with lein figwheel, or if you’re using an nREPL based system like CIDER you can call Chestnut’s (run) from your REPL.

lein figwheel

Show Notes

browse source code

Caution

The Chestnut application template has changed since this episode was written. To follow along you are best to stick to version 0.14.0, which you can do like this.

$ lein new chestnut kanban --template-version 0.14.0 -- --reagent

This unfortunately pulls in a version of rrb-vector which is not compatible with newer versions of Java. To fix that, add this to the :dependencies in project.clj:

[org.clojure/core.rrb-vector "0.0.14"]
[javax.xml.bind/jaxb-api "2.2.4"]

result:

(defproject kanban "0.1.0-SNAPSHOT"
  :dependencies [,,,
                 [org.clojure/core.rrb-vector "0.0.14"]
                 [javax.xml.bind/jaxb-api "2.2.4"]
                 ,,,
                 ]
  ,,,)

Resources

Reagent

Code

styles.css

.card {
    background-color:  #fafafa;
    border-radius: 0.2em;
    padding: 0.5em;
    margin: 0.5em;
}

.card.editing {
    padding: 0;
}

.card.editing input {
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
}

.column, .new-column {
    width: 200px;
    float: left;
    padding: 0.1em 0.5em;
    border-radius: 0.2em;
    background-color:  #cccccc;
    margin: 0.5em;
}

.new-card, .new-column {
    padding: 0.5em;
    background-color:  #aaaaaa;
    border: 1px solid #cccccc;
    border-radius: 0.2em;
    margin: 0.5em;
}

core.cljs

(ns kanban.core
  (:require [reagent.core :as r]))

(enable-console-print!)

(def app-state
  (r/atom {:columns [{:title "Todos"
                      :cards [{:title "Learn about Reagent"}
                              {:title "Tell my friends about Lambda Island"}]}
                     {:title "Awesomize"
                      :editing true
                      :cards [{:title "Meditate"}
                              {:title "Work out"
                               :editing true}]}]}))

(defn Card [card]
  (if (:editing card)
    [:div.card.editing [:input {:type "text" :value (:title card)}]]
    [:div.card (:title card)]))

(defn NewCard []
  [:div.new-card
   "+ add new card"])

(defn Column [{:keys [title cards editing]}]
  [:div.column
   (if editing
     [:input {:type "text" :value title}]
     [:h2 title])
   (for [c cards]
     [Card c])
   [NewCard]])

(defn NewColumn []
  [:div.new-column
   "+ add new column"])

(defn Board [state]
  [:div.board
   (for [c (:columns @state)]
     [Column c])
   [NewColumn]])

(r/render [Board app-state] (js/document.getElementById "app"))

Reagent, part 1