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"))
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").
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.
See React Native.
Use CLJSJS or package
react yourself using webpack, ensuring it is provided as the name "react"
.
- Why Helix
- Creating Components
- Creating elements
- Hooks
- Experiments
- Pro-tips
- Frequently Asked Questions
- React Native
Other resources:
Copyright © 2020 Will Acton
Distributed under the EPL 2.0