# Reactium + REST

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

{% code title="reactium-hooks.js (version 1)" %}

```javascript
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
```

{% endcode %}

### Register your API

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

{% code title="reactium-hooks.js (version 2)" %}

```javascript
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'),
});
```

{% endcode %}

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.

{% code title="src/app/components/Hello/MyHelloComponent.js" %}

```javascript
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;
```

{% endcode %}