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

6. Building a React app with ClojureScript

Published 02 June 16

React.js is the new hotness in the land of user interfaces. It’s descriptive approach pairs wonderfully with ClojureScript’s functional underpinnings.

This episode will show how to build an app with React, all from comfortable ClojureScript. It provides a solid foundation for diving into React wrappers like Reagent or Om later on, and it’s a welcome exercise in using ClojureScript’s interop features.

We’ll cover: elements, components, the virtual DOM, using an atom to keep application state, and attaching event handlers with component properties.

Show notes

Using React from ClojureScript

To introduce you to React, we’ll build a calculator app, this is what the result will look like.

Facebook released React onto the world three years ago, and it’s taken the world by storm. It lets you build user interfaces based on components and uni-directional data-flow.

Several ClojureScript libraries use React under the hood, notably Om and Reagent, each adding quite a bit of functionality of their own.

The React API is very small. By introducing React on its own, it will be easier to understand the unique value proposition of the various ClojureScript wrappers.

I’m basing this project on the Chestnut template. Pass in --vanilla to start without a wrapper library.

$ lein new chestnut calculator --template-version 0.14.0 -- --vanilla
Generating fresh Chestnut project. contains instructions to get you started.

Code for this episode



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 calculator --template-version 0.14.0 -- --vanilla


I cover React.js before going into Reagent or Om, because I found it tremendously helpful to understand React first. I remember reading the Om documentation multiple times over. It wouldn’t click until I had gone off and understood React on its own.