Solid

Quickstart (create Solid app)

bash
npm create solid@latest my-solid
cd my-solid
npm install
npm run dev

Project setup (signal basics)

tsx
import { createSignal } from "solid-js";

const [n, setN] = createSignal(0);
setN(n() + 1);

Signal + component (TSX)

tsx
import { createSignal } from "solid-js";

export function Counter() {
  const [n, setN] = createSignal(0);
  return <button onClick={() => setN(n() + 1)}>{n()}</button>;
}

Iteration (<For>)

tsx
import { For } from "solid-js";

type Item = { id: string; name: string };

export function List(props: { items: Item[] }) {
  return (
    <ul>
      <For each={props.items}>{(it) => <li>{it.name}</li>}</For>
    </ul>
  );
}

Effects (createEffect)

tsx
import { createEffect, createSignal } from "solid-js";

const [n, setN] = createSignal(0);
createEffect(() => {
  console.log("n:", n());
});