# Hello World

Let's build a simple interactive example to see CxJS in action.

## Your First Example

CxJS uses JSX syntax similar to React. Here's a simple form with a text field and a button:

```tsx
import { createModel } from "cx/ui";
import { Button, LabelsTopLayout, MsgBox, TextField } from "cx/widgets";

interface PageModel {
  name: string;
}

const m = createModel<PageModel>();

export default (
  <LabelsTopLayout vertical>
    <TextField value={m.name} label="Name" />
    <Button
      text="Greet"
      onClick={(event, { store }) => {
        let name = store.get(m.name);
        MsgBox.alert(`Hello, ${name ?? "Stranger"}! Welcome to CxJS!`);
      }}
      class="mt-2"
    />
  </LabelsTopLayout>
);

```

Let's break down the key parts:

- **PageModel** — TypeScript interface defining the shape of your data
- **createModel** — Creates a typed accessor model for store bindings
- **TextField** — A CxJS form widget with built-in two-way data binding
- **LabelsTopLayout** — A layout that positions labels above form fields
- **Button** with **onClick** — Access the `store` to read bound values
- **MsgBox.alert** — A built-in dialog for displaying messages

When the user types into the text field, the value is automatically written to the store via the `m.name` binding. The button's `onClick` handler reads this value from the store and displays a greeting.