$devvkit learn --librarie solidjs-guide

SolidJS Guide

[solidjs][frontend][reactive][signals]

JavaScript / TypeScript

Install

npm create solid@latest
# or: npm create vite@latest my-app -- --template solid-ts

SolidJS is a purely reactive library. Instead of a virtual DOM, it compiles JSX to real DOM bindings. When state changes, only the exact DOM nodes that depend on that state are updated: no diffing.

Signals (createSignal) are the atomic unit of reactivity. Memos (createMemo) are derived values that cache. Effects (createEffect) run side effects when dependencies change. All are synchronous and predictable.

The ecosystem includes Solid Router, Solid Primitives (collection of utilities), and integration with TanStack Query. SolidStart is the meta-framework for SSR/SSG.

Setup

Create app· Scaffold Solid app.

npm create solid@latest my-app
cd my-app
npm run dev

Components

Component· Function component.

import { createSignal } from 'solid-js'

function Counter() {
  const [count, setCount] = createSignal(0)
  return <button onClick={() => setCount(c => c + 1)}>{count()}</button>
}

Props· Component props.

function Greeting(props: { name: string }) {
  return <p>Hello, {props.name}!</p>
}

// Splitting:
function Button(props) {
  const [local, others] = splitProps(props, ['variant'])
  return <button class={local.variant} {...others} />
}

Signals & Effects

Signal· Primitive reactive value.

import { createSignal, createMemo, createEffect } from 'solid-js'

const [name, setName] = createSignal('Alice')
const greeting = createMemo(() => `Hello, ${name()}!`)

createEffect(() => {
  console.log('Name changed to:', name())
})

Control Flow

Show· Conditional render.

<Show when={user()} fallback={<p>Loading...</p>}>
  <p>{user().name}</p>
</Show>

For· List rendering.

<For each={items()}>{(item, index) =>
  <li data-index={index()}>{item.name}</li>
}</For>

Context & Store

Context API· Provide/inject pattern.

import { createContext, useContext } from 'solid-js'

const ThemeContext = createContext('light')

// Provider:
<ThemeContext.Provider value='dark'>
  <App />
</ThemeContext.Provider>

// Consumer:
const theme = useContext(ThemeContext)

Store· Deep reactive state.

import { createStore } from 'solid-js/store'

const [state, setState] = createStore({
  user: { name: 'Alice', todos: [] },
})

setState('user', 'name', 'Bob')
setState('user', 'todos', [...state.user.todos, { id: 1, text: 'Learn Solid' }])