Full Featured Counter - Preact Typing CST Test

Loading…

Full Featured Counter — Preact Code

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

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

function FullCounter() {
	const [count, setCount] = useState(0);
	const [history, setHistory] = useState([]);
	const [isDark, setIsDark] = useState(false);
	const step = 2, max = 10;
	useEffect(() => { const interval = setInterval(() => { setCount(c => { let n = c + step; if(n > max) n = 0; setHistory(h => [...h,'Auto Increment']); return n; }); },1000); return () => clearInterval(interval); }, []);
	const increment = () => { setCount(c => c + step); setHistory(h => [...h,'Increment']); };
	const decrement = () => { setCount(c => c - step); setHistory(h => [...h,'Decrement']); };
	const reset = () => { setCount(0); setHistory(h => [...h,'Reset']); };
	return (
		<div className={isDark ? 'dark-theme' : 'light-theme'}>
		<h2>Counter: {count}</h2>
		<div>History: {history.join(', ')}</div>
		<button onClick={increment}>+</button>
		<button onClick={decrement}>-</button>
		<button onClick={reset}>Reset</button>
		<button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
		</div>
	);
}

export default FullCounter;

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 Component 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

Practice Other Languages

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

Full Featured Counter — Preact Code

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

import { h } from 'preact'; import { useState, useEffect } from 'preact/hooks'; function FullCounter() { const [count, setCount] = useState(0); const [history, setHistory] = useState([]); const [isDark, setIsDark] = useState(false); const step = 2, max = 10; useEffect(() => { const interval = setInterval(() => { setCount(c => { let n = c + step; if(n > max) n = 0; setHistory(h => [...h,'Auto Increment']); return n; }); },1000); return () => clearInterval(interval); }, []); const increment = () => { setCount(c => c + step); setHistory(h => [...h,'Increment']); }; const decrement = () => { setCount(c => c - step); setHistory(h => [...h,'Decrement']); }; const reset = () => { setCount(0); setHistory(h => [...h,'Reset']); }; return ( <div className={isDark ? 'dark-theme' : 'light-theme'}> <h2>Counter: {count}</h2> <div>History: {history.join(', ')}</div> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={reset}>Reset</button> <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button> </div> ); } export default FullCounter;

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.