Hiccup and Reagent
in Real Life
clj-syd May 28th
Bryan Maass - Fetchh.io - Bryan@fetchh.io
Hiccup
Hiccup is a library for representing HTML in Clojure. It uses vectors to represent elements, and maps to represent an element's attributes.
Hiccup Example 1
[:h2 "Hello"]
(html [:h2 "Hello"])
;;=> "<h2>Hello</h2>"
Hiccup Example 2 - classes
[:h2 {:class "myclass"} "Hello"]
[:h2.myclass "Hello"]
(html [:h2 {:class "myclass"} "Hello"])
;;=> "<h2 class=\"myclass\">Hello</h2>"
(html [:h2.myclass "Hello"])
;;=> "<h2 class=\"myclass\">Hello</h2>"Hiccup Example 3 - id, please
[:h2#please "Hello"]
[:h2 {:id "please"} "Hello"]
(html [:h2#please "Hello"])
;;=> "<h2 id=\"please\">Hello</h2>"Hiccup Example 4 - id and classes
[:div#foo.bar.baz "bang"](html [:div#foo.bar.baz "bang"])
;;=> "<div id=\"foo\" class=\"bar baz\">bang</div>"Hiccup Example 5 - Styles
[:div {:style "color:red"} "blood"](html [:div {:style "color:red"} "blood"])
;;=> "<div style=\"color:red\">blood</div>"Hiccup Example 6 - mapping
[:ul
(map (fn [x] [:li x])
(range 5))]
;;=> [:ul ([:li 0] [:li 1] [:li 2] [:li 3] [:li 4])]
;; and then:
(html [:ul ([:li 0] [:li 1] [:li 2] [:li 3] [:li 4])]);;=>"<ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li></ul>"Hiccup Example 6
(require '[hiccup.page :as page])
(defn page-with-bootstrap [content]
(page/html5
(page/include-css
"//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css")
(page/include-js
"//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js")
content))Including js/css:
Live
Coding
Hiccup
Reagent
It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
Live
Coding
Reagent
Thanks!
That was Hiccup + Reagent
deck
By escherize
deck
- 526
