zhuangxm/helix

A simple, easy to use library for React development in ClojureScript.

Helix

ClojureScript optimized for modern React development.

(ns my-app.core
  (:require [helix.core :refer [defnc $]]
            [helix.hooks :as hooks]
            [helix.dom :as d]
            ["react-dom" :as rdom]))

;; define components using the `defnc` macro
(defnc greeting
  "A component which greets a user."
  [{:keys [name]}]
  ;; use helix.dom to create DOM elements
  (d/div "Hello, " (d/strong name) "!"))

(defnc app []
  (let [[state set-state] (hooks/use-state {:name "Helix User"})]
    (d/div
     (d/h1 "Welcome!")
      ;; create elements out of components
      ($ greeting {:name (:name state)})
      (d/input {:value (:name state)
                :on-change #(set-state assoc :name (.. % -target -value))}))))

;; start your app with your favorite React renderer
(rdom/render ($ app) (js/document.getElementById "app"))

Installation

Install the latest version from clojars in your project.

A version of "react" and "react-refresh" should be installed automatically; install the corresponding version of your favorite renderer (e.g. "react-dom").

shadow-cljs and npm

During development, you'll want to emit ES6 code until polyfills are handled differently. You can do this by passing in a dev compiler configuration:

;; shadow-cljs.edn
{,,,
 :builds 
 {:app
 {,,,
  :dev {:compiler-options {:output-feature-set :es6}}}}}

Release builds should be able to emit all the way back to ES3.

shadow-cljs and react-native

See React Native.

lein-cljsbuild / figwheel-main / raw CLJS

Use CLJSJS or package react yourself using webpack, ensuring it is provided as the name "react".

Documentation

View formatted docs at

• Why Helix
• Creating Components
  • Props
  • Interop
  • Higher-order Components
  • Class Components (WIP)
• Creating elements
  • $ macro
    • Native elements and props
    • Dynamic props
  • helix.dom
  • Other helpful tools
    • Fragments
    • Context providers
    • Suspense boundaries
    • Creating elements dynamically
    • Factory functions
• Hooks
  • Maintaining state
    • Reducers
    • Refs
  • Doing side effects
  • Optimizations
  • Other miscellaneous
• Experiments
  • Define as factory function
  • Detect invalid hooks usage
  • Fast Refresh
• Pro-tips
  • Memoizing components
  • Don't use deep equals
  • Create a custom macro
• Frequently Asked Questions
  • What about hx?
  • What about hiccup?
• React Native

Other resources:

• #helix Slack channel (Sign up for Slack here)
• Example TodoMVC

License

Copyright © 2020 Will Acton

Distributed under the EPL 2.0