Time for a Task: Reading from Three Feeds

We took the buttonClicked() method out earlier, but now we're going to re-introduce that learning by having our app show different GitHub information depending on user selection. Right now we show commits, but we're going to let users choose between commits, forks and pull requests, just by clicking different buttons.

The feeds you need to use are:

• https://api.github.com/repos/facebook/react/commits
• https://api.github.com/repos/facebook/react/forks
• https://api.github.com/repos/facebook/react/pulls

You should examine the data they return so you can craft appropriate JSX.

Important note: we have already covered all the techniques required for you to be able to do this yourself. I'm going to walk through it with you, but this is a great place to test yourself to make sure you've understood what happened so far.

Still here? Here are some hints:

• Your render() method can call other methods to do rendering rather than try to do it all itself.
• So, you could have a renderCommits() method, a renderForks() method and a renderPulls() method, then have your main render() method call one of them.
• Depending on which fields you find interesting, you might find you can use one method for them all, or two of them; it's down to you.
• To keep things simple, just go ahead and call all three API endpoints in componentWillMount() and store the results in three separate arrays in state. Remember, setState() merges the new data with existing data.
• The current active view mode (commits, forks, or pulls) should be stored in state, and that state can be changed by clicking one of three buttons.

With all that, you should be able to create a very simple solution. If you want to refactor it later (i.e., to rewrite it to be simpler code) you can do, but for now just go with the easiest solution so you can be sure you fully understand what you've learned so far.

Copyright ©2016 Paul Hudson. Follow me: @twostraws.