How to create a basic React app and make an API call?
Tags: webdev, react, api, javascript
Published: 2021-07-06 08:47:50

This article is for all the people out there who are starting with React. This can be a good first project where you will learn the following:
**1. Setup for creating React app**
**2. Creating a React app**
**3. Making an API Call using React**
**4. Setup React Developer Tools**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1stossii261y17f343s.png)


The code for this tutorial is present at:
[https://github.com/singh-shreya6/react-app](https://github.com/singh-shreya6/react-app)

If you already have IDE and node installed on your system Skip to the section on Creating a React App

#1) Setup for creating a React App
i. **Setup an IDE**: I used Visual Studio Code for implementing the following project.
Download VSCode from this link: `https://code.visualstudio.com/download`

ii. **Setup Node**: I had node previously installed on my system, however for this project, I needed a more recent version of node, so I used nvm to switch between multiple node versions.

**How to setup nvm?**
`curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
nvm --version`

**How to setup Node using NVM?**
Install the specific version that you want of node: Example:
`nvm install 12`
To switch between node version use:`nvm use 12`
To check Node version use: `node -v`
Check npx version: `npx -v`

#2) Creating a React App
Creating a React App is simply now that you have the setup.
Use npx to create a react app. This will create a sample app with all the required things in a folder named my-app. After the folder gets created, change directory to the folder and run the app.
`npx create-react-app my-app
cd mp-app
npm start`

Something like this will come up on port 3000:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl6ukjsn19tzzemv7s24.png)


#3) Make an API Call using React
Congratulations your basic React app is up and running. Now let us try to edit App.js and learn to make an API call using React.
Here I have used apublic api to make an API call, so that we don’t have to grow through the hassle of creating api-key.

API Used:
`https://api.coindesk.com/v1/bpi/currentprice.json`

API Response:
```
{
 “time”:{
 “updated”:”Jul 4, 2021 17:55:00 UTC”,
 “updatedISO”:”2021–07–04T17:55:00+00:00",
 “updateduk”:”Jul 4, 2021 at 18:55 BST”
 },
 “disclaimer”:”This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org”,
 “chartName”:”Bitcoin”,
 “bpi”:{
 “USD”:{
 “code”:”USD”,
 “symbol”:”&#36;”,
 “rate”:”35,583.4383",
 “description”:”United States Dollar”,
 “rate_float”:35583.4383
 },
 “GBP”:{
 “code”:”GBP”,
 “symbol”:”&pound;”,
 “rate”:”25,743.1231",
 “description”:”British Pound Sterling”,
 “rate_float”:25743.1231
 },
 “EUR”:{
 “code”:”EUR”,
 “symbol”:”&euro;”,
 “rate”:”29,990.2556",
 “description”:”Euro”,
 “rate_float”:29990.2556
 }
 }
}
```

Code to fetch API Response:
```
componentDidMount() { 
document.title = “Bitcoin Prices”; fetch(‘https://api.coindesk.com/v1/bpi/currentprice.json') 
      .then(results => { return results.json(); })
      .then(data => {
            const bpi = get(data, ‘bpi’, {}); 
            const time = get(data, ‘time’, {}) 
       
       this.setState({ bpi: bpi, 
                       time: time }); 
     });
}
```

Here I am calling the API in this line: `fetch(‘https://api.coindesk.com/v1/bpi/currentprice.json')`

I am extracting the bpi and time fields from Json response above and setting a state variable with the value of these attributes of json object. Our API Call is successful and I have the state variables ready to use. I created a basic table structure to display the Country Code, Description and rate from the bpi state variable. Then ran the command: npm start

Complete code is present at: `https://github.com/singh-shreya6/react-app/blob/master/src/App.js`

The server comes up with the following output.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61hqg0ac7i4z7pg67l0m.png)

#4) Setting up React Developer Tools
To see the react components we can use the extension React Developer Tools which makes debugging easy for React. Search for the extension and add it to your browser.
Once you have add it go to Inspect and switch to the Component tab and you will be able to see the resources created in your app, something like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m220w5wo28vfbabyztz.png)

Congratulations, You have learnt how to successfully create a react app, make API calls and debug using React.