> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React UI

The recommended way to build custom Expresso UI is React with `@napps/nodes`. The package reconciles JSX into native JSI nodes.

## Create a component

```bash theme={null}
napps new my-component --template custom-component
```

```tsx theme={null}
import {
  type ComponentContext,
  type FieldsMeta,
  type RootComponentProps,
  BaseReactUIComponent
} from "@napps/nodes";

interface PromoProps {
  title: string;
}

export const meta: FieldsMeta<PromoProps> = {
  title: { type: "text", label: "Title", default: "Hello" }
};

function App({ settings }: RootComponentProps<PromoProps>) {
  return (
    <column style={{ padding: 16 }}>
      <text>{settings?.title ?? "Hello"}</text>
    </column>
  );
}

export default (context: ComponentContext, args: PromoProps) =>
  new BaseReactUIComponent(context, args, <App settings={args} />);
```

`meta` declares merchant-configurable settings. The CLI syncs those fields during deployment. Pass the component arguments into React through `RootComponentProps`.

## JSX nodes

Supported intrinsic nodes include `box`, `column`, `row`, `text`, `img`, `video`, `touchable`, `button`, `textInput`, `scrollable`, `pager`, `bottomSheet`, and `gestureDetector`.

All nodes accept `style`, `key`, and `class`. Nodes that render a subtree also accept `children`;
`img`, `video`, `button`, and `textInput` are leaf nodes and do not render children. Classes do not
cascade to children.

## Component lifecycle

`BaseReactUIComponent` mounts the React tree when the native component is created and unmounts it when the component is destroyed. In development, the CLI reuses the root during Fast Refresh so React state can survive edits.

## Next steps

* Learn the [React hooks](/js-ui/react/hooks).
* Browse the [supported nodes](/js-ui/nodes) and their properties.
* Define [styles and layout](/js-ui/react/styling).
* Add [animations](/js-ui/react/animations) and [gestures](/js-ui/react/gestures).
* Copy patterns from [UI examples](/js-ui/examples).