Welcome to _ballerina_, the effortlessly elegant functional programming framework for frontend web development, with a particular but non-exclusive preference for React.
## Quick start
Everything in Ballerina 🩰 is based on the separation of code into units called _domains_.
Create a Typescript/React project however you want (I like to use rspack but you can use whatever you prefer).
Head over to the sources, and create all the necessary files and directories for a new domain (this is just a best practice and it avoids merge conflicts in the long run):
```
mkdir helloWorld
cd helloWorld
touch state.ts
touch template.tsx
mkdir coroutines
touch coroutines/runner.ts
```
Let's define the state of our domain in `state.ts`:
```ts
import { simpleUpdater } from "ballerina-core";
export type HelloWorldContext = { greeting: string };
export type HelloWorldState = { counter: number; toggle: boolean };
export const HelloWorldState = {
Default: (): HelloWorldState => ({
counter: 0,
toggle: false,
}),
Updaters: {
...simpleUpdater{props.context.greeting}
Counter: {props.context.counter}
)).any([helloWorldRunner]); ``` Finally, let's render this as a top-level stateful domain from the React entry point (which file depends on the template you used): ```tsx import { useState } from "react"; import "./App.css"; import { HelloWorldState } from "./domains/helloWorld/state"; import { HelloWorldTemplate } from "./domains/helloWorld/template"; import { unit } from "ballerina-core"; export const App = (props: {}) => { const [helloWorld, setHelloWorld] = useState(HelloWorldState.Default()); return ( <>