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]}] ;; takes a props map as an argument
  (d/div ;; Create DOM elements using `helix.dom`
    "Hello, " (d/strong name) "!"))

(defnc App []
  ;; use local state
  (let [[state set-state] (hooks/use-state {:name "Helix User"})]
    (d/div (d/h1 "Welcome!")

           ;; create elements out of components
           ($ Greeting {:name (:name state)
                        :on-name-change #(set-name assoc :name %)}))))

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

Installation

You'll want to make sure you have the latest version of react, and whatever renderer you are targeting (e.g. react-dom).

shadow-cljs and npm

npm i react react-dom

lein-cljsbuild / figwheel-main / raw CLJS

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

Documentation

• 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

Other resources:

• #helix Slack channel (Sign up for Slack here)
• Example TodoMVC
• Future looking example and discussion

Everything in the forward-looking example and discussion has been implemented except for annotating expressions with metadata like ^:memo and ^:callback.

License

Copyright © 2020 Will Acton

Distributed under the EPL 2.0