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
Top comments (0)