reagent-project/reagent


A minimalistic ClojureScript interface to React.js

http://reagent-project.github.io/

License: MIT

Language: Clojure

Keywords: clojurescript, frontend, react, reagent


Reagent

A simple ClojureScript interface to React.

Reagent provides a way to write efficient React components using (almost) nothing but plain ClojureScript functions.

Prerequisites

Usage

To create a new Reagent project simply run:

lein new reagent myproject

If you wish to only create the assets for ClojureScript without a Clojure backend then do the following instead:

lein new reagent-frontend myproject

This will setup a new Reagent project with some reasonable defaults, see here for more details.

To use Reagent in an existing project you add this to your dependencies in project.clj:

Clojars Project
CircleCI

This is all you need to do if you want the standard version of React. If you want the version of React with addons, you'd use something like this instead:

[reagent "0.7.0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "15.4.2-2"]

If you want to use your own build of React (or React from a CDN), you have to use :exclusions variant of the dependency, and also provide a file named "cljsjs/react.cljs", containing just (ns cljsjs.react), in your project.

Examples

Reagent uses Hiccup-like markup instead of React's sort-of html. It looks like this:

(defn some-component []
  [:div
   [:h3 "I am a component!"]
   [:p.someclass
    "I have " [:strong "bold"]
    [:span {:style {:color "red"}} " and red"]
    " text."]])

Reagent extends standard Hiccup in one way: it is possible to "squeeze" elements together by using a > character.

[:div
  [:p
    [:b "Nested Element"]]]

can be written as:

[:div>p>b "Nested Element"]

Since version 0.8: The :class attribute also supports collections of classes, and nil values are removed:

[:div {:class ["a-class" (when active? "active") "b-class"]}]

You can use one component inside another:

(defn calling-component []
  [:div "Parent component"
   [some-component]])

And pass properties from one component to another:

(defn child [name]
  [:p "Hi, I am " name])

(defn childcaller []
  [child "Foo Bar"])

You mount the component into the DOM like this:

(defn mountit []
  (r/render [childcaller]
            (.-body js/document)))

assuming we have imported Reagent like this:

(ns example
  (:require [reagent.core :as r]))

State is handled using Reagent's version of atom, like this:

(defonce click-count (r/atom 0))

(defn state-ful-with-atom []
  [:div {:on-click #(swap! click-count inc)}
   "I have been clicked " @click-count " times."])

Any component that dereferences a reagent.core/atom will be automatically re-rendered.

If you want do some setting up when the component is first created, the component function can return a new function that will be called to do the actual rendering:

(defn timer-component []
  (let [seconds-elapsed (r/atom 0)]
    (fn []
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:div
       "Seconds Elapsed: " @seconds-elapsed])))

This way you can avoid using React's lifecycle callbacks like getInitialState and componentWillMount most of the time.

But you can still use them if you want to, either using reagent.core/create-class or by attaching meta-data to a component function:

(defonce my-html (r/atom ""))

(defn plain-component []
  [:p "My html is " @my-html])

(def component-with-callback
  (with-meta plain-component
    {:component-did-mount
     (fn [this]
       (reset! my-html (.-innerHTML (reagent/dom-node this))))}))

See the examples directory for more examples.

Performance

React is pretty darn fast, and so is Reagent. It should even be faster than plain old javascript React a lot of the time, since ClojureScript allows us to skip a lot of unnecessary rendering (through judicious use of React's shouldComponentUpdate).

The ClojureScript overhead is kept down, thanks to lots of caching.

Code size is a little bigger than React.js, but still quite small. The todomvc example clocks in at roughly 79K gzipped, using advanced compilation.

About

The idea and some of the code for making components atom-like comes from pump. The reactive-atom idea (and some code) comes from reflex.

The license is MIT.

Project Statistics

Sourcerank 12
Repository Size 2.72 MB
Stars 3,610
Forks 304
Watchers 134
Open issues 59
Dependencies 422
Contributors 39
Tags 29
Created
Last updated
Last pushed

Top Contributors See all

Dan Holmsand Juho Teperi Mike Thompson Dmitri Sotnikov Matthew Jaoudi Howard M. Lewis Ship Jonas Enlund Daniel Compton jmlsf Sean Corfield Ducky Yehonathan Sharvit Stephen Caraher alex argunov Julian Leviston Adrian Gruntkowski Jeaye Wilkerson Walton Hoops Abhishek Reddy Alan Thompson

Packages Referencing this Repo

org.clojars.jaen/reagent
A simple ClojureScript interface to React
Latest release 0.5.2-SNAPSHOT - Published - 3.61K stars
metosin.forks/reagent
A simple ClojureScript interface to React
Latest release 0.6.1-SNAPSHOT - Published - 3.61K stars
nextjournal/reagent
A simple ClojureScript interface to React
Latest release 0.7.0-SNAPSHOT - Published - 3.61K stars
reagent
A simple ClojureScript interface to React
Latest release 0.8.2-SNAPSHOT - Updated - 3.61K stars

Recent Tags See all

v0.8.1 May 15, 2018
v0.8.0 April 19, 2018
v0.8.0-rc1 April 11, 2018
v0.8.0-alpha2 October 20, 2017
0.8.0-alpha2 October 20, 2017
v0.8.0-alpha1 July 31, 2017
v0.7.0 June 27, 2017
v0.6.2 May 19, 2017
v0.6.1 March 10, 2017
v0.6.0 September 14, 2016
v0.6.0-rc June 09, 2016
v0.6.0-alpha December 21, 2015
v0.5.1 September 11, 2015
v0.5.1-rc3 September 07, 2015
v0.5.1-rc2 September 01, 2015

Interesting Forks See all

holmsand/reagent
A minimalistic ClojureScript interface to React.js
Clojure - Last pushed - 26 stars - 1 forks
Whoops/reagent
A minimalistic ClojureScript interface to React.js
Clojure - Last pushed - 7 stars - 1 forks
react-china/reagent
Chinese translation of Reagent
JavaScript - Last pushed - 2 stars
bhauman/reagent
A minimalistic ClojureScript interface to React.js
Clojure - Updated - 1 stars
Day8/reagent
A minimalistic ClojureScript interface to React.js
Clojure - Last pushed - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2018-07-20 01:44:38 UTC

Login to resync this repository