Building my first react project

This guide is designed to help you build a hot coin detector, using which one can get ten best cryptocurrencies of the day based on the percentage change in price in last 24 hours.

Setup for react app

Initialise react app in command propmt using the command given below

Designing logo

Design logo for the app on canva and remove its background on remove.bg

Getting started with react

Render App component in index.js file.
In App.js file, declare an async function called fetchCoins which will have two parts:
1) try
2) catch

Fisrt part of async function (try) will return a promise. Here async/await is used alongwith fetch command for fetching api from CoinGecko. Await makes the code wait until the promise is settled and its result is returned. It suspends the function execution until promise settles and resumes after getting result.

Using map, extract necessary information from the result and store it in an array. Sort this array using sort method in decreasing order on the basis of price change and slice it to get top 10 coins.
Declare state with properties:
1) to store list of coins
2) status of webpage
Initially, there will be an empty array and status will be loading. Upon slicing, update the state with the new array of ten coins and status as 'success'.

Second part of async funtion (catch) is used to catch any error thrown while fetching api. it then updates the status as 'failed'.

Then componentDidMount is used, inside which the fetchCoins function is called. It invokes immediately after the App component is mounted. So, setTimeout is used to provide a delay of few seconds in fetching api. This helps in showing the loading status of webpage for first few seconds.

For rendering, ternary operator is used which checks the status of webpage, and then rendering is divided in three parts. First for the loading of page, second for the time any error occurs and third when the coins are fetched successfully. Two buttons are provided for buying these coins from Binance and CoinDCX.

Here's a glimpse of the app.