Hello YouTube, this is Mary from Happy Coder.
In today's video, I'm going to show you how to build a Camper Leaderboard web app,
which is the second React project from Free Code Camp.
Here on the screen is the final product.
It shows a table listing the 100 campers with the most points earned in the past 30 days.
The total points they've earned are shown in the last column.
I can toggle between sorting the list by how many points they've earned in the past 30
days or by how many points they've earned total.
As usual, in the description box, I have added a link to a copy of my codes in a Google Drive
shared folder.
Please feel free to download and examine the codes.
Since the app we are building today is rather simple, I chose to add the CDN links of React
and React DOM from Facebook to this script to access the React library.
I also added the CDN link to Babel, which will transcribe my ECMA6 scripts to ECMA5
so that my app can run on all the popular browsers.
Now let's have a look at my codes.
My initial DOM structure only contains one div tag with the id "App", as using React
allows us to update the DOM dynamically by writing html in JavaScript.
To achieve this project, there are 2 major points I want to explain in details:
First, as you may have noticed, I have also added a link to jQuery library in the beginning
of my script.
This is because React library isn't equipped with the ability to make API calls and a second
library is needed to get the JSON data.
From an option of choosing either jQuery or the axios library, I went with jQuery because
of my familiarity with it.
To access the API, I used the '$.ajax' method.
Having the user story in mind, since we are given 2 APIs by Free Code Camp: one for the
list of campers with highest points in the past 30 days and the other for the ones with
highest total points, for the url, I assign it to a variable "link" to allow us to
get the proper API we want.
I will get back to this 'branching' logic in detail later.
On the success of the call, I built a function to get the data from the API and saved it
in an array called "test" by using the $.each method.
It's worth mentioning here that since our intention is to replace the content of the
test array each time an ajax call is made, we have to be specific about the index and
element from the particular API we are calling to ensure that there's always 100 items
in our test array.
Should we use the push method, the data would be continuously appended to the DOM instead
of being replaced, which doesn't satisfy our goal to have the leader board updated
dynamically.
Another important thing that needed to be added in the ajax call's success function
is the "setState" method.
State is a React concept.
By updating the state, the DOM will be re-rendered to reflect the change almost instantaneously.
Inside of the component constructor, I set a variable "count" right before the ajax
call.
The count is set as 0 initially and to be increased by one every time the API is called.
Whenever a change is made to this counter variable, React recognizes that the state
of this particular component has been changed and the DOM is going to be re-rendered with
the data from the API call.
Moreover, since the "this" keyword is restricted within the ajax call instead of
pointing to the react component, the bind is necessary to unify the difference, and
make the setState method work.
Secondly, I want to explain my idea of how to make the sorting buttons work.
I built 2 functions: loading() and sorting().
Each of two is called respectively when the buttons (sort by recent 30 days and sort by
all-time) are clicked.
In these two functions, I assigned a different value to the variable "clicked", 1 is
used when the "past 30 days points" button is clicked and 2 when the "all time" button
clicked.
And then in the beginning of the apiCall function, I built an if statement to check the value
of the variable "clicked" and determine which API link should be used.
if "clicked" equals 2, which means the "alltime" button is clicked and the API
of all time should be called, the variable "link" is then assigned with the url to
"alltime" API.
If "clicked" has any value other than 2 which means when the page is loaded or the
other button is clicked, in which case the "recent" API is used.
This wraps up today's video.
Hope it's been informative.
Please comment, like, share and subscribe to my channel.
See you in my next video.
For more infomation >> RC ADVENTURES - TOYBOTA PROJECT - PT 6 - BBC TOP GEAR TRiBUTE BUiLD - TOYOTA TRUCK-BOAT - Duration: 29:46. 
For more infomation >> how to build your own house : intro to our channel - Duration: 2:26. 
For more infomation >> How to build your own robot! STEM Build-a-Bot toy unboxing - Duration: 5:17. 
Không có nhận xét nào:
Đăng nhận xét