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

41. Using React Components with Reagent

Published 23 May 18

React’s component based approach means you don’t have to reinvent the wheel, there are literally thousands of building blocks freely available.

When using React components from Reagent there are a few things to watch out for, this episode will show you how to use some popular React components from Reagent, and point out useful constructs and patterns.

You’ll also get to see some of the new cljs.main feature that landed in ClojureScript 1.10.

Show notes

One of the great things about React is the large amount of ready made components for you to pick from, but when using these components with Reagent and ClojureScript there are a few things to watch out for. This episode will walk you through a few practical examples, using popular open source React components.

You’ll also get a demonstration of the cljs.main functionality that came out in ClojureScript 1.10.

This episode will make use of the Clojure CLI tools that came out with Clojure 1.9. For Linux and OS X you can follow the Clojure Getting Started guide, you’ll find the link in the show notes.

$ clj --help

Usage: clojure [dep-opt*] [init-opt*] [main-opt] [arg*]
       clj     [dep-opt*] [init-opt*] [main-opt] [arg*]

The clojure script is a runner for Clojure. clj is a wrapper
for interactive repl use. These scripts ultimately construct and
invoke a command-line of the form:

java [java-opt*] -cp classpath clojure.main [init-opt*] [main-opt] [arg*]

The Clojure CLI tools are not yet available for Windows, but the ClojureScript Quick-Start Guide has instructions on how to run cljs.main directly from the ClojureScript release JAR.

What I love about this new generation of tooling is that you need so little to get started. You don’t need to generate dozens of files, just a deps.edn with a few dependencies and you’re off to the races.

You’ll need Clojure and ClojureScript of course, as well as Reagent, since that’s what this episode is all about.

browse source code

Cheat sheet

  • reagent.core/adapt-react-class
  • [:> foo]
  • reagent.core/create-element
  • reagent.core/as-element
  • reagent.core/reactify-component