What Solid is
SolidJS is a library for building user interfaces in the browser. Like React, it builds a page from components and uses JSX, but it updates the page differently: there is no virtual DOM, and only the nodes that depend on changed data are touched. This course targets Solid 1.9.
Reactivity
Reactivity is the ability of the interface to update itself when data changes. In Solid, data lives in signals. A signal is a value that remembers who read it and notifies those readers when it changes.
// src/App.jsx
import { createSignal } from 'solid-js';
export default function App() {
const [count, setCount] = createSignal(0);
return <button onClick={() => setCount(count() + 1)}>Clicked: {count()}</button>;
}On every click only the text inside the button changes. The App function itself is not called again.
How Solid differs from React
| React | Solid | |
|---|---|---|
| Component function | Runs on every update | Runs once |
| State | useState returns a value | createSignal returns a getter function |
| Page updates | Virtual DOM diffing | Direct changes to the right nodes |
| Rules of hooks | No calls inside conditions | No such rules |
| Lists and conditions | map and && | The For and Show components |
| Props | Can be destructured | Destructuring breaks updates |
The key idea: a Solid component is a setup function. It creates the DOM and the links between data and nodes once, and from then on signals do the work.
Signals are functions
You read a signal's value by calling it: count(), not count. The call inside JSX is what registers the subscription. If you write {count} without parentheses, Solid receives the function itself and will call it too, but in ordinary code (comparisons, calculations) you need the parentheses.
What the course covers
First you build a to-do list: components, signals, stores, conditions and lists. Then a small blog that loads posts from https://jsonplaceholder.typicode.com, with routes, a post page and error handling. At the end come the build and tests.
SolidStart
SolidStart is a meta-framework on top of Solid, like Next.js on top of React: server rendering, file-based routes, server functions. This course does not need it: everything is built with Solid, Vite and Solid Router.
Common mistake
Bringing React habits along: expecting the component function to run again and writing calculations like const total = count() * 2 in its body. That line runs once, and total never changes. Write values that depend on signals as functions: const total = () => count() * 2.