Setup the Currency Conversion Calculator
This lesson begins by demonstrating how to download and setup the sample application we'll be using in this course:
git clone https://github.com/xjamundx/exchange-rate.git;
cd exchange-rate;
git checkout redux-legacy;
yarn;
yarn start;
With that complete I go through the functionality of the application including its 3 main components:
- Currency Code Picker
- Amount Field
- Rate Table
All of the code we will be working on in this course can be found here: https://github.com/xjamundx/exchange-rate/tree/redux-legacy
Jamund Ferguson: [0:00] To get started, head over to github.com and go to the example repository. The code for this lesson can be found in the redux-legacy branch. Click the Code button and copy over the URL. Then, in a terminal window, type git clone and paste in the URL. Then cd into the exchange-rate folder and type git checkout redux-legacy to select the correct branch.
[0:23] From there type yarn to install the dependencies and yarn start to run the app.
[0:30] Now open up your IDE. With that open, let me show you a few cool things about the app. At the top of our file, we've got our Currency Code Picker. This allows us to choose our base currency code, with which all of our conversion calculations are run. If I choose USD and then in my Amount Field type 10.99, you can see that in Canadian Dollars that's about CA$14.05, but in Euros it's about €9.06.
[0:55] We call this our Currency Code Picker. This is our Amount Field. This is what I'm calling our Rate Table.
[1:01] At the bottom of the screen, I display a name, and when you hover over that name, it has a little bounce effect. It's not super important to the goal of our application, but it will allow us to show how to use refs.
[1:13] The other interesting thing in this application is when I type in the Amount Field, you can see that it doesn't respond until I'm done typing. That's because I use debouncing. I'll show you how that works in a later lesson.