Solid.js Counter with Derived Style - Solid-js Typing CST Test
Loading…
Solid.js Counter with Derived Style — Solid-js Code
Applies dynamic styles based on counter value using a memo.
import { createSignal, createMemo } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
const bgColor = createMemo(() => count() > 0 ? 'lightgreen' : 'lightcoral');
return (
<div style={{ background: bgColor() }}>
<h2>Counter: {count()}</h2>
<button onClick={() => setCount(count() + 1)}>+</button>
<button onClick={() => setCount(count() - 1)}>-</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.
More Solid-js Typing Exercises
Solid.js Counter ComponentSolid.js Counter with LocalStorageSolid.js Counter with Computed ParitySolid.js Counter with Signal WatchSolid.js Counter with Conditional ThemeSolid.js Counter with Event DispatcherSolid.js Counter with Input BindingSolid.js Counter with Slot ControlsSolid.js Counter with onMount Hook