React JS & Bearer: Build and Manage The Star Wars API Integration

These React JS blogs are a part of my personal journey with React JS.

This task involves using the Bearer developer tool to build and manage the API integration for this React JS App. The API used is from https://swapi.co/ and the starships end point is used

What is Bearer?

“Bearer provides a universal API client (currently available in NodeJS, Ruby, Python, and PHP) able to consume any APIs with out-of-the-box managed authentication flow (OAuth, etc…). In addition, Bearer provides a monitoring platform to manage API integrations, from credentials to metrics and complete logging for every API call.”

Getting Started

To start using Bearer, sign in to the dashboard. Then, inside the APIs section, click on Add API. Then, add a custom API using the Configure a custom API link. Fill out the form and save so that the fields are as follows:

Setting up the Project

• Ensure that you have Node.js installed on your PC. To check,

run npx — help. If a list of options is returned, you’re good. If not , please download Node.js.

• Next , go into your desired directory and run the following command to create your project,

create-react-app reactapi

• Open the project you just created , called reactapi, using a text editor such as Visual Studio Code.

In your newly created project, go to the App.js file and make the following changes so that you are left with just the following code:

class App extends Component {
render() {return 
(<div className="App">
</div>

)
;}
}
export default App;

Install Bearer’s client

Firstly, you should run in the terminal, in your apps directory :

both:

npm install @bearer/js

and:

npm install @bearer/react

Initialising

Thereafter, include the following to the top of the App.js file:

import * as React from “react”;
import bearer from “@bearer/js”;
const bearerClient = bearer(BEARER_PUBLISHABLE_KEY);
const x = bearerClient.integration("y"); 
//change x to your liking and replace y with your api integration ID

Replace the BEARER_PUBLISHABLE_KEY with your Publishable Key that can be found on your Developer Keys page.

The Request

Finally, include the rest of the code to make a request.

import * as React from "react";
import bearer from "@bearer/js";
const bearerClient = bearer(BEARER_PUBLISHABLE_KEY);
const starwars = bearerClient.integration("starwars");
class App extends React.Component
{
  constructor(props) {
    super(props);
    this.state = {
      data: []
   }
}
fetch = () => {
    starwars
      .get("/starships")
      .then(({ data }) => {
        this.setState({ data: JSON.stringify(data) });
      });
  };
UNSAFE_componentWillMount() {
    this.fetch();
  }
render() {
     return <pre>{this.state.data}</pre>;
   }
 }
export default App;

In your terminal run , npm start and in the browser window that pops up you should see the following, showing a successful render:

Using the Bearer’s client, each API calls is now logged and monitored in realtime.

The complete example is hosted on GitHub:

zorgonred/Bearer_api_starwars

Thank you for reading! Feel free to make any other suggestions or recommendations for future challenges. Leave a few claps if you enjoyed it !