Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Solid.js Counter Component - Solid-js Typing CST Test
Solid.js Counter Component — Solid-js Code
Demonstrates a simple counter component using Solid.js reactive signals and event handling.
import { createSignal } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
const [isDark, setIsDark] = createSignal(false);
const increment = () => setCount(count() + 1);
const decrement = () => setCount(count() - 1);
const reset = () => setCount(0);
const toggleTheme = () => setIsDark(!isDark());
return (
<div class={isDark() ? 'dark-theme' : 'light-theme'}>
<h2>Counter: {count()}</h2>
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={reset}>Reset</button>
</div>
<button onClick={toggleTheme}>Switch to {isDark() ? 'Light' : 'Dark'} Theme</button>
</div>
);
}
export default Counter;Solid-js Language Guide
SolidJS is a fast, reactive JavaScript library for building user interfaces using fine-grained reactivity and a compile-time optimized rendering model. It emphasizes performance, predictable state updates, and minimal abstraction.
Primary Use Cases
- ▸High-performance web apps
- ▸Highly interactive dashboards
- ▸Dynamic UI widgets and embedded components
- ▸Single-page applications (SPAs)
- ▸Reactive data-driven interfaces
Notable Features
- ▸Fine-grained reactive system
- ▸JSX without VDOM diffing
- ▸Highly optimized compile-time output
- ▸Simple and predictable reactivity model
- ▸Small bundle size (~6-8 KB)
Origin & Creator
Created by Ryan Carniato and released publicly in 2020, inspired by Knockout, React, and fine-grained reactivity systems.
Industrial Note
SolidJS excels in high-performance UI applications, real-time dashboards, embedded widgets, and scenarios requiring extremely fast updates.
Quick Explain
- ▸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.
Core Features
- ▸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
Learning Path
- ▸Learn basic JavaScript + JSX
- ▸Understand signals and fine-grained reactivity
- ▸Build components and manage state
- ▸Learn routing, stores, global state
- ▸Build SSR apps using Solid Start
Practical Examples
- ▸Real-time stock dashboard
- ▸Counter app using signals
- ▸Chat app with live updates
- ▸Widget embedded in existing websites
- ▸Streaming SSR blog or e-commerce UI
Comparisons
- ▸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
Strengths
- ▸Extremely high performance (beats React, Svelte, Vue in many benchmarks)
- ▸Predictable signal-based state updates
- ▸Simple mental model compared to frameworks with VDOM
- ▸Small bundle size and fast runtime
- ▸JSX familiarity for React developers
Limitations
- ▸Smaller ecosystem compared to React or Vue
- ▸Not ideal for huge enterprise apps requiring standardized patterns
- ▸Requires understanding of reactive primitives
- ▸Less community-provided tooling
- ▸SSR requires some learning for streaming approach
When NOT to Use
- ▸Enterprise apps needing mature tooling
- ▸Teams heavily invested in React ecosystem
- ▸Apps requiring many third-party integrations
- ▸Fully static sites better suited for Astro
- ▸Large organizations with strict framework guidelines
Cheat Sheet
- ▸createSignal() - core reactive primitive
- ▸createEffect() - runs on dependencies
- ▸createMemo() - memoized computation
- ▸<Show when={} fallback={}> - conditional rendering
- ▸Solid Router: <Route path='/'>
FAQ
- ▸Is Solid like React?
- ▸Yes, it uses JSX but avoids the VDOM.
- ▸Does Solid use a Virtual DOM?
- ▸No - it uses direct DOM updates.
- ▸Is Solid production ready?
- ▸Yes, used by many startups and projects.
- ▸Why is Solid so fast?
- ▸Fine-grained reactivity without diffing.
- ▸Does Solid support TypeScript?
- ▸Yes, first-class TypeScript support.
30-Day Skill Plan
- ▸Week 1: JSX, components, signals
- ▸Week 2: Effects, memos, derived state
- ▸Week 3: Routing + async data
- ▸Week 4: Stores + advanced reactivity
- ▸Week 5: SSR, hydration, and deployment
Final Summary
- ▸SolidJS is a fast, reactive UI library built on fine-grained reactivity.
- ▸It compiles JSX into highly optimized DOM operations.
- ▸Great for performance-critical UI and reactive interfaces.
- ▸Easy to learn for React users but more predictable.
- ▸Ideal for dashboards, widgets, and real-time applications.
Project Structure
- ▸src/ - main application code
- ▸src/components - reusable UI
- ▸src/routes - route-based files (if router used)
- ▸public/ - static assets
- ▸vite.config.js - build configuration
Monetization
- ▸High-performance SaaS dashboards
- ▸Embedded widgets
- ▸Real-time trading apps
- ▸Premium UI frameworks for Solid
- ▸Courses or consulting
Productivity Tips
- ▸Use signals instead of stores when possible
- ▸Leverage JSX compilation for performance
- ▸Use context sparingly
- ▸Keep effects pure and side-effect-only
- ▸Use Solid DevTools extension
Basic Concepts
- ▸Signals (`createSignal`)
- ▸Effects (`createEffect`)
- ▸Memos (`createMemo`)
- ▸Components using JSX
- ▸Stores for structured state
More Solid-js Typing Exercises
Solid.js Counter with LocalStorageSolid.js Counter with Computed ParitySolid.js Counter with Signal WatchSolid.js Counter with Conditional ThemeSolid.js Counter with Derived StyleSolid.js Counter with Event DispatcherSolid.js Counter with Input BindingSolid.js Counter with Slot ControlsSolid.js Counter with onMount Hook