Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Counter Component - Astro Typing CST Test
Counter Component — Astro Code
A basic counter component in Astro using React with theme toggling.
---
import Counter from '../components/Counter.jsx';
---
<html>
<body>
<h1>Astro Counter Page</h1>
<Counter />
</body>
</html>
// components/Counter.jsx
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
const [isDark, setIsDark] = useState(false);
return (
<div className={isDark ? 'dark-theme' : 'light-theme'}>
<h2>Counter: {count}</h2>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
<button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
</div>
);
}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.
Quick Explain
- ▸Astro helps developers build highly performant websites with minimal JavaScript shipped to the client.
- ▸It supports mixing multiple UI frameworks (React, Vue, Svelte, etc.) in one project.
- ▸Astro emphasizes server rendering, static generation, and island architecture for partial hydration.
Core Features
- ▸File-based routing
- ▸Static Site Generation (SSG)
- ▸SSR optional mode
- ▸Components as server-rendered templates
- ▸Built-in content collections
Learning Path
- ▸Learn Astro components & syntax
- ▸Understand island architecture
- ▸Use content collections
- ▸Add framework islands (React/Vue/Svelte)
- ▸Deploy SSG or SSR site
Practical Examples
- ▸Markdown-powered blog
- ▸Documentation site using MDX
- ▸Marketing homepage with React islands
- ▸Static e-commerce catalog
- ▸Hybrid SSR + SSG product site
Comparisons
- ▸More performance-focused than Next.js
- ▸Simpler than Nuxt or SvelteKit
- ▸Better for static sites than React-based tools
- ▸More flexible in framework usage
- ▸Less suited for complex apps than full-stack frameworks
Strengths
- ▸Extremely fast performance
- ▸Little to no JavaScript shipped by default
- ▸Supports multiple frameworks together
- ▸Great for SEO-heavy sites
- ▸Best-in-class markdown ecosystem
Limitations
- ▸Not ideal for full dynamic web apps
- ▸Requires islands for interactivity
- ▸SSR is available but not as feature-rich as full-stack frameworks
- ▸Tooling ecosystem smaller than React/Next.js
- ▸Complex for highly interactive dashboards or apps
When NOT to Use
- ▸Highly interactive dashboards
- ▸Complex SPAs requiring heavy client-side JS
- ▸Real-time apps
- ▸Apps that depend on client-side routing
- ▸Server-heavy full-stack applications
Cheat Sheet
- ▸`---` - frontmatter block
- ▸`client:load` - hydrate on load
- ▸`client:idle` - hydrate when idle
- ▸`client:visible` - hydrate on visibility
- ▸src/pages - routes by file path
FAQ
- ▸Does Astro ship JavaScript by default?
- ▸No, JS is opt-in.
- ▸Can I use React/Vue/Svelte?
- ▸Yes, all major frameworks are supported.
- ▸Is Astro good for blogs?
- ▸It’s one of the best frameworks for content sites.
- ▸Does Astro support SSR?
- ▸Yes, with adapters.
- ▸Is Astro beginner friendly?
- ▸Very - simpler than most JS frameworks.
30-Day Skill Plan
- ▸Week 1: Astro basics + components
- ▸Week 2: Routing, layouts, MDX
- ▸Week 3: Islands + framework hydration
- ▸Week 4: SSR + adapters
- ▸Week 5: Optimization + deployment
Final Summary
- ▸Astro is a performance-focused framework for content-rich websites.
- ▸It uses zero-JS-by-default and island architecture.
- ▸Supports multiple frameworks simultaneously.
- ▸Ideal for blogs, docs, and static sites.
- ▸One of the fastest-growing frontend tools.
Project Structure
- ▸src/pages - routes
- ▸src/components - components
- ▸src/layouts - page layouts
- ▸src/content - content collections
- ▸astro.config.mjs - framework config
Monetization
- ▸Theme/templates marketplace
- ▸Freelance landing page builds
- ▸Docs site development
- ▸SEO-focused business websites
- ▸Astro consulting or integration services
Productivity Tips
- ▸Keep islands small and focused
- ▸Use MDX for mixed content + components
- ▸Prefer content collections for data
- ▸Leverage Astro integrations instead of manual setup
- ▸Cache API fetches during build
Basic Concepts
- ▸Astro components (.astro files)
- ▸Islands & partial hydration
- ▸Routing via filesystem
- ▸Layouts & content collections
- ▸Markdown & MDX integration