This episode is for subscribers only. Sign Up or Log in to watch it.

9. Reagent

Published 27 June 16

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.

Show notes

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 -- --reagent

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
M-x cider-jack-in
user> (run)

browse source code

Resources

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