After The Tutorial — The First React App
Just recently, I finally finished up Code Academy’s React tutorial. I felt that I had learned enough of React’s syntax and how it works to actually begin working on a project.
This is always the tough part.
We’ve all been there before. You’re doing a coding tutorial on a new language or framework and starting to feel pretty good about what you’re learning. But then the tutorial ends and… you have no idea where to go afterwards. So you resort to the option everyone starts out with: A Todo/Planner App.
It makes sense; building one is pretty straightforward, fairly customizable and extensible, and incorporates a lot of different concepts that you learn from a tutorial. But a todo app is so boring and has been done a million times before. So, I thought I’d do something different. While I was brainstorming ideas I thought to myself
“What if I made something involving cryptocurrency??”
I mean cryptocurrency is at an all time high in both price and popularity. Also, nothing makes you sound like a savvy tech nerd than saying you dabble in cryptocurrency. Personally, I decided it would be cool to test out my React knowledge by building a 30 day price chart of Ethereum. I figured that getting a graph described would require the implementation of a number of React concepts that you pick up in a tutorial such as:
- writing HTML using JSX
- figuring out a way to manage CSS
- Rendering multiple components
- lifecycle methods
So let’s get going.
The first step was to get the price history of Ethereum. I found Poloniex to have a very straightforward and easy to use API. To make the requests, I used the popular HTTP client axios. Here’s a little snippet of retrieving the last 30 day prices of Ethereum and using React’s setState to continuously update our list of values.
Now that we have our values, we can get into the fun part of building the actual graph. While doing my research on charting tools, I ran into a cool library called vx. vx is a collection of reusable low-level visualization components. It combines the power of d3 and react to create powerful, yet elegant charts. Getting started with vx isn’t too difficult and there’s a nice little tutorial here that helped me get going.
Making a graph using vx is pretty simple. I used the Area Closed component under the shape package within vx. All I had to do was give the component the set of values retrieved earlier, an x and y function, a scale function for our values, and a gradient fill to add a little color.
Running this, along with some other minor vx components for styling will output a graph looking something like this:
And just like that there’s our graph showcasing the 30 day price history of Ethereum! It doesn’t do much else, but right here isn’t a bad stopping point. However, like a todo app, there’s a ton that you can still do to build on top of this. The additions I wanted to make were:
- The current price of Ethereum (with real-time price updates every 30 seconds)
- Percentage gain/loss
- The 30 day price history of Bitcoin
- A side bar for navigation
- A simple homepage
For me, these additions were a little tricky and took a decent amount of research and a lot of trial and error to implement. But after getting the initial graph to appear correctly, I felt like I could tackle anything in React 😎.
If you are curious to see how the final product turned out, you can check it out here (or the source code here). So far, I can definitely say that building this was a lot more fun than building a todo app, and I feel that I can actually use this. I still have a lot of improvements in mind that I can make, but for now I am content with what is the first of hopefully many more React applications.