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?
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 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.