Counter Component - Preact Typing CST Test

Loading…

Counter Component — Preact Code

Basic Preact counter with dark/light theme toggle.

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

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>
	);
}

export default Counter;

Preact Language Guide

Preact is a fast, lightweight JavaScript library for building user interfaces with a React-like API. It emphasizes small bundle size, performance, and compatibility with modern web standards while providing an easy transition for React developers.

Primary Use Cases

▸Small to medium web applications
▸Mobile-first web apps
▸Interactive widgets and components
▸Progressive web apps (PWAs)
▸High-performance client-side rendering

Notable Features

▸Small bundle size (~3KB gzipped)
▸React-compatible API
▸Fast virtual DOM rendering
▸Component-based architecture
▸Optional ecosystem add-ons (preact/compat)

Origin & Creator

Created by Jason Miller and first released in 2015, Preact was designed as a lightweight alternative to React for high-performance web applications.

Industrial Note

Preact excels in projects where bundle size, speed, and React compatibility are crucial, such as mobile-first web apps, embedded widgets, and highly interactive UIs.

Quick Explain

▸Preact allows developers to create UI components using a syntax similar to React.
▸It offers a virtual DOM for efficient updates while keeping the library extremely small.
▸Preact is designed for performance-critical applications and low-resource environments.

Core Features

▸JSX support
▸Functional and class components
▸Hooks API
▸Virtual DOM diffing
▸Context API for state management

Learning Path

▸Learn JSX and component basics
▸Understand functional vs class components
▸Learn hooks and state management
▸Practice component composition
▸Integrate preact/compat for React libraries

Practical Examples

▸Todo app with components
▸Navigation menu with state
▸Interactive data table
▸PWA with offline caching
▸Widget embedded in third-party sites

Comparisons

▸Smaller and faster than React
▸Easier migration from React than Vue or Angular
▸Better performance for low-resource apps
▸Smaller ecosystem than React
▸Compatible with React libraries via preact/compat

Strengths

▸Ultra-small and fast
▸Easy migration from React
▸Great for performance-critical apps
▸Strong ecosystem via preact/compat
▸Supports modern tooling like Vite and Webpack

Limitations

▸Not a full-stack framework
▸Smaller community than React
▸Limited built-in routing or state libraries
▸Some React libraries may need preact/compat
▸Less official documentation than React

When NOT to Use

▸Full-stack frameworks
▸Complex enterprise apps with heavy ecosystem dependencies
▸Apps requiring full React features out-of-the-box
▸Projects needing rich official tooling
▸Large-scale state-heavy applications

Cheat Sheet

▸`import { h, render, Component } from 'preact'` - core imports
▸`render(<App />, document.body)` - render root component
▸`function MyComp(props) {}` - functional component
▸`class MyComp extends Component {}` - class component
▸`useState`, `useEffect` - hooks

FAQ

▸Is Preact a framework?
▸No, it’s a lightweight UI library similar to React.
▸Can Preact use React libraries?
▸Yes, via preact/compat.
▸Is Preact good for small apps?
▸Excellent, due to small size and fast rendering.
▸Does Preact include routing?
▸No, use preact-router or other libraries.
▸Is Preact beginner-friendly?
▸Yes, if familiar with React concepts and JSX.

30-Day Skill Plan

▸Week 1: Component basics
▸Week 2: State and props
▸Week 3: Hooks and lifecycle
▸Week 4: PWA & router integration
▸Week 5: Performance optimization

Final Summary

▸Preact is a lightweight, fast React alternative.
▸It uses a virtual DOM and supports components with hooks.
▸Highly performant and small in bundle size (~3KB).
▸Compatible with most React libraries via preact/compat.
▸Ideal for small-to-medium web apps, PWAs, and widgets.

Project Structure

▸src/components - reusable components
▸src/pages - app pages
▸src/index.js - entry point
▸package.json - dependencies
▸vite.config.js - optional bundler config

Monetization

▸Web app products
▸Widget SaaS
▸Consulting for performance optimization
▸Preact component libraries
▸Freelance UI development

Productivity Tips

▸Keep components small and reusable
▸Use functional components and hooks
▸Leverage preact/compat for React libraries
▸Lazy-load heavy components
▸Optimize state updates and re-renders

Basic Concepts

▸Functional and class components
▸JSX templating
▸Virtual DOM updates
▸Hooks for state and effects
▸Component composition

Official Docs

More Preact Typing Exercises

Preact Counter with Step Increment Preact Counter with Max Limit Preact Counter with Auto-Reset Preact Counter with History Preact Counter with Dark Mode Only Preact Counter with Auto-Increment Preact Counter with Conditional Theme Preact Full Featured Counter

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

Counter Component — Preact Code

Basic Preact counter with dark/light theme toggle.

import { h } from 'preact'; import { useState, useEffect } from 'preact/hooks'; 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> ); } export default Counter;

Preact Language Guide

Primary Use Cases

▸Small to medium web applications
▸Mobile-first web apps
▸Interactive widgets and components
▸Progressive web apps (PWAs)
▸High-performance client-side rendering

Notable Features

▸Small bundle size (~3KB gzipped)
▸React-compatible API
▸Fast virtual DOM rendering
▸Component-based architecture
▸Optional ecosystem add-ons (preact/compat)

Origin & Creator

Created by Jason Miller and first released in 2015, Preact was designed as a lightweight alternative to React for high-performance web applications.

Industrial Note

Preact excels in projects where bundle size, speed, and React compatibility are crucial, such as mobile-first web apps, embedded widgets, and highly interactive UIs.