Core Concepts
The core concepts every PraxisJS application is built on — components, reactivity, JSX, lifecycle, async data, portals, and document head management.
Core Concepts
The building blocks every PraxisJS application is built on. Read the first five in order — each one builds on the previous. Portal and Head can be read on demand when you need them.
Components
StatefulComponent for components with internal logic. StatelessComponent for pure presentational ones. Both require @Component() and a render() method.
Reactivity & Signals
How @State and @Computed work, why arrow functions are the reactive contract, and how to read signals without creating subscriptions.
JSX Syntax
Reactive vs static expressions, conditionals, lists, event handlers, CSS classes, inline styles, fragments, and ref callbacks.
Lifecycle Hooks
onBeforeMount, onMount, onUnmount, onError — when each runs, what's available at each stage, and how to clean up.
Async Data
@Resource binds a fetcher to a component field with reactive refetch, keepPreviousData, shared cache, stale-while-revalidate, and key-based invalidation.
Portal
Render children into a different DOM node — escaping overflow and stacking context constraints. The standard pattern for modals, tooltips, toasts, and drawers.
Document Head
@Head manages document title, meta tags, og:*, and twitter:* reactively per component. Stack-based — last mounted wins, unmounting restores the previous entry.
Recommended reading order
Components — understand StatefulComponent vs StatelessComponent and the single-render contract before anything else
Reactivity — learn why {() => expr} is needed and how signal propagation works end-to-end
JSX — see every template pattern: lists, conditionals, events, refs, fragments, classes, and styles
Lifecycle — learn when the DOM is available, when to clean up, and how to handle errors
Async Data — add data fetching with @Resource and understand how reactive dependencies trigger refetches
Read Portal when you need to render modals or toasts outside a parent's overflow. Read Document Head when you need per-route title and meta tag management.
After these pages, move to Decorators for the complete API reference, or jump to Packages if you need routing, stores, or DI.
Project Status
PraxisJS is stable and production-ready. Understand the package stability matrix and what to expect from the project going forward.
Components
PraxisJS has two component types — StatefulComponent for components with internal state, and StatelessComponent for pure presentational components.