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 verion 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
- Creating elements
- Hooks
- Experiments
- Pro-tips
- Frequently Asked Questions
- React Native
Other resources:
License
Copyright © 2020 Will Acton
Distributed under the EPL 2.0