Cover image for Reagent 101 / Hiccup vs. JSX

Reagent 101 / Hiccup vs. JSX

icncsx profile image DH Kim ・1 min read

Hiccup is a Clojure library that enables us to represent HTML using Clojure vectors. In HTML and JSX, you have tags <>. In Clojure, you have vectors [].

Herein, I will lay them side by side, to show how Hiccup coupled with Reagent (a Clojure interface for React) can emulate common patterns found in React.


;; Hiccup
  [:p "Hello"]
  [:p "Bonjour"]]
// JSX

if-else rendering

;; Hiccup
(defn home [{:keys [authenticated?]}]
   (if authenticated?
// JSX
const Home = ({isAuthenticated}) => {
  return (
    <div className="page">
      {isAuthenticated ? <Profile /> : <Signin />}

if rendering

;; Hiccup
(defn foo [{:keys [child?]}]
    (when child? [:div "Child"])])
// JSX
const Foo = ({ child }) => {
  return (
      {child && <div>Child</div>}

conditional styling

;; Hiccup
(defn button [{:keys [active?]}]
  [:button {:class [(when active? "a-class")]}])
// JSX
const Button = ({active}) => {
  return <button className={active ? 'a-class' : null}

So what do you think? Not exactly a 1-1 mapping, but it's pretty similar, right? If you have some React experience under your belt, and you want to try out Reagent, I totally recommend it. You won't have a hard time, and this is partially owing to Hiccup's readability and expressiveness.


Posted on by:

icncsx profile

DH Kim


Software engineer interested in cloud computing and serverless backend services.


markdown guide