📄️ Virtual DOM Overview
AtomJS represents your UI as a lightweight virtual DOM (VDOM): an in-memory tree of nodes that mirrors what you intend to show in the browser. When something changes, AtomJS diffs the new VDOM against the previous one and applies the minimal set of DOM updates.
📄️ JSX Runtime
AtomJS ships its own JSX runtime so that JSX written inside your class components compiles into AtomJS VNodes, not anything else. You don’t import the runtime manually—TypeScript routes JSX calls to AtomJS based on your tsconfig settings.
📄️ Element Creation
JSX is the ergonomic way to describe UI in AtomJS, but under the hood it becomes calls to createElement.
📄️ Fragments
Fragments let a component return multiple siblings without adding an extra wrapper element to the real DOM.
📄️ Lifecycle Methods
AtomJS class components extend AtomComponent and can participate in a set of lifecycle hooks.
📄️ Props & Children
Props are how data flows into AtomJS class components. Children are just a special prop that carries nested content. This page covers typing, defaults, validation, and list keys.
📄️ State Management
State holds data that changes over time inside a class component.
📄️ Event Handling
AtomJS wires native DOM events via JSX props like onClick, onInput, and onKeyDown.
📄️ DOM Attributes
This page covers how JSX props map to real DOM attributes in AtomJS.
📄️ Styling
Style elements via classes or inline styles.
📄️ Refs (Coming Soon)
Refs give your component a direct handle to a DOM node (or a child component instance) for imperative reads/writes—think measurements, focus management, or integrating third-party libraries.
📄️ Performance & Optimization
This guide focuses on optimizations you can use today with AtomJS class components.