Quickstart: React

Overview#

This is a brief example how you can integrate Architect SDK into your existing React application.

Install Architect SDK#

Install Architect SDK via:

npm
Yarn

npm install architect-sdk

You should see architect-sdk dependency added to package.json file¹.

Setup environment#

In your .env² file add this line:

REACT_APP_BASE_URL=https://<your-app-id>.essentialz.cloud

After adding REACT_APP_BASE_URL enviroment variable, you are ready to proceed with the creation of your Architect Service.

Setup Architect client#

Create new file called architectConfig.ts inside src folder. In order to take full advantage of our type system you should define resources type and pass them to architectSDK configuration. For example if you are making todo app, you should define Todo type and pass it to architectSDK like this:

import architectSDK, { ArchitectResource } from "architect-sdk";

export type ArchitectSchema = {
  todos: ArchitectResource<Todo>;
};

export const client = architectSDK<ArchitectSchema>({
  baseUrl: process.env.REACT_APP_BASE_URL,
});

Your resource type or in this case Todo type can contain any of the fields you want your resource to contain³. Like the following:

type Todo = {
    /*
        Your resource fields and types
    */
}

You will now have full autocomplete for todos (and any additional resources you define) in editor of your choice.

Setup Architect SDK service#

Create a new file called architect-sdk.service.ts and place it in your app folder. With basic CRUD operations architect-sdk.service.ts might look like this:

// ArchitectSDK client
import { client } from "../architectConfig";

// Types
import { Todo } from "../types/Todo";

export class ArchitectService {
  private _architectSDK = client;
  constructor() {}

  // Get all resources
  public getTodos() {
    return this._architectSDK.todos.getAll();
  }

  // Get a single resource by its id
  public getTodo(id: string) {
    return this._architectSDK.todos.get(id);
  }

  // Create a new resource
  public createTodo(todo: Todo) {
    return this._architectSDK.todos.create(todo);
  }

  // Remove a certain resource with the given id
  public deleteTodo(id: string) {
    return this._architectSDK.todos.delete(id);
  }

  // Update a certain resource with the given id
  public updateTodo(id: string, todo: Todo) {
    return this._architectSDK.todos.update(id, todo);
  }
}

And ArchitectService can be successfully imported in your React component:

import React from 'react';

// ArchitectSDK Service
import { ArchitectService } from "./architect-sdk.service";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.architectService = new ArchitectService();
    }

    render() {
        /*
            Call your service methods and render your component
        */
    }
}

Conclusion#

Integrating Architect SDK into your application is easy using simple steps provided above. If you want to see how small phonebook application utilises Architect SDK go and check link to tutorial. There you can see how authorization, CRUD operations and file upload can be handled in React applications.

In order to use yarn you first need to configure CLI to use it. Go to this blog for more details.↩
To setup your enviroment variables, follow this tutorial ↩
Architect imports createdAt, updatedAt and id fields automatically into your resource.↩