Reagent is one of the more popular ClojureScript libraries for building React
apps. It gives you an easy way to define components, and some basic tools for
working with application state.
Using Reagent atoms and cursors directly is fine for simple apps, but as your
application gets more complex this can easily get messy. This is where re-frame
comes in, it’s designed to be functional, reactive, and fast, and it provides
structure to keep your code maintainable.
re-frame is both an architecture, a library implementing that architecture, and
an application template to easily get you started. As an example I’m going to
implement a level editor for the retro game “breakout”.
To get started I’ll generate an application skeleton using the re-frame
leiningen template. I’m passing some options to the generator here, one for CIDER
support, so I can launch Figwheel from Emacs, and one for Garden, because I like
to write my CSS in Clojure.
lein new re-frame breakout +cider +garden
The directory layout is fairly typical. Notice though that there are already a
handful of cljs files, each with a specific purpose.
~/breakout $ tree
│ └── public
│ └── index.html
│ └── breakout
│ ├── core.clj
│ └── css.clj
7 directories, 11 files