Counter Component - Remix Typing CST Test

Counter Component — Remix Code

Demonstrates a simple counter component in Remix using React hooks with client-side interactivity.

import { useState, useEffect } from 'react';

export default function Counter() {
	const [count, setCount] = useState(0);
	const [isDark, setIsDark] = useState(false);

	useEffect(() => {
		const savedCount = localStorage.getItem('count');
		if (savedCount) setCount(parseInt(savedCount, 10));
	}, []);

	useEffect(() => {
		localStorage.setItem('count', count.toString());
	}, [count]);

	return (
		<div className={isDark ? 'dark-theme' : 'light-theme'}>
		<h2>Counter: {count}</h2>
		<div>
		<button onClick={() => setCount(count + 1)}>+</button>
		<button onClick={() => setCount(count - 1)}>-</button>
		<button onClick={() => setCount(0)}>Reset</button>
		</div>
		<button onClick={() => setIsDark(!isDark)}>Switch to {isDark ? 'Light' : 'Dark'} Theme</button>
		</div>
	);
}

Remix Language Guide

Remix is a full-stack, server-first web framework that emphasizes web standards, progressive enhancement, nested routing, and seamless data loading using loaders and actions. It focuses on performance, accessibility, and delivering fast user experiences through native browser APIs.

More Remix Typing Exercises

Practice Other Languages