Learn SOLID-JS with Real Code Examples

SolidJS allows developers to build highly performant, reactive web applications using signals and fine-grained updates.

It uses JSX for declarative UI composition, similar to React.

Solid avoids a virtual DOM and instead compiles templates into optimized DOM instructions.

Signals for state management

Effects and memos for reactive computations

JSX templating with compile-time compilation

Context API for dependency management

Solid Router for SPA navigation

Signals (`createSignal`)

Effects (`createEffect`)

Memos (`createMemo`)

Components using JSX

Stores for structured state

src/ - main application code

src/components - reusable UI

src/routes - route-based files (if router used)

public/ - static assets

vite.config.js - build configuration

Define components with functions returning JSX

Use signals for reactive state

Use effects for side effects

Use Solid Router for navigation

Build with Vite using `npm run build`

Beginner: simple component-based apps

Intermediate: SPA with Solid Router

Advanced: streaming SSR and hydration

Expert: fine-grained reactive architecture

Community: building Solid libraries or primitives

Faster than React due to no VDOM

More predictable reactivity than Vue

More fine-grained than Svelte

Smaller runtime than Angular or React

Closer to Knockout or MobX in reactivity model

2020 – SolidJS 1.0 early release

2021 – SolidJS 1.0 official release

2023 – Solid Start beta for SSR apps

2024 – Ecosystem libraries mature

2025 – SolidJS 2.0 direction begins

Signal: a reactive value container

Effect: side-effect triggered on signal change

Memo: cached reactive computation

JSX: declarative UI syntax

Hydration: attaching events to SSR output