Time for a Test: Clickable Usernames

It's time for another test of your skills to make sure you're paying attention. As before, I'll walk you through a simple solution once you've had a go yourself, and also as before I do strongly recommend you genuinely use this chance to try it yourself so you can identify which areas you understand well and which not so well.

Just to recap, here are all the things you've learned so far:

1. How to install Webpack, Babel and React for development with ES6.
2. How to create a basic React component and import it into an application.
3. How to write simple JSX to render content.
4. How to use props to give a component values.
5. How to render several elements at once.
6. How to handle events such as onClick.
7. How to use state, and how it differs from props.
8. How to loop over and render data in an array.
9. How to fetch data from GitHub using SuperAgent and Ajax.
10. How to use string interpolation and computed property names.
11. How to pass parameters using onClick.
12. How to create routes using React Router.
13. How to create links between pages using <Link>.
14. How to render default content using <IndexRoute>.
15. How to store your React Router routes separately from your code.

You should be very proud of your progress so far – you've learned a lot! So, it's time to put all your new skills to the test with a task. Your job is to:

• Create a new page called User, stored in User.js and available at the URL /user/xxxx, where xxxx is the name of a user to view.
• Make it fetch the feed https://api.github.com/users/xxxx/events, again where xxxx is the name of a user.
• Update the existing Detail component so that all usernames are clickable, showing the correct User page for that user.

Trust me on this: you know everything required to make that happen. It's just a matter of using what you know in different ways, inspecting the JSON from GitHub to select what you want to show, then 10 to 20 minutes of coding depending on how confident you feel.

All set? Go for it!

Still here? Here are some hints:

• Look at an example GitHub user in your web browser so you can see exactly what you're working with – https://api.github.com/users/jimfb/events is as good an example as any.
• You'll need to look at the detail/:repo route in routes.js for inspiration how to handle any username.
• Make sure you use <Link> components to direct users to your new page.

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