SolidJS

Getting Started

1. What is SolidJS?What SolidJS is, how fine-grained reactivity differs from a virtual DOM, and why that distinction matters.
2. Setting Up a Solid ProjectScaffolding a SolidJS app with Vite, and what each generated file is actually doing.
3. JSX in SolidWhy Solid's JSX looks like React's but compiles to something completely different under the hood.

Reactivity Fundamentals

1. Signals — the Core PrimitivecreateSignal, the getter/setter pair that powers every piece of reactive state in Solid.
2. Derived Values with createMemoWhen a plain derived function is enough, and when createMemo's caching actually earns its keep.
3. Effects with createEffectRunning side effects in response to signal changes, and how automatic dependency tracking differs from React's dependency arrays.

Components & Props

1. Components Only Run OnceWhy a Solid component function body executes a single time, and what that means for how you write component code.
2. Props and Reactivity GotchasThe single most common Solid mistake for React developers — destructuring props breaks reactivity — and how to avoid it.

Control Flow

1. Conditional Rendering with ShowWhy Solid uses a <Show> component instead of JavaScript ternaries or && for conditional UI.
2. Rendering Lists with ForWhy Solid has a dedicated <For> component instead of Array.map, and how it keeps list updates fast.
3. Switch and MatchHandling more than two branches of conditional UI cleanly, without a chain of nested <Show> components.

Shared State

1. Context in SolidSharing reactive state across the component tree with createContext and useContext, without prop drilling.
2. Stores with createStoreManaging nested objects and arrays reactively with createStore, and why signals alone become clumsy for structured state.
3. Updating Nested StateArray paths, produce, and reconcile — the tools for making complex store updates precise instead of clumsy.

Advanced & Best Practices

1. Lifecycle and CleanuponMount and onCleanup — the two lifecycle hooks Solid needs, given that components only run once.
2. Solid vs React: the Mental ModelA direct comparison of how Solid and React handle rendering, state, and updates, for developers translating knowledge between the two.
3. Common Mistakes and Best PracticesA closing checklist of the Solid-specific pitfalls this course covered, and the habits that avoid them.