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:

How to install Webpack, Babel and React for development with ES6.

How to create a basic React component and import it into an application.

How to write simple JSX to render content.

How to use props to give a component values.

How to render several elements at once.

How to handle events such as onClick.

How to use state, and how it differs from props.

How to loop over and render data in an array.

How to fetch data from GitHub using SuperAgent and Ajax.

How to use string interpolation and computed property names.

How to pass parameters using onClick.

How to create routes using React Router.

How to create links between pages using <Link>.

How to render default content using <IndexRoute>.

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.

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.