Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emrekardaslar/astro-preact
Astro + Preact
https://github.com/emrekardaslar/astro-preact
astro preact ssr
Last synced: 10 days ago
JSON representation
Astro + Preact
- Host: GitHub
- URL: https://github.com/emrekardaslar/astro-preact
- Owner: emrekardaslar
- Created: 2025-01-24T06:36:11.000Z (11 days ago)
- Default Branch: main
- Last Pushed: 2025-01-24T06:47:30.000Z (11 days ago)
- Last Synced: 2025-01-24T07:27:27.486Z (11 days ago)
- Topics: astro, preact, ssr
- Language: JavaScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Astro + Preact Counter with State Management
This is an example project using Astro and Preact to demonstrate state management with `useContext` and `useReducer`. The application includes a simple counter with a modular structure for actions and reducers.
## Project Structure
```
src/
actions/
counterActions.js # Action types for the counter
reducers/
counterReducer.js # Reducer logic for the counter
components/
Counter.jsx # Counter buttons to increment, decrement, and reset
CounterDisplay.jsx # Displays the current count
ReactIsland.jsx # Wrapper for CounterProvider and interactive components
contexts/
CounterContext.jsx # Context and provider for state management
pages/
index.astro # Main page wrapping the ReactIsland component
```
## Features
- **Astro Integration**: Uses Astro's partial hydration feature to render Preact components.
- **State Management**: Implements `useContext` and `useReducer` for clean and reusable state management.
- **Modular Design**: Separates actions and reducers into dedicated folders for scalability.
## Getting Started
### Prerequisites
Ensure you have the following installed:
- [Node.js](https://nodejs.org/) (v16 or later)
- npm (comes with Node.js)
### Installation
1. Clone the repository:
```bash
git clone
cd
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open the app in your browser:
```
http://localhost:3000
```
## Usage
The app provides a simple counter with three buttons:
- `+`: Increment the counter.
- `-`: Decrement the counter.
- `Reset`: Reset the counter to `0`.
The state is managed using `useReducer` and shared via `useContext` within the `CounterProvider`.
## Folder Highlights
### `actions/`
Defines reusable action types (e.g., `INCREMENT`, `DECREMENT`, `RESET`).
### `reducers/`
Contains the logic to handle state transitions based on dispatched actions.
### `contexts/`
Defines the `CounterContext` and `CounterProvider` to encapsulate and share state across components.
## Contributing
Feel free to submit issues or contribute to the project with pull requests.