# Design Decision: Complete React Example with Actual Code
**Date:** 2024-02-24
**Scope:** src/api/routes.py tool_instructions
## Problem
Model is still not following instructions:
1. Tries `npm install` before creating package.json
2. Still tries `npx create-react-app` despite being told not to
3. Instructions have placeholders like "..." and "etc." which models don't understand
## Root Cause
The current instructions say:
```
TOOL: write
ARGUMENTS: {"filePath": "myapp/package.json", "content": "{\"name\": \"myapp\", \"version\": \"1.0.0\", \"dependencies\": {\"react\": \"^18.0.0\", \"react-dom\": \"^18.0.0\"}}"}
[Continue with src/index.js, src/App.js, public/index.html, etc.]
```
**Problem:** "etc." and "..." are meaningless to LLMs. They need concrete examples.
## Solution
Provide a **complete, working, minimal React example** with actual file contents:
1. Exact sequence: mkdir → write package.json → write src/App.js → write src/index.js → write public/index.html → npm install
2. Actual file content, not placeholders
3. Minimal viable React app (not full create-react-app structure)
## Implementation
Replace vague example with complete working code:
```
**COMPLETE REACT HELLO WORLD EXAMPLE:**
User: "Create a React Hello World app"
Step 1 - Create directory:
TOOL: bash
ARGUMENTS: {"command": "mkdir myapp"}
Step 2 - Create package.json (MUST do this BEFORE npm install):
TOOL: write
ARGUMENTS: {"filePath": "myapp/package.json", "content": "{\"name\": \"myapp\", \"version\": \"1.0.0\", \"private\": true, \"dependencies\": {\"react\": \"^18.2.0\", \"react-dom\": \"^18.2.0\"}, \"scripts\": {\"start\": \"react-scripts start\", \"build\": \"react-scripts build\"}, \"devDependencies\": {\"react-scripts\": \"5.0.1\"}}"}
Step 3 - Create src directory:
TOOL: bash
ARGUMENTS: {"command": "mkdir myapp/src"}
Step 4 - Create App.js:
TOOL: write
ARGUMENTS: {"filePath": "myapp/src/App.js", "content": "import React from 'react';\n\nfunction App() {\n return (\n \n
Hello World
\n
Welcome to my React app!
\n