# React App Generator Example

This example demonstrates how to use Masonry's multi-file template generation to create a complete React application with components, pages, and API integration.

## What This Example Does

This template generator creates:
- **React Pages** - One file per page definition (public and admin layouts)
- **React Components** - Individual component files for each component/section
- **API Client** - Generated API functions for each entity
- **Type Definitions** - TypeScript interfaces for entities
- **Routing** - React Router setup based on page definitions

## Files Generated

The manifest defines outputs that generate:
- `src/pages/` - Page components based on layout type
- `src/components/` - Individual component files  
- `src/api/` - API client functions per entity
- `src/types/` - TypeScript interfaces per entity
- `src/router.tsx` - React Router configuration
- `package.json` - Project dependencies

## How to Use

1. **Create a Masonry file** (see `blog-app.masonry` example)
2. **Run the generator**:
   ```bash
   ../../masonry.exe generate-multi \
     --input blog-app.masonry \
     --template-dir templates \
     --manifest manifest.yaml \
     --output-dir ./generated-app
   ```
3. **Install dependencies and run**:
   ```bash
   cd generated-app
   npm install
   npm start
   ```

## Template Features Demonstrated

- **Per-item iteration** - Generate one file per page, entity, component
- **Conditional generation** - Different templates for admin vs public layouts
- **Dynamic paths** - File paths based on item properties
- **Nested template composition** - Components using other templates
- **Template functions** - String manipulation, type conversion

## Extending This Example

You can extend this template by:
- Adding more layout types (mobile, desktop, etc.)
- Creating specialized component templates (forms, tables, etc.)
- Adding test file generation
- Including CSS module generation
- Adding Docker/deployment configurations