Idiomatic ClojureScript interface to modern React.js

“UIx eliminates the learning curve for React developers new to ClojureScript, allowing them to write familiar patterns seamlessly.” – Misha Karpenko, Pitch

“UIx allows us to leverage the modern React ecosystem to efficiently build ClojureScript apps.” – Juho Teperi, Metosin

“UIx offers a seamless React integration, making code more efficient with powerful component composition, hooks, and customizable linting for enforcing best practices.” – Chris Etheridge, Cognician

• API compatibility: React v19.0.0
• 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 react@19.0.0 react-dom@19.0.0 --save-dev

{:deps {com.pitch/uix.core {:mvn/version "1.4.0"}
        com.pitch/uix.dom {:mvn/version "1.4.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
• Template project of a web app hosted on Cloudflare with REST API served from SQLite roman01la/uix-cloudflare-template

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
• Testing
  • End to end testing
  • Component testing
  • Hooks testing
• Utilities
• Examples
• Internals
• Other render targets
  • React Native
  • React Three Fiber
• Getting help from ChatGPT

Recommended libraries

• Routing
  • reitit, example
  • TanStack Router
• Global state management
  • re-frame, example
  • refx, example
  • si-frame, examples
• Data validation
  • clojure.spec (supported by compile-time props validation)
  • malli
• Data fetching (unless using routing library with built-in data fetching)
  • TanStack Query v4, (v5 doesn't work with Closure Compiler)
  • SWR
• Async code
  • shadow.cljs.modern/js-await
  • promesa
• UI component libraries
  • shadcn/ui
  • daisyUI
  • Material UI
• Styling
  • Tailwind CSS
• Icons
  • Heroicons
  • Font Awesome
• Forms
  • React Hook Form
  • Formik
• Internationalization
  • react-i18next

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