brandonstubbs / uix

Idiomatic ClojureScript interface to modern React.js

Idiomatic ClojureScript interface to modern React.js

API compatibility: React v17

UIx v1 is in roman01la/uix repo

Discuss at #uix on Clojurians Slack

Installation

yarn add react@17.0.2 react-dom@17.0.2

{:deps {com.pitch/uix.core {:mvn/version "0.3.0"}
        com.pitch/uix.dom {:mvn/version "0.3.0"}}}

Usage

(ns my.app
  (:require [uix.core :refer [defui $]]
            [uix.dom]))

(defui button [{:keys [on-click children]}]
  ($ :button.btn {:on-click on-click}
    children))

(defui app []
  (let [[state set-state!] (uix.core/use-state 0)]
    ($ :<>
      ($ button {:on-click #(set-state! dec)} "-")
      ($ :span state)]
      ($ button {:on-click #(set-state! inc)} "+"))))

(uix.dom/render ($ app) (js/document.getElementById "root"))

Docs

• What is UIx?
• Components
• Elements
• Hooks
• State
• Effects
• Interop with React
• Interop with Reagent
• Code-splitting and React.lazy
• Migrating from Reagent
• Server-side rendering
• Hot reloading
• React DevTools
• Hooks linter
• Utilities

Testing

scripts/test

Note: to ensure you're using the right Node.js version, you can use nvm and run nvm use once in the directory. Otherwise the Node.js version you use is in the .nvmrc file. See nvm repo for more documentation.

Thanks to

• UIx v1 for initial set of ideas and learnings
• Helix for even more ideas
• Pitch for sponsoring and dogfooding the work