58 lines
2.0 KiB
Markdown
58 lines
2.0 KiB
Markdown
# 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
|