React CryptoCurrency Tutorial – Display Exchange Gegevens with an API
By Gary simon – Sep 26, 2017
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 Nodejs.org 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 <,span class=”right”>,. <,/span>, 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.