Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Counter Component - Preact Typing CST Test
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