Nov 16 2021 Reagent Test 001

  • Get the starter notebook Reagent code to display (render) as desired

  • Create a component from the Reagent docs and render it correctly

  • Continue building the rest of the Reagent docs, while documenting micro-skills

{:deps {org.clojure/clojure {:mvn/version "1.10.3"}
        ;; complient is used for autocompletion
        ;; add your libs here (and restart the runtime to pick up changes)
        compliment/compliment {:mvn/version "0.3.9"}}}
Extensible Data Notation
{:hello (clojure-version)}
0.1s

In order to add a ClojureScript cell in Nextjournal, follow these steps:

  • Create a new paragraph block (regular text)

  • Type three back-ticks followed by "cljs" without the quotes (it will look like ```cljs)

  • Tap the space key

(def turtles (atom []))
^{:nextjournal/viewer :reagent}
#(into [:div] (map (fn [s] [:span {:style {:font-size s}} "🐢"])) @turtles)
(dotimes [_ 10]
  (swap! turtles conj (/ (or (last @turtles) 130) 1.2)))

Cool... So have some turtles now 😉🐢

Let's see if we can follow along with the Reagent docs here: https://reagent-project.github.io/

We start with a simple component that has a div, a couple paragraph elements, a span, one CSS style, and no component arguments / parameters.

Skills:

  • Create a component that takes no parameters

  • Create a component that has multiple elements nested inside another element

  • Add a style to an element in a component

  • Successfully render a component in a Nextjournal coding notebook

Questions:

  • Is a pure component in Reagent also called a "stateless functional component" ? What are the precise criteria for qualifying as a pure component? For a stateless functional component?

  • What are the main types of components one can build in Reagent, and what are their names in simple language?

;; (an exmple way to) how to define a zero argument Reagent component
(defn simple-component []
  [:div
   [:p "I am a component!"]
   [:p.someclass
    "I have " [:strong "bold "]
    [:span {:style {:color "red"}} "and red "] "text."]])
;; how to render a Reagent component in Nextjournal
^{:nextjournal/viewer :reagent}
[simple-component]

Sweet :)

Now I would like to make a simpler timer. Here is some inspiration: https://thebhwgroup.com/blog/2015/03/website-dev-clojure-reagent

Reagent is able to use the setTimeout event instead of setInterval because our Reagent component returns a function for rendering instead of the actual rendered result. Each time the component is rendered in Reagent we set a new timer.

  • What is the difference between the `setTimeout` event and `setInterval`?

  • Is `setInterval` an event or a function?

(defn simple-timer []
  (let [current-time (atom (js/Date.))]
    (fn [] (js/setTimeout #(reset! current-time (js/Date.)) 1000)
      (let [time-str (-> @current-time .toTimeString (clojure.string/split " ") first)]
        [:div
         [:h3.time-title "The current time is:"]
         [:p.time time-str]]))))
^{:nextjournal/viewer :reagent}
[simple-timer]
Runtimes (2)