skill-based roadmap · Frameworks
SolidJS Roadmap
A beginner-to-job-ready path for mastering SolidJS, the high-performance reactive UI library for building modern web applications with fine-grained reactivity.
✓ Every resource link below is verified live.
1. Stage 1: Web Foundations
HTML & CSS Fundamentals
SolidJS renders to the DOM, so HTML/CSS knowledge is essential.
JavaScript Essentials
SolidJS is a JS library; strong JS fundamentals are mandatory.
ES6+ Modern JavaScript
SolidJS code heavily uses destructuring, modules, and arrow functions.
TypeScript Basics
SolidJS has first-class TypeScript support used in most projects.
2. Stage 2: SolidJS Core Concepts
Getting Started & Project Setup
Understanding the toolchain lets you scaffold and run SolidJS apps.
JSX in SolidJS
SolidJS uses JSX compiled differently from React, avoiding a virtual DOM.
Signals & Reactivity Primitives
Signals are the core reactive primitive that powers all SolidJS state.
Effects & Memos
createEffect and createMemo handle side effects and derived state efficiently.
Components & Props
Components are the building blocks for composing SolidJS UIs.
3. Stage 3: Intermediate SolidJS Patterns
Control Flow (Show, For, Switch)
SolidJS provides optimized control-flow components replacing conditional JS.
Stores & Nested State
createStore manages complex nested reactive state without manual mutation.
Lifecycle & onCleanup
Managing side-effect teardown prevents memory leaks in real apps.
Context API
Context shares state across component trees without prop drilling.
Event Handling & Directives
SolidJS event delegation and directives unlock performant DOM interactions.
4. Stage 4: Async, Routing & Data Fetching
createResource & Async Data
createResource is the idiomatic SolidJS way to handle async data fetching.
Suspense & Error Boundaries
Suspense and ErrorBoundary handle loading and error states declaratively.
Client-Side Routing with @solidjs/router
The official router handles navigation and code-splitting in SPAs.
Fetching with TanStack Query for Solid
TanStack Query for Solid brings server-state caching and sync to SolidJS.
5. Stage 5: Styling, Testing & Tooling
CSS Modules & Vanilla Extract
Scoped styling strategies keep component styles maintainable at scale.
Component Libraries (SUID / Kobalte)
Using UI libraries accelerates building accessible, production-quality UIs.
Unit Testing with Vitest
Vitest integrates seamlessly with Vite-based SolidJS projects for fast tests.
End-to-End Testing with Playwright
E2E tests validate full user flows in the browser for production confidence.
6. Stage 6: SolidStart & Full-Stack Development
SolidStart Framework Introduction
SolidStart is the official meta-framework adding SSR, file routing, and APIs.
Server-Side Rendering (SSR) & Streaming
SSR improves SEO and initial load; streaming enables progressive rendering.
Server Functions & API Routes
SolidStart server functions enable secure, co-located backend logic.
Deployment & Adapters
SolidStart adapters target Vercel, Netlify, Cloudflare, and Node for deploy.
7. Stage 7: Job-Ready Skills & Portfolio
Performance Optimization
Fine-grained reactivity must be used correctly to avoid unnecessary updates.
State Management Architecture
Structuring stores and contexts correctly scales apps to enterprise complexity.
Open Source Contributions
Contributing to real SolidJS ecosystem projects signals job-ready expertise.
Portfolio Project: Full-Stack SolidStart App
A deployed full-stack project demonstrates end-to-end capability to employers.