Step 01: displaying static content

Browse code - Diff - Live demo

To reset your workspace for this step, run git checkout step-1, then refresh your page.

---

In order to get familiar with Reagent syntax for representing views, let's add some static content to our page. The reagent-phonecat.core namespaces now looks like:

(def static-content "Some sample, statically defined DOM content."
  [:ul#phones-list
   [:li.phone-item
    [:span "Nexus S"]
    [:p "Fast just got faster with Nexus S"]]
   [:li {:class "phone-item"}
    [:span "Motorola XOOM™ with Wi-Fi"]
    [:p "The Next, Next Generation tablet."]]
   ])

(defn mount-root "Creates the application view and injects ('mounts') it into the root element."
  []
  (rg/render
    static-content
    (.getElementById js/document "app")))

(defn init! []
  (mount-root))

If you've ever used Hiccup for server-side HTML templating, this is very similar; if not, take some time to analyze the syntax.

• HTML elements are represented with vectors which first element is a keyword.
• HTML attributes can be defined in a map as second element of the vector
• For id and class attributes, there is also a shortcut notation in the keyword element.

This is all nice, but if we're only going to display some static content, there's no point making a Single Page Application - we could just have rendered the HTML on the server side. SPAs are only relevant when the client knows about your information model, and generate views from the data - which we'll see in the next step.

Summary

We've learned the basics of 'DOM templating' in Reagent:

• DOM Nodes are represented Clojure data structures : vectors for elements, keywords for tag names, maps for attributes list
• reagent.core/render mounts the declared view into the DOM.

We now know how to write our UI, in the next step we'll learn how to factor it into components.