Reagent project
Adding reagent to the project is a common way to create react.js style applications, usually to create a Single Page App (SPA). Rum and Om-next are other libraries that are used for the same type of app.
The figwheel-main template takes several options, one of which defines if react, rum or om is added to a project.
{% tabs deps="Clojure CLI project", lein="Leiningen project" %}
{% content "deps" %}
Create a Clojure CLI tools deps.edn project using the :project/new alias from practicalli/clojure-deps-edn configuration, including the --reagent template option which adds a common library for reactive web page development
Run this command in a terminal window
The older form of the command to create a project is
clojure -M:project/new figwheel-main practicalli/landing-page -- --reagent
The command will create a new directory with the project name and include the reagent library and sample code to form a simple react-style application.
{% content "lein" %}
Create a Leiningen project.clj project using the following command, including --reagent which is a common library for reactive web page development
{% endtabs %}
Run a ClojureScript projectλ︎
Run the ClojureScript project from the command line initially to ensure that everything is working.
The project will start a REPL and figwheel-main will launch a connected browser REPL in the default web browser.
In the terminal window used to create the project, change into the project directory
{% tabs depsrepl="Clojure CLI project", leinrepl="Leiningen project" %}
{% content "depsrepl" %}
Use the Clojure CLI tools to run the project using the :fig alias and the :build build task.
Also use :repl/rebel alias from practicalli/clojure-deps-edn to run the ClojureScript REPL with rebel readline for a richer REPL experience. Using the :repl/rebel alias before :fig adds the rebel-readline library dependency
{% content "leinrepl" %}
Use Leiningen to run the ClojureScript project using the :fig alias and the :build build task.
{% endtabs %}
A window or tab should automatically open once the project starts. This takes a few moments, so take a few deep breaths.
Check the browser connectionλ︎
Check the browser REPL is connected by evaluating a ClojureScript expression in the ClojureScript REPL.
First create a simple altert in the browser window using JavaScript interoperability
In the terminal at the ClojureScript REPL prompt, swap in a new value into app-state
Another interesting test is to update the live state of the application. The web page title is generated from the project state, held in an atom called app-state. If the value held by app-state is updated, then the page should automatically update.
In the terminal at the ClojureScript REPL prompt, require the practicalli.landing-page namespace to load the ClojureScript code. Then switch in to the practicalli.landing-page namespace and finally swap a new value into the app-state
(require 'practicalli.landing-page)
(in-ns 'practicalli.landing-page)
(swap! app-state assoc :text "Hello from the REPL")
As soon as the swap! expression is evaluated, the web page for the project is automatically updated.
Add the swap! expression as a rich comment block to the src/practicalli/landing_page.cljs source code file.