Reagent 101 / Hiccup vs. JSX

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.

fragment

;; Hiccup
[:<>
  [:p "Hello"]
  [:p "Bonjour"]]

// JSX
<>
  <p>Hello</p>
  <p>Bonjour</p>
</>

if-else rendering

;; Hiccup
(defn home [{:keys [authenticated?]}]
  [:div.page
   (if authenticated?
    [profile]
    [signin])])

// JSX
const Home = ({isAuthenticated}) => {
  return (
    <div className="page">
      {isAuthenticated ? <Profile /> : <Signin />}
    </div>
  );
}

if rendering

;; Hiccup
(defn foo [{:keys [child?]}]
  [:div
    "Parent"
    (when child? [:div "Child"])])

// JSX
const Foo = ({ child }) => {
  return (
    <div>
      Parent
      {child && <div>Child</div>}
    </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.

Warmly,
DH