Is crypto mining worth it

how to get rich off bitcoin

React CryptoCurrency Tutorial – Display Exchange Gegevens with an API

By Gary simon – Sep 26, 2017

Being that React is perhaps the most popular modern frontend javascript framework, then it makes finish sense to begin using it to develop for the growing CryptoCurrency industry. Ter this tutorial, you’re going to learn how to use React to connect to a 100% free, public cryptocurrency API called CryptoCompare.

Also, I have covered this same precies process for the other Two popular javascript frameworks (Angular and Vue.js):

Let’s get embarked.

If you choose watching a movie tutorial instead..


React requires Knot.js with NPM (Knot Package Manager). To check whether or not you have it, go to your instruction line or console and type:

If either of thesis directives are unrecognized, visit and download the suitable installer based on your OS. Install it with the default settings and reload your directive line, you’re set.

Installing the React CLI & Embarking the Project

The React CLI (Instruction Line Interface) permits you to quickly and lightly create a React project. Very first, wij need to use NPM to install it:

Once finished, wij’ll use the CLI to begin a fresh React project:

This will embark a fresh React app with the project and folder name being react-crypto.

If you have yarn, you can use yarn commence or npm embark to launch a local development server with the React project ready to go ter the browser.

Connecting to the CryptoCompare API

Next, wij need to install the HTTP client library Axios. This will permit us to make a get call to the desired endpoint to fetch the cryptocurrency information.

Ter the console, type:

Open up your code editor (I use Visual Studio Code), and navigate to /src/App.js which is where wij’ll work for the remainder of this tutorial.

At the top of this verkeersopstopping, wij need to invoer axios:

Wij need to add a constructor to pass ter our props(or properties). So, just inwards of our class spil shown below, wij add:

Notice wij have defined a cryptos property. This will hold the response gegevens from the API.

Next, wij use componentDidMount() function to call axios.get:

The URL spil shown ter the very first argument of axios.get is one of many different endpoints that you can use based on the CryptoCompare API documentation. Now would be a good time to view this document and detect the various cryptocurrency gegevens you can retrieve for your app.

Te our example, wij’re simply using pricemulti for Bitcoin, Ethereum and IOTA. Then, wij’re requesting the USD (US Dollar) value omschrijving for each of the specified currencies.

Wij’re using console.loom to vertoning the total response of the request, which is useful when constructing the template view.

Defining the Template

Inwards of the render() section of the component, wij need to take our cryptos property, which is essentially an object of objects, and iterate through them.

Switch the render terugwedstrijd HTML to look like this:

Wij’re using Object.keys which gives us access to the object keys, along with .opbergmap to iterate overheen the object.

The displays the cryptocurrency acronym (BTC, ETH, IOT, etc..) and wij use the key on our cryptos object, along with .USD to display the dollar amount.

Open up the /src/App.css verkeersopstopping to apply some truly quick rulesets:

Zindelijk Number Formatting

Notice how ugly the number formatting is for the USD value amounts.

Go to your console te the project folder and use npm to install a number formatting package:

Invoer it at the top of /src/App.js:

Next, substitute the contents of &lt,span class=”right”&gt,. &lt,/span&gt, to:

This will give you decently formatted USD amounts.


Hopefully, this brief tutorial helped give you a quick jumpstart into the world of React development and cryptocurrency.

Related movie: How to Trade Bitcoin, Ethereum, and LiteCoin for FREE (GDAX Limit order tutorial)

Leave a Reply

Your email address will not be published. Required fields are marked *