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