Write 18 lines. Get 96 lines of React.

page Counter:
  state count: int = 0
  derived doubled = count * 2

  fn increment():
    count += 1

  fn decrement():
    count -= 1

  layout col gap=16 padding=24 center:
    text "Counter" size=2xl bold
    text "{count}" size=3xl bold
    text "Doubled: {doubled}"

    layout row gap=8:
      button "-1" style=danger -> decrement()
      button "Reset" -> count = 0
      button "+1" style=primary -> increment()

import React, { useState, useMemo } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  const doubled = useMemo(
    () => count * 2, [count]
  );
  const increment = () => {
    setCount(prev => prev + 1);
  };
  const decrement = () => {
    setCount(prev => prev - 1);
  };

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: '16px',
      padding: '24px',
      alignItems: 'center',
    }}>
      <span style={{
        fontSize: '32px',
        fontWeight: 'bold',
      }}>Counter</span>
      <span style={{
        fontSize: '40px',
        fontWeight: 'bold',
      }}>{count}</span>
      /* ... styles, buttons, handlers ... */
    </div>
  );
}

<script setup>
import { computed, ref } from 'vue';

const count = ref(0);
const doubled = computed(
  () => count.value * 2
);
function increment() {
  count.value += 1;
}
function decrement() {
  count.value -= 1;
}
</script>

<template>
  <div style="display: flex;
    flex-direction: column;
    gap: 16px; padding: 24px;
    align-items: center">
    <span style="font-size: 32px;
      font-weight: bold">
      Counter
    </span>
    <span style="font-size: 40px;
      font-weight: bold">
      {{ count }}
    </span>
    <!-- ... buttons, bindings ... -->
  </div>
</template>

<script>
  let count = $state(0);
  let doubled = $derived(
    count * 2
  );
  function increment() {
    count += 1;
  }
  function decrement() {
    count -= 1;
  }
</script>

<div style="display: flex;
  flex-direction: column;
  gap: 16px; padding: 24px;
  align-items: center">
  <span style="font-size: 32px;
    font-weight: bold">
    Counter
  </span>
  <span style="font-size: 40px;
    font-weight: bold">
    {count}
  </span>
  <!-- ... buttons, events ... -->
</div>