Chapter 5. Programming with React

Facebook®’s React JavaScript library is designed to make user interfaces easier to build and manage. React builds a virtual DOM to keep track of and render only the elements that change during user interaction. (As noted in Chapter 2, this is what all the Cool Kids™ are using.)

In this chapter, you will write études that use different ClojureScript libraries that interface with React. This blog post gives you a comparison of the libraries. The two we will use are Quiescent and Reagent.

These études will implement the same web page: a page that displays an image and lets you adjust its width, height, and (via CSS) its border width and style (Figure 5-1). In both libraries, you will build components, which are functions that, as the Quiescent documentation puts it, tell “how a particular piece of data should be rendered to the DOM.” Since they are functions, they can use all of ClojureScript’s computational power.

Screenshot showing user interface and image
Figure 5-1. Screenshot of image resize web page

The HTML for the page will include a <div id="interface">, which is where the components will go.

Both versions of this étude will declare an atom (with a slight variation for Reagant) to hold the state of the application in a map. Let’s do a quick review of atoms by defining an atom with a single value:

(def quantity (atom 32))
cljs.user=> #<Atom:32>

To access ...

Get Etudes for ClojureScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.