Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Tutorial to use Hooks instead of class components #1782

Open
kentcdodds opened this issue Mar 4, 2019 · 8 comments
Open

Update Tutorial to use Hooks instead of class components #1782

kentcdodds opened this issue Mar 4, 2019 · 8 comments

Comments

@kentcdodds
Copy link
Contributor

@kentcdodds kentcdodds commented Mar 4, 2019

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

This comment has been minimized.

Copy link
Contributor

@selbekk selbekk commented Mar 5, 2019

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

This comment has been minimized.

Copy link
Member

@saranshkataria saranshkataria commented Mar 5, 2019

Would love to help too!

@abdusabri

This comment has been minimized.

Copy link

@abdusabri abdusabri commented Jun 29, 2019

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:

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!

@nickmccurdy

This comment has been minimized.

Copy link
Contributor

@nickmccurdy nickmccurdy commented Sep 26, 2019

@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

This comment has been minimized.

Copy link

@abdusabri abdusabri commented Sep 30, 2019

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?

@nickmccurdy

This comment has been minimized.

Copy link
Contributor

@nickmccurdy nickmccurdy commented Sep 30, 2019

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

This comment has been minimized.

Copy link

@abdusabri abdusabri commented Oct 1, 2019

@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?

@nickmccurdy

This comment has been minimized.

Copy link
Contributor

@nickmccurdy nickmccurdy commented Oct 1, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.