Review Reagent Projectλ︎
Lets look at the major parts of the code we have been given when we created the project from the
Project Configuration - dependencies & pluginsλ︎
Clojure, ClojureScript and reagent are the important dependencies in this project. The
core.async library is often used to avoid using callbacks in react-style applications, but we do not use
core.async in this example.
lein-figwheel plugin provides all the nice features of figwheel, especially live reloading of code changes into the browser.
The web page is a very simple html page containing a
<div> element with an id of
app. When we look at the react
render in the ClojureScript code, we see that this id is used as a placeholder for our ClojureScript application.
Include the reagent implementation of atom into the namespace.
The reagent atom is the same as the clojure atom in that it is a mutable container that manages state changes through software transactional memory.
The reagent atom (sometimes referred to as ratom) allows reagent to watch changes in the application state and update reagent components are affected by the state change.
enable-console-print! sets print-fn to console.log, which makes logging to a browser’s console very simple.
A common approach for react style applications is to define a name called
app-state that uses an atom.
defonce is used over
def so that the
app-state is not reset each time you save a change in the ClojureScript file.
The figwheel reagent project provides an example component called
Components in reagent are simply Clojure functions.
Components are displayed in your application using the reagent
render function takes one or more components as an argument as well as a place on the page to render those components.
You can force an update each time you save a change to the ClojureScript source code. For example, the commented out
swap function would increment a counter in the
Hint:: Print board game state on every changeλ︎
on-js-reloadfunction can be used to print out the board game every time a change is made.