Step 00: basic app setup

Browse code - Live demo

---

Launching the development environment

We'll begin this first step by barely using Reagent at all.

Run this command:

git checkout step-0

Now to start a local server, run:

lein figwheel

This uses the Figwheel Leiningen plugin to start a build process that:

• compiles your ClojureScript files into JavaScript output,
• starts a local Clojure web server to serve the appropriate files,
• watch your source files for changes,
• and start a ClojureScript REPL.

If everything went well, you can now navigate to http://localhost:3449/index.html to see the running application. You should see a white page with a minimalistic "Nothing here yet!" message on it.

Now go back to your terminal, where you should now see a ClojureScript REPL prompt:

cljs.user=>

Let's try and use the ClojureScript REPL to print a message in the browser console. Type in:

(println "Can you read me?")

Now go back to your browser tab, and open the browser console. You should your message as a log in the console.

Source code overview

In order to provide you with a productive development environment, this initial project setup is quite big, and you're not at all expected to understand all of it. Let's do a quick tour of the parts that are most relevant to you:

• project.clj : this file centralizes the project configuration, including dependencies, environment, profiles, build, etc. In this tutorial, we're only interested in the dependencies. You can see the :dependencies clause declares dependencies to the Clojure language, a handful of Clojure libraries to set up the web server, and some client-side dependencies (the React Javascript library and Reagent, which is a ClojureScript library).
• resources/public/index.html : This is the (single) HTML page which will be loaded for our application. Because all the views of our app will be built by dynamically manipulating the DOM from JavaScript, this page does nothing but loading scripts and stylesheets.
• src/cljs/reagent_phonecat/core.cljs : this is our ClojureScript source code, and this is where we'll be coding for the rest of this tutorial. Let's walk through it in more details.

At the end of core.cljs, you can see an init! function definition:

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

This is the main entry point to our application: it gets called once our compiled ClojureScript is loaded. As we can see, it calls a mount-root function:

(defn mount-root "Creates the application view and injects ('mounts') it into the root element." 
  []
  (rg/render 
    [:p "Nothing here " (str "yet" "!")]
    (.getElementById js/document "app")))

This function uses reagent.core/render to insert our dynamically generated views into the DOM after the page has loaded. The [:p {some content}] expression is Reagent for "Create a <p> DOM element with {some content} in it."

Also, there is a say-hello that plays no role in what we see on the page:

(defn say-hello! "Greets `name`, or the world if no name specified.
Try and call this function from the ClojureScript REPL."
  [& [name]]
  (print "Hello," (or name "World") "!"))

I put it here so that you could experiment interacting with our namespace from the REPL. Go to your REPL prompt (in your terminal) and enter these forms:

(in-ns 'reagent-phonecat.core)
(say-hello!)

You should see the message displayed in you browser console, which means you can interact with your application while it's running.

---

Now that we're set up, let's move to step 1.