# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexbase.in/flexbase-mcp-ai-prompts/react-js-ui-guide-prompts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.