Idiomatic ClojureScript interface to modern React.js

"Oh god, I just started learning reagent. Don’t tell me I’ll have to switch" /r/clojure

• API compatibility: React v18.3.1
• Discuss at #uix on Clojurians Slack
• Try it out in the playground
• A slide deck explaining UIx and migration path from Reagent
• Talk about UIx at London Clojurians meetup
• "The State of Frontend" by Alexander Davis
• ClojureStream podcast: E94 UIx with Roman Liutikov

Installation

npm install [email protected] [email protected] --save-dev

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

How to start a new project with UIx

• Run npx create-uix-app@latest my-app to scaffold a new project
• Clone starter template manually from pitch-io/uix-starter
• Use fullstack starter project from Metosin metosin/example-project

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)} "+"))))

(defonce root
  (uix.dom/create-root (js/document.getElementById "root")))

(uix.dom/render-root ($ app) root)

Docs

• What is UIx?
• Components
• Elements
• Hooks
• State
• Effects
• Props validation
  • Compile-time props validation
• Interop with React
• Interop with Reagent
• Code-splitting and React.lazy
• Migrating from Reagent
• Server-side rendering
• Hot reloading
• React DevTools
• Code linting
• Differences from Reagent
• Utilities
• Examples
• Internals
• Other render targets
  • React Native
  • React Three Fiber
• Getting help from ChatGPT

Who's using UIx?

• Pitch
• Pitch iOS app
• Cognician
• Multiply
• Totcal
• ClojureScript Studio
• Ogres, virtual tabletop
• ShipClojure
• Metosin

Contributing

There are several ways how you can contribute to the project:

• Improve documentation: cover missing pieces, add code examples
• Add, improve docstrings
• Propose and implement improvements and new features
• File and fix bugs
• Increase test coverage

Support

You can support this project via Github Sponsors or Buy Me a Coffee.

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 initial development and dogfooding the work