Learn ASTRO with Real Code Examples

Updated Nov 21, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Astro Counter Component

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

A basic counter component in Astro using React with theme toggling.

Let’s Try →

Astro Counter with Max Limit

---
import MaxCounter from '../components/MaxCounter.jsx';
---
<html>
    <body>
        <h1>Astro Max Counter</h1>
        <MaxCounter max={5} />
    </body>
</html>

// components/MaxCounter.jsx
import { useState } from 'react';
export default function MaxCounter({ max }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => count < max && setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Counter stops incrementing after reaching a maximum value in Astro using React.

Let’s Try →

Astro Counter with Double Step

---
import StepCounter from '../components/StepCounter.jsx';
---
<html>
    <body>
        <h1>Astro Step Counter</h1>
        <StepCounter step={2} />
    </body>
</html>

// components/StepCounter.jsx
import { useState } from 'react';
export default function StepCounter({ step }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

A counter component in Astro that increments/decrements by 2 each time.

Let’s Try →

Astro Counter with History

---
import HistoryCounter from '../components/HistoryCounter.jsx';
---
<html>
    <body>
        <h1>Astro Counter History</h1>
        <HistoryCounter />
    </body>
</html>

// components/HistoryCounter.jsx
import { useState } from 'react';
export default function HistoryCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const update = (action) => { setHistory([...history, action]); };
    return (
        <div>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={() => { setCount(count + 1); update('Increment'); }}>+</button>
        <button onClick={() => { setCount(count - 1); update('Decrement'); }}>-</button>
        <button onClick={() => { setCount(0); update('Reset'); }}>Reset</button>
        </div>
    );
}

A counter component in Astro that logs each action to a history array.

Let’s Try →

Astro Counter with Auto-Increment

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

A counter in Astro that increments automatically every second using React useEffect.

Let’s Try →

Astro Counter with Conditional Theme

---
import ThemeCounter from '../components/ThemeCounter.jsx';
---
<html>
    <body>
        <h1>Astro Conditional Theme Counter</h1>
        <ThemeCounter />
    </body>
</html>

// components/ThemeCounter.jsx
import { useState } from 'react';
export default function ThemeCounter() {
    const [count, setCount] = useState(0);
    const isDark = count % 2 === 0;
    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>
        </div>
    );
}

A counter that automatically switches theme based on even/odd count in Astro.

Let’s Try →

Astro Counter with Lambda Handlers

---
import LambdaCounter from '../components/LambdaCounter.jsx';
---
<html>
    <body>
        <h1>Astro Lambda Counter</h1>
        <LambdaCounter />
    </body>
</html>

