# 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](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MBJeR1nsShyc7LYwpQ0%2F-MBJenwEhSQeKKmM_k_x%2Fimage.png?alt=media\&token=17286319-17b6-4bfc-8d0f-4b06994bcfa4)

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

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MBJeR1nsShyc7LYwpQ0%2F-MBJfhkmjtHIZZbOTxAQ%2Fimage.png?alt=media\&token=4ba520dc-c79b-47be-b30f-350ceddd969e)

### Live Demo Example

Here is a live demo of the development process:

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