import { createSignal } from "solid-js";
import { render } from "solid-js/web";

// A component is just a function that returns a DOM node
function Counter() {
  // Create a piece of reactive state, giving us an accessor, count(), and a setter, setCount()
  const [count, setCount] = createSignal(0);
  
  //To create derived state, just wrap an expression in a function
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

  // JSX allows you to write HTML within your JavaScript function and include dynamic expressions using the { } syntax
  // The only part of this that will ever rerender is the doubleCount() text.
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        Increment: {doubleCount()}
      </button>
    </>
  );
}

// The render function mounts a component onto your page
render(Counter, document.getElementById("app")!);

Solid 会将你的 JSX 编译为高效的真实 DOM 更新。它在运行时使用相同的响应式原语（createSignal），但确保尽可能减少重新渲染。以下是该示例中的具体表现：

import { template as _$template } from "solid-js/web";
import { delegateEvents as _$delegateEvents } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
//The compiler pulls out any static HTML
const _tmpl$ = /*#__PURE__*/_$template(`<button>Increment: `);

import { createSignal, createEffect } from "solid-js";
import { render } from "solid-js/web";

function Counter() {
  const [count, setCount] = createSignal(0);
  
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");
  
  return (() => {
    //_el$ is a real DOM node!
    const _el$ = _tmpl$();
    _el$.$$click = () => setCount(c => c + 1);
     //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button
    _$insert(_el$, doubleCount);
    return _el$;
  })();
}
render(Counter, document.getElementById("app"));
_$delegateEvents(["click"]);

您可以通过在终端中运行以下命令，使用一个简单的应用开始入门：

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

或者对于 TypeScript：

> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

这将创建一个由 Vite 驱动的最小化客户端渲染应用程序。

或者，您可以在自己的环境中安装依赖项。要在 JSX 中使用 Solid（推荐），请运行：

> npm i -D babel-preset-solid
> npm i solid-js

最简单的设置方法是将 babel-preset-solid 添加到您的 .babelrc、webpack 的 babel 配置或 rollup 配置中：

"presets": ["solid"]

为了让 TypeScript 正常工作，请记住将你的 .tsconfig 设置为处理 Solid 的 JSX：

"compilerOptions": {
  "jsx": "preserve",
  "jsxImportSource": "solid-js",
}