Update Tutorial to use Hooks instead of class components

[kentcdodds]

I think the react docs are a fantastic place for people to start getting into React. Seems like hooks are where we want people to learn React so it makes sense to update the tutorial to use hooks instead.

Let me know what you think. I'm sure we'd get a lot of people willing to contribute this.

[selbekk]

I’d love to help out! 👋 we probably need to figure out how to rewrite stuff though - it might lead to a few new sections and a few deleted ones

[saranshkataria]

Would love to help too!

[abdusabri]

I'm definitely interested to help! 😄

I've actually recreated the Tic Tac Toe tutorial using hooks.

Solution 1
In this solution, I've followed the original tutorial step-by-step, and tried to keep it as identical as possible.

Here is the CodePen for the final result

Following are the pens for all the code check points as provided in the tutorial:

• Tic Tac Toe - Hooks - Starter
• Tic Tac Toe - Hooks - Point 1 (Passing Props)
• Tic Tac Toe - Hooks - Point 2 (Interactive Component)
• Tic Tac Toe - Hooks - Point 3A (Lifting State Up)
• Tic Tac Toe - Hooks - Point 3B (Lifting State Up)
• Tic Tac Toe - Hooks - Point 4 (Taking Turns)
• Tic Tac Toe - Hooks - Point 5 (Declaring a Winner)
• Tic Tac Toe - Hooks - Point 6A (Adding Time Travel)
• Tic Tac Toe - Hooks - Point 6B (Adding Time Travel)
• Tic Tac Toe - Hooks - Point 6C (Adding Time Travel)
• Tic Tac Toe - Hooks - Point 7 (Final Result)

Solution 2
In this video, featuring @gaearon and Mattias Petter Johansson, Dan mentioned that the original tutorial had the logic of the game and history intertwined together, and that it would be interesting to create a custom hook and use reducers to separate them out. So, I've given it a shot - it was actually very interesting 😄

I think this approach might be interesting to add as a bonus/advanced section to the tutorial to demonstrate what is possible using custom hooks.

Here is a CodePen for the final result using a custom hook for history

I think the main consideration would be to change the code to using declared functions instead of arrow functions.

I would be very interested to get feedback on the code, and will also gladly help with the documentation as well if you would like to proceed with this.

Thanks!

[nickserv]

@abdusabri I'm not super familiar with the tutorial as I preferred to learn React via its docs, but as far as I can tell from the final step of the first solution, this looks like a very solid translation of the original class logic to hooks. My only complaints are ones I'd also have of the original.

The second solution seems to have some pretty good ideas for an advanced tutorial, but I think custom hooks and reducers are a bit much for beginners, and it would be better to do after the first solution.

[abdusabri]

Thanks for the feedback @nickmccurdy!

How should we proceed with this? Should i start working on the documentation? Do you know someone from the core team who should be mentioned here?

[nickserv]

I started working on the docs (see #1788) but don't have a pull request yet, hopefully will soonish. I'm not sure if the core team is also planning on doing something like this, but I'm hoping that it could at least be useful in the meantime as a fork of the docs for users that prefer hooks.

[abdusabri]

@nickmccurdy, thanks for working on the docs. The documentation I wanted to start working on is for the tutorial only. Basically, the write up and steps that would go along with the code I've provided. Docs for this issue and #1788 would be complimentary to each other, correct?

[nickserv]

Yea, I think so. Personally I'm more familiar with the docs than tutorial, but this seems like a good approach for users that prefer the tutorial, as they are both alternative and complimentary ways for new users to learn React.

[alansegar]

Linking this to #3063 from @DaniAkash which contains an updated tutorial using hooks