WARNING: This won't be easy, you are about to marry together two separate realms.
You want to start gradually using ClojureScript/Reagent in an existing JavaScript/React project.
- How to export ClojureScript into JavaScript
- How to share common dependencies (React, etc.) between ClojureScript/Reagent and JavaScript/React code
- How to enable hot-reloading for ClojureScript code
- Bootstrap ClojureScript project and write your Reagent component
- Use
reagent.core/reactify-component
to adapt Reagent component for usage with JS/React - Use
^:export
meta on component's function to export it into a global scope (window
object) - Put
<script>
tag referring ClojureScript output bundle into your HTML before JS project's script - Use Reagent components in your JS project
- In your JS project create a module that imports shared dependencies and exports them into global scope (
window
object) - Configure two builds (here using Webpack)
- With an entry point with shared dependencies
- With application entry point and shared dependencies configured as externals
- Put
<script>
tag referring shared deps bundle into your HTML before ClojureScript project's script
- Exclude
cljsjs/react
andcljsjs/react-dom
transitive dependencies fromreagent
dependency - Using
:foreign-libs
option aliasreact
andreact-dom
with globally exported (from JS project) ones:file
is a required field in:foreign-libs
, provide a path to an empty stub file
- Set
:infer-externs
totrue
so that compiler can infer external references to shared deps
On every change to ClojureScript source Figwheel will apply a patch to the code running in the browser. In order to reflect those changes on the screen you have to re-render the app so the new code will be executed.
- Use
^:figwheel-hooks
meta to enable Figwheel hooks and^:after-load
meta on a function that calls rendering function exported from JS