Counter with Auto-Increment - Astro Typing CST Test
Loading…
Counter with Auto-Increment — Astro Code
A counter in Astro that increments automatically every second using React useEffect.
---
import AutoCounter from '../components/AutoCounter.jsx';
---
<html>
<body>
<h1>Astro Auto Counter</h1>
<AutoCounter />
</body>
</html>
// components/AutoCounter.jsx
import { useState, useEffect } from 'react';
export default function AutoCounter() {
const [count, setCount] = useState(0);
useEffect(() => { const interval = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(interval); }, []);
return <h2>Counter: {count}</h2>;
}Astro Language Guide
Astro is a modern, content-focused web framework designed for building fast, optimized websites using a 'bring your own framework' philosophy and a server-first, zero-JS-by-default approach.
Primary Use Cases
- ▸Marketing and landing pages
- ▸Blogs and documentation sites
- ▸Static content-heavy websites
- ▸Hybrid static + server-rendered content
- ▸Sites using multiple UI frameworks together
Notable Features
- ▸Zero-JS by default
- ▸Island architecture
- ▸Partial hydration for interactive components
- ▸Markdown & MDX first-class support
- ▸Framework-agnostic component system
Origin & Creator
Created by Fred Schott and the Astro core team, originally launched in 2021 as an open-source initiative focused on performance-first web development.
Industrial Note
Astro excels in content-heavy sites like blogs, documentation, marketing pages, and any project prioritizing high performance and minimal client-side JavaScript.