Making the FCC Leaderboard Using React
I have been trying to figure out react for a while. For some reason, I cannot wrap my head around it. Since Freecodecamp has been getting updated, there are gaps in my knowledge and it felt like it was a huge jump going from Javascript and Jquery to writing react components and navigating the react realm of things.
I do not believe that this particular module required that I use react to build the leaderboard and, if face, I built one without it and it was strait forward but I decided to do it the hard way to get some practice.
The project is to build a leaderboard that uses two different freecodecamp Json list. Each list is a leaderboard based on different categories; last 30 days and All Time stats. The user should be able to:
- choose which category to view
- See how many brownie points each user has for both categories
I am working on a mac and using the Webstorm IDE.
The Webstorm IDE allows you to create a React App with the click of a button.
It initialized a simple react app. Because I am so new to React, I do not feel comfortable explaining everything.
The only thing I did was clean up some of the image files that came with it as well as gutting the App component.
First order of business is getting the data from the FCC Heroku account (https://fcctop100.herokuapp.com/api/fccusers/top/recent and https://fcctop100.herokuapp.com/api/fccusers/top/alltime). I added these two URLs as variables after the imports and I sed the native react fetch to bring in the data (I only used one url to start). After trying over and over to get the syntax right, I found this post on FCC and was able to get the usernames to render in the browser.
Now, I want to add the avatars.
I will need to add an <Image/> tag but getting the source from the data to the tag may be a bit tricky. This is because all the images have different sized an, for some reason, it will not render that way. So, you have to explicitly define width and height of your images in the tag.
<td><Image source={{uri : item.img}} style={{width: 70, height: 70}}/></td>
I also want to be able to toggle between the two different lists and have it render without reloading the page.
To accomplish this, I used a bootstrap nav bar. First I npm installed and saved the react-bootstrap package. Afterwards I copied a nav bar from here. Then, I updated it for my need; deleted a lot of elements but left two menuItems that correspond to 30 day list and the all time list. Finally, I had to figure out how to handle the user chooses one of these options.
I used a handleChange like function. If you look closely at the documentation for nav bars, each example has an expand tab where you can see the code. This is one of the codes:
In the opening of the Nav tab, there is something called onSelect. With this, you can dictate what happens when you press the buttons on the navbar and you can also pass button specific attributes to the function.
I switched out the eventKeys into the corresponding of the two urls and passed it into a handle function that it identical to componentWillMount() function but I passed in the desired url through the selectedKey attribute.
I added the “navbar-fixed-top” because I wanted it — DWI — .
Now, It works like this:
Gorgeous.
But when I open the developer tools in chrome I get these errors:
I cannot find much about what may be wrong with <tr> being a child of table. It seems to be an ongoing issue but it doesn’t look like it will break anything so I’ll let it lie.
But, I did find something on how to fix the key issue. The problem is that iterators really prefer a unique key for each element. I learned this from Egghead.io. For my purposes, using the index of the mapping function would suffice.
I also went ahead and used the index to number my list.
I used CSS for the styling. I did the best I could with the little patience I have for style elements. I may go back in when I am feeling particularly masochistic but for now, I want to move on to other projects I have on the burner.
Now, I have a better understanding of how react works and what I can do with it. Making the same project two different wars makes a lot of difference.
Next, Heroku. The finished product is here.
If you have advice for me feel free to comment
