Bringing it all Together: Project Complete!

Congratulations on reaching the end of the book!

If you've made it this far, I think you have learned a great deal about React, React Router, Jest, ES6 and more. I've been trying to keep a list of everything along the way, and I think this is a fair summary:

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.
16. How to make breadcrumbs using <Link> and <IndexLink>.
17. How to use Jest to test React component rendering.
18. How to use Jest to simulate user interface with controls.
19. How to create asynchronous tests using waitFor() and runs().
20. How to fake an Ajax call using the require() function.
21. How to find rendered components using scryRenderedDOMComponentsWithClass().
22. How to lint your React code using ESLint and Babel.

You might find you need to re-read some chapters to help refresh your memory, but that's perfectly normal – we've covered a huge amount of ground in just a few hours, so it takes some time to sink in. The end result is that you've written a lot of code, which is good. And it's not just any code: you've written tests for it and ensured it matches strict linting, so this is code you should feel proud of.

If you're looking to expand this project further, you have a huge amount of scope to work with thanks to the GitHub API offering up lots of data. For more information about all the end points it offers, see https://developer.github.com/v3/.

I would suggest, however, that from here on you consider taking a test-driven approach. I kept Jest and ESLint until the very end only because it can be confusing to learn multiple technologies at the same time, but if you're smart you'll write tests as you'll go from here forwards. Running a linter regularly will help keep your code consistent, and many web-focused text editors automatically lint your code while you edit.

This is the end of Hacking with React – I hope you feel like you've learned a lot, I hope you're excited to use React in the future, and I hope you have the confidence to make great use of other tools such as React Router and Jest. I really look forward to seeing what you make in the future – please do send me a tweet @twostraws with a link to your React apps!

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