I started learning React pretty late, by the time hooks had already been introduced. So I pretty much learned hooks and then more about the React ecosystem. A lot of folks feel they need to understand a lot of basics, the component lifecycle to get started and then move to hooks. The hooks API is actually really simple, and so inspired by the Tic Tac Toe game on the react docs, I wanted to build a simple game for everyone to get started with hooks.

What it does

I wanted to make sure the game is easily understood by the readers. I have focussed on building a really simple bare bones version of the classic Hangman game. The tutorial that I have written walks you through building the game. And incrementally introduces complexities. You can guess letters that are part of the main word and then the aim is to guess the entire word. The goal is to use React hooks to develop these features.

How I built it

I broke the game into two very basic scenarios. First is guessing letters of the main word for Hangman and the second is introducing a timer for the game, a max time limit within which if you can't guess the main word you lose the game. I first built the game to get the hands-on experience and then wrote about it step by step. I also tried to emphasise on explaining the react hooks used in simple words.

Challenges I ran into

I took some time thinking of a simple game that would not scare a first timer. Also, brainstorm about what the tutorial should focus on, should I make it for users who have no context about React, or should I make it like a complex game and use a lot of hooks. I think it was simpler breaking down and thinking what would be useful to a reader and a person who is trying something hands-on. I was also in two minds about whether I should extend the tutorial, but a short simple start is what I finally decided. I initially had not planned to use Docusaurus, but I went through KentCDodds tutorials and learned that I could place react components into my documentation, when I learned Docusaurus could do that, it was great. I used Docusaurus for the first time, but it went smoothly.

Accomplishments that I'm proud of

I'm glad I could use two Facebook technologies, Docusaurus and React for the purpose of this tutorial. I had planned React initially because it wasn't something I was new to, since I have used it in the past. But I'm really proud to have picked up Docusaurus as well along the way. I am also proud to have presented and guided other contributors and members of the Facebook Dev Circle Pune with how to get started building your own React Tutorial. That really did give me the boost to build this in the first place.

What I learned

I learned Docusaurus, I learned to break down my ideas into smaller chunks and maybe a series or a part by part tutorial. I learned to reduce other complexities of the code used in the tutorial to focus on the main topics. I also learned how easy it was to deploy my documentation for the tutorial with Docusaurus and Github pages. I picked up some good writing tips as well, I used the Tic Tac Toe tutorial as reference and learned a lot about dividing a big piece into meaningful chunks, adding sections for prerequisites, and ending with something to look forward to.

What's next for React Hooks Tutorial

I have ended the tutorial with certain other incremental complexities that can be accomplished using more hooks and other concepts. I plan to improve the look and feel as well and make the Hangman game further complex in the next iterations of this tutorial.

Built With

Share this project: