> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/directual-react-js/boilerplate-for-react-js.md).

# 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>" %}