When we decided to convert our React curriculum to React Hooks, one of the biggest stumbling blocks we ran into was that almost all of the guides, tutorials, and blog posts about React Hooks are written with the assumption that the audience already knows React. Most resources are written from the perspective of ”How to switch from class-style React to hooks-style React”, not “How to learn hooks-style React from scratch”.
Our curriculum has a lot of supplementary reading links in it and it wasn't clear where we would be able to find supplementary reading that taught React Hooks with a beginner rather than a veteran audience in mind.
After some discussion, we came up with a possible solution. The ReactJS.org documentation is an excellent resource for all things React, but the beginner guides and tutorial still use class-based React, and the hooks guides have the "aimed at React veterans" problem. This makes sense for these guides in context — a lot of people are still using class-style React, and most of the audience for hooks probably is React veterans — it just doesn't make as much sense for us as a coding school.
But the ReactJS.org site is also completely open source. So we thought: what if we just…updated it ourselves?
We decided to take a stab at doing just that and see how it went. This part of our curriculum update fell to me, so a couple of months ago I cloned the ReactJS.org repo and started experimenting to see how hard it would be to get up and running, adapted, and deployed.
It took a lot of work, and I’ll be talking about all the ins and outs of the update in a future post, because there were a lot of interesting challenges both pedagogically and technically. But for now the result is live at reactwithhooks.netlify.app, and you can take a look at the repo where the changes were made at github.com/kickstartcoding/reactjs.org on the convert-all-to-hooks branch.
The places you’ll find most of the converted examples and explanations are the tutorial, the main concepts sections, and the advanced guides sections. For those, we converted the concept explanations, the directions, and all of the examples (including the ones on CodePen so you can see and run working code snippets). Everything from the step-by-step directions for writing a tic-tac-toe game in React to explanations on how to integrate React with older library’s like Backbone.js is now written with hooks in mind.
We hope this will be a useful resource for anyone who either wants to learn React the hooks way from scratch, or who wants to see examples and/or explanations of some of the more complex React concepts implemented in the hooks style.
There were a few sections that were particularly tricky to figure out how to convert, or to figure out if conversion was even possible. If you’d like to help us out, take a look at the ”unresolved issues” section of the README and let us know if you know how to handle any of the things we couldn’t figure out.
There's still work left to do!
Also, of course, please let us know about any issues or bugs you fine to us the converted documentation. We definitely want to make sure it is as useful and error-free as possible.
All in all, making this adaptation was one of the most fun projects I’ve been able to work on recently. We got a chance to use it as a resource for students during our last cohort, and it seemed to work pretty well. I’m hoping that it will be useful for other people trying to learn React as well, so check it out and let us know what you think!
Update: I wrote a post about the ins, outs, and pitfalls of doing this adaptation, so check that out if you're curious about the nitty-gritty details of how it was done!
Mark is a software developer and teacher. In his work he tries to write decent code, support diversity and social justice in tech, and energetically frown at people who use the word "disruption" more than they use the word "ethical”.
Outside of work, he hikes, attempts to commit to musical instruments, feels feelings about things, and silently guesses who uses Tumblr based on their word and spelling choices.
