Пример простого компонента

Мы начнем наше знакомство с solid с создания простейшего компонента со счетчиком. В итоге мы получим интерактивный компонент,который можно вставить в любую страницу.
Как это будет работать, можно увидеть ниже:

Создайте отдельную директорию, после этого внутри нее создайте 2 файла:

component.tsx - сам solid компонент счетчика
index.tsx - страница, на которую мы его вставим. Если у вас уже есть страница, можете использовать свою

Пример кода можно увидеть тут

Начнем по порядку

Первым делом нужно создать файл component.tsx и сделать импорт необходимых модулей:

// @shared
import {createSignal, createSolidComponent, jsx} from '@app/solid-js'

Обратите внимание, на строчку // @shared в начале файла. Она обязательна.

Дальше, нам нужно импортировать следующие методы из пакета @app/solid-js:

createSignal — для управления состоянием (о нем подробнее чуть позже).
createSolidComponent — для создания компонента.
jsx — для поддержки JSX.

и компонент Button из (ui-библиотеки) solid

import {Button} from "@solid/ui"

Создание компонента Counter

export const Counter = createSolidComponent(function (props: { ctx: app.Ctx }) {})

В этом же файле создадим компонент Counter, который будем передавать на страницу index.tsx для отрисовки. Он принимает объект props, в котором есть контекст (ctx).

Определение состояния count

Функция createSignal в Solid.js используется для создания состояния, похожего на useState в React. Она возвращает пару функций: одну для получения значения getter, а другую для его обновления setter.

В нашем случае это выглядит следующим образом :

const [count, setCount] = createSignal(0)

count() — функция, которая возвращает текущее значение, а setCount() - функция, которая устанавливает новое значение.

Когда вы вызываете getter (например, count()), компонент отслеживает это значение, чтобы автоматически обновляться при его изменении.

При вызове setter (например, setCount(newValue)), значение обновляется и вызывает повторный рендеринг всех зависимых компонентов, если значение действительно изменилось.

Внутри Counter определим состояние count с начальным значением 0.

Возвращаемая разметка компонента

Добавим пару кнопок одна будет прибавлять счет, а другая уменьшать на 1.

За это как раз отвечает функция setCount, которая вызывается при нажатии на кнопку.

  return (
    <div>
      <h1>Счетчик: {count()}</h1>
      <Button onClick={() => setCount(count() + 1)}>Увеличить</Button>
      <Button onClick={() => setCount(count() - 1)}>Уменьшить</Button>
    </div>
  )

Компонент возвращает разметку, отображающую текущее значение счетчика и две кнопки.

Итоговый код component.tsx должен выглядеть так

Теперь перейдем к файлу index.tsx.

import { jsx } from '@app/html-jsx'
import { UiHtmlLayout } from '@html/layout'
import { Counter } from './component'

Нам нужно отрисовать Counter на странице, а для этого нужно воспользоваться следующими модулями:

jsx — для поддержки JSX в chatium.
UiHtmlLayout - представляет собой макет (layout), используемый для обертывания страниц или компонентов.
Counter - импорт компонента Counter из component.tsx

Далее создадим маршрут к component.tsx странице с асинхронной функцией-обработчиком:

app.html('/', async ctx => {
  return(
    <UiHtmlLayout>
      <Counter ctx={ctx} />
    </UiHtmlLayout>)
})

и вернем Counter ctx={ctx}, который отрисовывается внутри макета UiHtmlLayout. Он принимает ctx в качестве пропа, чтобы иметь доступ к контексту.

Итоговый код `index.tsx`

import { jsx } from '@app/html-jsx'
import { UiHtmlLayout } from '@html/layout'
import { Counter } from './component'

app.html('/', async ctx => {
  return (
    <UiHtmlLayout title="Пример счетчика">
      <div style={"padding: 20px; border: 1px solid #ccc;"}>
        <Counter ctx={ctx} />
      </div>
    </UiHtmlLayout>
  )
})

Документация