> For the complete documentation index, see [llms.txt](https://docs.flexbase.in/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flexbase.in/flexbase-mcp-ai-prompts/react-js-ui-guide-prompts.md).

# React Js UI Guide Prompts

> Implement FlexBase UI with React: hooks, services, forms, dialogs, authentication, API response handling, and more.

## How to Use

Tell your AI agent what React UI you want to build. It will load the right conventions and guide sections automatically.

**Example prompts you can give your AI agent:**

```
Create the API service for the Products module
```

```
Build a list component with pagination for Customers
```

```
Create a custom hook for the Orders API
```

```
Set up the authentication context
```

```
Fix the API response unwrapping in my base service
```

```
Create a form with React Hook Form for Order editing
```

```
Implement the complete React UI for Invoices
```

***

## Task Catalog

### Critical Rules (Applied Automatically)

* **NEVER remove `id` from Update/Delete DTOs** — causes silent API failures
* **All IDs are `string` type** in TypeScript interfaces
* **ApiResponse\<T> wrapper** — always unwrap `.result` from API responses

***

### Service Tasks

| Task                        | Goal                                                      |
| --------------------------- | --------------------------------------------------------- |
| **Create Base API Service** | Axios/fetch base with response unwrapping, error handling |
| **Create Module Service**   | Entity-specific service extending base                    |
| **Create Custom Hook**      | useEntity hook wrapping API calls                         |
| **Review API Services**     | Audit services for pattern violations                     |

### Authentication Tasks

| Task                       | Goal                                   |
| -------------------------- | -------------------------------------- |
| **Token Storage Service**  | Secure token storage and retrieval     |
| **Authentication Service** | Login/logout/refresh token flows       |
| **Auth Context**           | React Context for authentication state |

### Component Tasks

| Task                              | Goal                                           |
| --------------------------------- | ---------------------------------------------- |
| **Create List Component**         | Data table with pagination, sorting, filtering |
| **Create Form (React Hook Form)** | Form with validation                           |
| **Autocomplete for Foreign Keys** | Lookup/search for related entities             |

### Dialog Tasks

| Task                       | Goal                          |
| -------------------------- | ----------------------------- |
| **Create Dialog Service**  | Centralized dialog management |
| **Create Modal Component** | Modal with form/view content  |

### Routing & State Tasks

| Task                        | Goal                            |
| --------------------------- | ------------------------------- |
| **Configure Routes**        | React Router setup              |
| **Private Route Component** | Auth-protected routes           |
| **Context API State**       | State with Context + useReducer |
| **Redux State**             | Redux Toolkit state management  |

### Complete Implementation Tasks

| Task                        | Goal                                     |
| --------------------------- | ---------------------------------------- |
| **Complete Entity UI**      | Full UI: list + form + service + routing |
| **Complete Project Review** | Full audit against React guide           |
| **Sync DTOs with API**      | Compare React interfaces with API DTOs   |

***

## Related

* **API patterns (build API first):** [FlexBase API Patterns](/flexbase-mcp-ai-prompts/flexbase-api-guide-prompts.md)
* **Generate UI from extraction JSON:** [Implementation Completion](/flexbase-mcp-ai-prompts/implementation-completion-prompts.md)
* **Blazor alternative:** [Blazor FluentUI](/flexbase-mcp-ai-prompts/blazor-fluent-ui-guide-prompts.md)
* **Angular alternative:** [Angular UI](/flexbase-mcp-ai-prompts/angular-ui-guide-prompts.md)