Reactium + REST
The foundational web app framework Reactium can be used with our Actinium API or with and client-side API of your choosing.
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
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!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;
Last modified 2yr ago