Reactium
  • Quick Start
  • Discuss
  • Approach
    • Architecture
    • DDD Introduction
    • Domain Model
  • Reactium App Foundation
    • Reactium Guides
      • Creating a Simple Single Page Web App (SPA)
      • Creating a Sassy Style Sheet
      • Reactium Core
      • Reactium + Actinium (APIs)
      • Reactium + REST
      • Plugin Module Guide
      • Animating React Routes
      • Reactium in Production
    • Reactium Domain Model
      • Basic Domain Model
      • Runtime Domain Model
      • Buildtime Domain Model
    • Reactium SDK
      • Reactium SDK Reference
    • Updating Reactium
  • Installing Foundations
    • Before You Install
    • Install Reactium
    • Install Actinium
  • Reactium API Foundation (Actinium)
    • Actinium Core
    • Setting up your User
    • Actinium SDK
      • Actinium SDK Reference
    • Actinium Domain Model
    • Extending
    • Updating
    • Live Query
  • Reactium Toolkit
    • Overview
    • Installation
    • Configuration
    • Customization
    • Creating Elements
      • Sidebar Elements
      • Toolbar Elements
      • Documentation Elements
    • Components
      • Sidebar
      • MenuLink
      • Element
      • Code
      • Markdown
      • Icon
    • Toolkit SDK
Powered by GitBook
On this page
  • Creating a simple API
  • Register your API
  • Use your API
  1. Reactium App Foundation
  2. Reactium Guides

Reactium + REST

The foundational web app framework Reactium can be used with our Actinium API or with and client-side API of your choosing.

Creating a simple API

Use axios, native fetch, or a library of your choosing, in some API domain folder of your choice, generate a new reactium-hooks.js file.

reactium-hooks.js (version 1)
import Reactium from 'reactium-core/sdk';
import axios from 'axios';

const helloAPI = {
  hello() {
    return axios.get('http://demo7132150.mockable.io/hello');
  }
};

// TODO: register API here

Register your API

The above is incomplete. In order to make this API available to the rest of your app, let's register it.

reactium-hooks.js (version 2)
import Reactium from 'reactium-core/sdk';
import axios from 'axios';

const helloAPI = {
  contructor(baseURL) {
    this.axios = axios.create({
      baseURL,
    });
  }
  hello() {
    return this.axios.get('/hello');
  }
};

Reactium.API.register({
  name: 'helloAPI',
  api: new helloAPI('http://demo7132150.mockable.io'),
});

Now that we've registered our REST API with the Reactium SDK, we can use it throughout out app as Reactium.helloAPI. Congrats! You just extended the Reactium SDK with your own API!

Use your API

Let's say we want to surface our /hello API endpoint in a React component. We can now access our helloAPI on the Reactium SDK directly.

src/app/components/Hello/MyHelloComponent.js
import React, { useState } from 'react';
import Reactium, { useAsyncEffect } from 'reactium-core/sdk';

const MyHelloComponent = ({ startingMsg = ''}) => {
  const [ message, setMessage ] = useState(startingMsg);
  
  useAsyncEffect(async mounted => {
    let newMessage;
    try {
      const { data } = await Reactium.helloAPI.hello();
      newMessage = data.msg;
    } catch (error) {
      newMessage = 'Oh no!';
    }
    
    if (mounted()) {
      setMessage(newMessage);
    }
  });
  
  return (<div>{message}</div>);
};

MyHelloComponent.defaultProps = {
  startingMsg: 'Waiting...',
};

export default MyHelloComponent;
PreviousReactium + Actinium (APIs)NextPlugin Module Guide

Last updated 4 years ago