How to create a Cryptocurrency App in ReactJS ?
In this article, we are going to build a cryptocurrency app that lists all the available cryptos in the market. The following application covers how to fetch information from an API and then displaying it in the form of a table to the user.
Approach: Our app contains two sections, one for searching the name of the cryptocurrency and the other for displaying all the available cryptocurrencies in the market. Initially, we will fetch all the data from the API and store it inside a state variable. Then we will map through all the data and display it in a table. Whenever a user searches for some specific crypto, we will filter that and display only the matching results.
Prerequisites: The pre-requisites for this project are:
Creating a React application and Module Installation:
Step 1: Create a react application by typing the following command in the terminal:
npx create-react-app crypto-app
Step 2: Now, go to the project folder i.e crypto-app by running the following command:
Step 3: Install Axios which is an npm package. It is a promise-based HTTP client for the browser and node.js.
npm install axios
Project Structure: It will look like this.
Example: It is the only default component of our app that contains all the app logic. Here we will be using a free opensource API (no auth required) called ‘CoinStats’ to fetch all the required data. Our app contains two sections, one for searching specific crypto and the other for listing all the cryptos in a table form. Now write down the following code in the App.js file.
Here filename is App.css
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: