Worked examples from the (beta) React Docs using Helix, a modern and optimized library for React development in ClojureScript.
Minimal deployed example in Helix here.
Quick Start Creating basic components, conditional rendering, basic click events, useState and state placement.
Thinking in React Breaking the UI into component hierarchy, filter and map data within an interactive display.
Describing the UI Configuring component attributes, passing props, conditional rendering, using map/filter with lists.
Adding Interactivity Responding to user events.
Managing State Sharing state between components: useContext, useReducer.
Escape Hatches Synchronizing components with systems outside React: useRef, forwardRef, useEffect, custom hooks. Dealing with race conditions and outdated API calls.
- More custom hook examples in the final subsections of "Escape Hatches"
- Example of
useSyncExternalStore - Replace
main.csswith Tailwindcss
promise/future library to simulate API calls with delays (e.g. fetch-data in part6.cljs)
With these requirements installed on your system:
- node.js (v6.0.0+, most recent version preferred)
- npm (comes bundled with
node.js) or yarn - Java SDK (Version 11+, Latest LTS Version recommended)
Run the following commands to setup a new project:
npx create-cljs-project <project-name>
cd <project-name>
npm install react react-refresh react-dom
Where <project-name> is react-docs-helix in this project.
Check the shadow-cljs docs to setup shadow-cljs.edn for your project (or copy the template here). Then you can interactively watch your app refresh as you develop it.
npx shadow-cljs watch app