March 3, 2018

/

React Crypto Stock Compare Pt. 1 – Introduction

React Crypto Stock Compare Pt. 1 – Introduction

Lately, I’ve been guiding a few people through the basics of React.js, both at work and with friends. Doing this I realised there really are only a few fundamentals concepts to learn, but sometimes people have trouble getting their heads around them at first. I thought I’d create a a multi-part tutorial to give anyone who is new to React, or just wants to brush up, a good grounding on how to do what I consider to be 90% of what you need to know.

What is React?

Before I get into this, let me cover off what React is and what you can use it for. React is a JavaScript library for building user interfaces. This tutorial is going to focus only on the web version of React but you can actually build native apps with React Native and even do some Virtual Reality with React VR.

Often there is an emphasis on the idea that React is not a framework, it’s “just a library”. This is because Facebook’s philosophy for React is to provide a solid base for composing and building components in your app and leave it to user-land to create solutions to things such as client-side URL routing, fetching data and other common problems. That doesn’t mean you can’t do these things in React and there are common patterns and libraries for everything you need in most apps.

What will we be building?

I don’t know about you but something that is NOT on my to do list is to build another Todo App. I wanted to build something semi-real that was also a hot topic so… Crypto! Of course.

The app we will build will take data from the Alpha Vantage financial API and compare the value of Microsoft’s stock with Ethereum (the cryptocurrency). The ultimate goal is to compare the percentage change between each days opening value for each asset. I just chose Microsoft for fun since they are a large and well-known company, no affiliation!

The tutorial will highlight a number of the basic things you will end up wanting to do when building an app in React. The code can can be found here in Github. The master branch is the final finished app, as well as branches for each of the steps so you can easily follow along. You can find instructions for getting started with the code in the repo in the README or wait for my explanation on getting started in the next step.

What you will learn

The tutorial is going to be split up into multiple parts each one attempting to focus on one major part of developing an app in React. This is the roadmap:

The tools we will use

The app we are building was bootstrapped using Create React App(CRA), the officially supported way to get started and lets you “Create React apps with no build configuration”. There is more to it than that but basically this starter kit is all you are going to need for most things when building a React application.

You can just follow along in the browser but I strongly suggest you code along and I’ll tell you all about how you can get started in the next step.

Whats next?

Onto the tutorial! Part 2: Creating a basic component

Next Step

Tags:

Seth Reid

/

React Crypto Stock Compare Pt. 1 – Introduction