O'Reilly logo

Etudes for ClojureScript by J. David Eisenberg

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 the data in an ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required