iwrotesomecode / react-docs-helix

React docs tutorial using ClojureScript Helix

React Docs in ClojureScript Helix

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.

part1.cljs

Quick Start Creating basic components, conditional rendering, basic click events, useState and state placement.

part2.cljs

Thinking in React Breaking the UI into component hierarchy, filter and map data within an interactive display.

part3.cljs

Describing the UI Configuring component attributes, passing props, conditional rendering, using map/filter with lists.

part4.cljs

Adding Interactivity Responding to user events.

part5.cljs

Managing State Sharing state between components: useContext, useReducer.

part6.cljs

Escape Hatches Synchronizing components with systems outside React: useRef, forwardRef, useEffect, custom hooks. Dealing with race conditions and outdated API calls.

TODO

• More custom hook examples in the final subsections of "Escape Hatches"
• Example of useSyncExternalStore
• Replace main.css with Tailwindcss

Tooling

helix

shadow-cljs

promesa

promise/future library to simulate API calls with delays (e.g. fetch-data in part6.cljs)

Quickstart

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