# Directual + React JS

Find the step-by-step manual and boilerplate code on [GitHub](https://github.com/directual/directual-react-boilerplate).

With Directual, you can set up your entire backend for a React App in under 15 minutes. Plus, any necessary changes to the database or API can be made almost instantly

![React app with Directual backend scheme](/files/-MBJenwEhSQeKKmM_k_x)

### User Interface (UI)

Feel free to build your UI components as you're accustomed to, using classes, hooks, etc. In your components, you can seamlessly integrate the following Directual features:

* Authentication methods: login, logout, auth context
* Getting data from the database
* Posting data into the database.

Take a look at these code patterns:

```jsx
import Directual from 'directual-api';
import { useAuth } from '../auth' // auth.js is a React-wrapper for directual-api authentication methods
//...
const api = new Directual({ apiHost: '/' })
const auth = useAuth();
//...
const dataStructure = '' // todo: insert here Sysname of your data structure
const endpoint = '' // todo: insert here Method name of your API-endpoint
//...
// Auth context:
auth.user // returns user ID
auth.sessionID // returns user session ID
auth.isAutorised() // returns true if user is authorised
auth.hasRole('role') // returns true if user.role == 'role' (see user management further)
//...
// GET request:
function getData() {
    api
      // Name of Data structure (table) in the Database
      .structure(dataStructure)
      // GET request + query params (sessionID)
      .getData(endpoint, { sessionID: auth.sessionID})
      // other possible query params: page, pageSize, sort and any custom parameter for Filtering
      .then((response) => {
        // handling response
      })
      .catch((e) => {
        // handling errors
      })
  }
//...
// POST-request:
let payload = {} // Request payload
function postData() {
    api
      // Name of Data structure (table) in the Database
      .structure(dataStructure)
      // POST request + payload + query params
      .setData(endpoint, payload, { sessionID: auth.sessionID })
      .then((response) => {
        // handling response
      })
      .catch((e) => {
        // handling errors
      })
  }
//...
```

### Directual React Module

There are two useful files in the [Directual React Boilerplate](https://github.com/directual/directual-react-boilerplate):<br>

1. [auth.js](https://github.com/directual/directual-react-boilerplate/blob/master/src/auth.js): This file provides methods such as `.user`, `.sessionID`, `.isAuthorized()`, and `.hasRole()`
2. [setupProxy.js](https://github.com/directual/directual-react-boilerplate/blob/master/src/setupProxy.js): It creates middleware proxy for directual-api to resolve CORS-related issues. To use this, you'll need to install `http-proxy-middleware`.

Additionally, make sure to edit the `.env` file to connect with your Directual app. In the `.env` file, set:

`APP_ID=`*`YOUR_APP_ID`*

You can find (or create) your App ID in the API section:

![](/files/-MBJfhkmjtHIZZbOTxAQ)

### Live Demo Example

Here is a live demo of the development process:

{% embed url="<https://youtu.be/vVZD1AeQZFE>" %}


---

# 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://readme.directual.com/directual-react-js/boilerplate-for-react-js.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.