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 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").
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"
.
Other resources:
Copyright © 2020 Will Acton
Distributed under the EPL 2.0
Can you improve this documentation? These fine people already did:
Will Acton, Will, Zachary & Aaron IbaEdit on GitHub
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close