🌓 Luna UI
🌐 English
English日本語
Menu

MoonBit Tutorial

Learn Luna's reactive primitives and server-side rendering with MoonBit.

What You'll Learn

SectionTopic
IntroductionBasics, Signals, Effects, Memos
ReactivityBatch updates, Untrack, Nested effects
Control FlowConditional rendering, Lists, Switch
LifecycleMount, Cleanup
IslandsServer-side rendering for partial hydration

Prerequisites

  • MoonBit basics (structs, functions, traits)

  • Understanding of reactive programming concepts

Tutorial Sections

Introduction

  1. Basics - Your first Luna component

  2. Signals - Reactive state

  3. Effects - Side effects

  4. Memos - Computed values

Reactivity

  1. Batch Updates - Combine multiple updates

  2. Untrack - Escape tracking

  3. Nested Effects - Effect composition

Control Flow

  1. Show - Conditional rendering

  2. For - List rendering

  3. Switch - Multiple conditions

Lifecycle

  1. onMount - Setup on mount

  2. onCleanup - Cleanup resources

Islands Architecture

  1. Islands Basics - Server-side island setup

  2. Islands State - Passing state to client

  3. Islands Triggers - Controlling hydration timing

  4. Web Components - Shadow DOM islands

See Also