Skip to content

README.md

Latest commit

 

History

History
68 lines (49 loc) · 2.32 KB

README.md

File metadata and controls

68 lines (49 loc) · 2.32 KB
Raw

The Effect Native guide

A buildable tutorial for building an app on Effect Native, written against what's actually shipped in this repository — not what's planned.

Who this is for

You don't need to know Effect already, but you should be comfortable reading TypeScript. If you've used React or React Native, most of the friction is unlearning specific habits (components as functions, state as hooks, event handlers as closures) — page 3 covers the intent algebra that replaces those.

Status

Pre-alpha. APIs will change until a first tagged release. The catalog is intentionally closed (see ../../GAPS.md).

Every ts/typescript code block in this guide is extracted and type-checked by scripts/check-doc-snippets.ts (pnpm run check:doc-snippets). The catalog tag list is guarded by scripts/check-catalog-reference.ts.

Reading order

Fundamentals

  1. Install and setup
  2. Views are data
  3. The intent algebra
  4. The runtime
  5. The DOM renderer
  6. The React Native renderer
  7. Catalog reference

Tutorial depth (forms, nav, lists, DX)

  1. Styling
  2. Forms
  3. Navigation
  4. Lists and overlays
  5. Testing
  6. DevTools

The tutorial app

examples/guide-app is the runnable artifact this guide builds toward — form composer, note list, delete modal, About link, and responsive padding variants.

pnpm run example:guide          # web at http://127.0.0.1:4177/
pnpm exec vp test --run ./examples/guide-app  # testkit interaction tests

On mobile (Expo app under examples/mobile):

cd examples/mobile
EXPO_PUBLIC_EFFECT_NATIVE_SURFACE=guide bunx expo start

Then open the iOS simulator from the Expo CLI (i key) — same guideAppView tree as web.

Larger examples