#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Calling the tips API using axios
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
One thing I forgot to mention in last lesson was the binding of our new methods. So in JavaScript, class methods are not bound by default.
0:16
So an example here, we see the handle click which was defined as an extra method on the class. Got this bind this.
0:26
So let's do that to make sure we don't run into any bug. Going back to my constructor. I just define if filter change
0:43
this.onFilterChange = this.onFilterChange.bind(this); and we do the same for the other method that we defined which was filter tips.
1:08
Page still loads. And with that out of the way let's go back to componentDidMount and start to call Axios to retrieve tips from the API.
1:19
As shown in a previous video the API is now running on local host port 8000. So we can start querying that endpoint. First let's set up a constant
1:35
called tips endpoint and you should remember it was under API. Next we need to import Axios. So I'm going to make a constant access variable
1:50
require Axios and we already installed it at the beginning of this lesson and now I can use it in componentDidMount. It's pretty straightforward;
2:07
we can call the GET method on Axios give it the TIPS_ENDPOINT and do a bit of method chaining. So if this works
2:22
we are going to do something with the response. And if it doesn't work you're going to catch an exception.
2:34
And I'm basically just going to log that to the console. Now, something very important, as I mentioned before
2:49
immutipility is an important thing in React so that means that you would never set a state like this. You can do it technically
3:02
but it's not how things are done in React. React has a special method setState and not only does it set the internal state as defined in a constructor
3:16
it also re-renders the view which is the main thing with those single page apps that they refresh on the fly no page refreshes required.
3:25
So setState handles that in the background. So whenever we want to update state we need to use this setState method.
3:34
And you will see that in the second hangman project a lot as well. And this is as simple as giving it the new values in an object.
3:46
And in this case I'm going to set both arrays the orgTips and the showTips to the full response data. Because remember this is our pristine copy
3:58
and the showTips is the one we're going to filter based on what the user types in the search box. Now there's a lot more curly braces than Python
4:09
so it's easy to make a syntax error. But having the console open in the browser I would easily spot that. This is not going to do anything yet
4:20
because also here we want to render the tips in the view so going back to render where we had those static tips we're going to get rid of this.
4:35
And we should remember from the JSX in the tip component, JSX supports embedded JavaScript which is very cool. So we can now define an arrow function
4:47
to loop over the tips. So this state showTips on the filtered ones I can call map on that array doing something with each tip.
4:59
And I just got map in the JSX refresher. And we want to do an enumerate to get the tip and the index.
5:18
One thing I forgot to mention when I spoke about the structuring, is the ... notation which is similar in Python to the *.
5:29
Remember in Python where you want to tuple unpack a list of five into three elements and you would say put the rest into c?
5:45
Well JavaScript has something similar but instead of the star it uses ... And I'm going to use that to parse all the properties
5:56
to the tip component writing this code. Pretty nice. So all the attributes of tip so the text, the code, the links I can parse into tip using ...
6:10
The enumeration with index is because every tip in the list needs to have a unique identifier which will be the number of the iteration.
6:24
And I'm also going to parse the filter string because later we will use that to do some highlighting on the matching string. And this should be it.
6:46
Give it some indenting. And I have a syntax error. And as there's an arrow function I'm using the fat arrow. Awesome, look at that!
6:57
All the tips are shown in our front-end. All with their text, code and optional links; sometimes there's a reference link.
7:10
And this data is queried directly from the API. Which we can confirm because we got a 200 response from Django's app server.
7:19
And it didn't require a lot of code. So we called Axios in the componentDidMount it was like ten lines of code.
7:28
And then we set the state to update your arrays with the response data. Then in the view, only three lines of code we were able to loop over the tips
7:41
using an arrow function and calling the component for each loop. And of course the tip component is way more code
7:49
but that is now abstracted away which we not only can use here but we could also import it into other web pages.
7:56
Which is a nice example of the re-usability of React components. We cannot filter anything yet so that's what we're going to code in the next video.