// components/LambdaCounter.jsx
import { useState } from 'react';
export default function LambdaCounter() {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Uses inline arrow functions for counter operations in Astro React component.

Let’s Try →

Astro Counter with Custom Step

---
import StepCounter from '../components/StepCounter.jsx';
---
<html>
    <body>
        <h1>Astro Custom Step Counter</h1>
        <StepCounter step={3} />
    </body>
</html>

// components/StepCounter.jsx
import { useState } from 'react';
export default function StepCounter({ step }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Counter increments or decrements by a custom step value passed as prop.

Let’s Try →

Astro Counter with Dark Mode Toggle Only

---
import DarkOnlyCounter from '../components/DarkOnlyCounter.jsx';
---
<html>
    <body>
        <h1>Astro Dark Mode Counter</h1>
        <DarkOnlyCounter />
    </body>
</html>

// components/DarkOnlyCounter.jsx
import { useState } from 'react';
export default function DarkOnlyCounter() {
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: 0</h2>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A counter where only the theme can be toggled, count is static.

Let’s Try →

Astro Counter with Combined Features

---
import FullCounter from '../components/FullCounter.jsx';
---
<html>
    <body>
        <h1>Astro Full Counter</h1>
        <FullCounter step={2} autoIncrement={true} />
    </body>
</html>

// components/FullCounter.jsx
import { useState, useEffect } from 'react';
export default function FullCounter({ step, autoIncrement }) {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const [isDark, setIsDark] = useState(false);
    const updateHistory = (action) => setHistory([...history, action]);
    useEffect(() => { if(autoIncrement) { const i = setInterval(() => { setCount(c => { updateHistory('Auto increment'); return c + step; }); }, 1000); return () => clearInterval(i); } }, []);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={() => { setCount(count + step); updateHistory('Increment'); }}>+</button>
        <button onClick={() => { setCount(count - step); updateHistory('Decrement'); }}>-</button>
        <button onClick={() => { setCount(0); updateHistory('Reset'); }}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A full-featured Astro counter: history, step, auto-increment, and theme toggle.

Let’s Try →

Code Sample Descriptions

Astro Counter Component

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

A basic counter component in Astro using React with theme toggling.

Let’s Try →

Astro Counter with Max Limit

---
import MaxCounter from '../components/MaxCounter.jsx';
---
<html>
    <body>
        <h1>Astro Max Counter</h1>
        <MaxCounter max={5} />
    </body>
</html>

// components/MaxCounter.jsx
import { useState } from 'react';
export default function MaxCounter({ max }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => count < max && setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Counter stops incrementing after reaching a maximum value in Astro using React.

Let’s Try →

Astro Counter with Double Step

---
import StepCounter from '../components/StepCounter.jsx';
---
<html>
    <body>
        <h1>Astro Step Counter</h1>
        <StepCounter step={2} />
    </body>
</html>

// components/StepCounter.jsx
import { useState } from 'react';
export default function StepCounter({ step }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

A counter component in Astro that increments/decrements by 2 each time.

Let’s Try →

Astro Counter with History

---
import HistoryCounter from '../components/HistoryCounter.jsx';
---
<html>
    <body>
        <h1>Astro Counter History</h1>
        <HistoryCounter />
    </body>
</html>

// components/HistoryCounter.jsx
import { useState } from 'react';
export default function HistoryCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const update = (action) => { setHistory([...history, action]); };
    return (
        <div>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={() => { setCount(count + 1); update('Increment'); }}>+</button>
        <button onClick={() => { setCount(count - 1); update('Decrement'); }}>-</button>
        <button onClick={() => { setCount(0); update('Reset'); }}>Reset</button>
        </div>
    );
}

A counter component in Astro that logs each action to a history array.

Let’s Try →

Astro Counter with Auto-Increment

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

A counter in Astro that increments automatically every second using React useEffect.

Let’s Try →

Astro Counter with Conditional Theme

---
import ThemeCounter from '../components/ThemeCounter.jsx';
---
<html>
    <body>
        <h1>Astro Conditional Theme Counter</h1>
        <ThemeCounter />
    </body>
</html>

// components/ThemeCounter.jsx
import { useState } from 'react';
export default function ThemeCounter() {
    const [count, setCount] = useState(0);
    const isDark = count % 2 === 0;
    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>
        </div>
    );
}

A counter that automatically switches theme based on even/odd count in Astro.

Let’s Try →

Astro Counter with Lambda Handlers

---
import LambdaCounter from '../components/LambdaCounter.jsx';
---
<html>
    <body>
        <h1>Astro Lambda Counter</h1>
        <LambdaCounter />
    </body>
</html>

// components/LambdaCounter.jsx
import { useState } from 'react';
export default function LambdaCounter() {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Uses inline arrow functions for counter operations in Astro React component.

Let’s Try →

Astro Counter with Custom Step

---
import StepCounter from '../components/StepCounter.jsx';
---
<html>
    <body>
        <h1>Astro Custom Step Counter</h1>
        <StepCounter step={3} />
    </body>
</html>

// components/StepCounter.jsx
import { useState } from 'react';
export default function StepCounter({ step }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Counter increments or decrements by a custom step value passed as prop.

Let’s Try →

Astro Counter with Dark Mode Toggle Only

---
import DarkOnlyCounter from '../components/DarkOnlyCounter.jsx';
---
<html>
    <body>
        <h1>Astro Dark Mode Counter</h1>
        <DarkOnlyCounter />
    </body>
</html>

// components/DarkOnlyCounter.jsx
import { useState } from 'react';
export default function DarkOnlyCounter() {
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: 0</h2>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A counter where only the theme can be toggled, count is static.

Let’s Try →

Astro Counter with Combined Features

---
import FullCounter from '../components/FullCounter.jsx';
---
<html>
    <body>
        <h1>Astro Full Counter</h1>
        <FullCounter step={2} autoIncrement={true} />
    </body>
</html>

// components/FullCounter.jsx
import { useState, useEffect } from 'react';
export default function FullCounter({ step, autoIncrement }) {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const [isDark, setIsDark] = useState(false);
    const updateHistory = (action) => setHistory([...history, action]);
    useEffect(() => { if(autoIncrement) { const i = setInterval(() => { setCount(c => { updateHistory('Auto increment'); return c + step; }); }, 1000); return () => clearInterval(i); } }, []);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={() => { setCount(count + step); updateHistory('Increment'); }}>+</button>
        <button onClick={() => { setCount(count - step); updateHistory('Decrement'); }}>-</button>
        <button onClick={() => { setCount(0); updateHistory('Reset'); }}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A full-featured Astro counter: history, step, auto-increment, and theme toggle.

Let’s Try →