I think you should start learning React from a resource that focuses on fundamentals and uses classes with lifecycle methods. This gives you a good foundational understanding of React. Some may say that this requires some additional work on your part, but if you are going to be working on React applications professionally, I say that learning classes is step one and should be done before taking a trip down the functional hooks side of React. I saw a great resource on Twitter called Getting Started with React, there is zero mention of hooks and focuses on class-based React, it seems to be a perfect place to start. But there are many other resources out there that can get you acclimated with class-based React in a relatively short amount of time.
Other React Learning Platforms:
Once you understand the fundamentals of class-based React, start learning how to refactor a class component into a functional one. Dan Abramov does a very basic refactor in his React Today and Tomorrow talk, and it's a great way to become familiar with the difference between class-based and functional hook style React components.
Other Resources on Refactoring Components:
- Refactor Compound Components to Hooks
- Refactoring a Render-prop-based Component to Use Hooks
- React Hooks: What will happen to the Container/Presenter Pattern?
- React Refactoring - From Classes to Hooks Part One
- React Refactoring - From Classes to Hooks Part Two
Once you get better at refactoring classes to functional and converting class-based state and effects into Hooks, you should proceed to use functional components as often as possible in as many situations as possible. Just lean into the functional style as hard as you can, using React Hooks for your state, effects, reducers, custom logic, etcetera.
📢 Shameless Plug
I wrote a guide to learn Hooks that can be used after reading the documentation, I put their fundamental examples into demos and later build a To-Do app, we even get into custom hooks.
The Hands-On Guide to Learning React Hooks
When to Tackle Learning React Hooks
Beginners: Those who are new to React, with no prior experience should try to start with classes and learn the fundamentals of React that way, even if this is a brief overview. Then start learning functional components and hooks as a step two with part of that learning including how to refactor class-based components into functional ones.
Pros: Those with existing React knowledge and a comfortability in classes should be writing most new features using the functional style. You will need to get acclimated with refactoring your classes into functional components in case you want to move old code into functional components. This is a great skill to have and will make you a better React developer.
Great Free Resources on Learning Hooks
Of course, one only starts learning hooks from the ReactJS.org documentation on Hooks and the React Team's Hook preview videos from React Conf 2019.
- Intro to Hooks
- Hooks FAQ
- React Today and Tomorrow - Sophie Alpert and Dan Abramov
- 90% Cleaner React With Hooks - Ryan Florence
Go binge read and watch all of that, then you will understand that the rest of your learning is up to you.
Find a great YouTube channel that has decent videos on the subject preferably with the author taking you on their journey into Hooks for the first time. It's cool because you get a sense for how much of a big deal Hooks are from watching these pros take a stab at it for the first time. That's how you learn. One of my favorites is a guy named Harry Wolff. So below are some links of great channels with info on Hooks:
Reputable "Hook" Dealers on YouTube:
Aside from linking to these amazing developer channels, I wanted to link directly to some of the amazing free courses I have found on YouTube and elsewhere.
Great Paid Courses on Hooks
When you get to a certain level by exhausting some of the free and best resources for Hooks, you sometimes want to try a course that goes more in-depth and contains longer-form learning. I have a few good resources below:
- Tyler McGinnis - React Hooks
- Reusable State and Effects with React Hooks
- Simplify React Apps with React Hooks
Advanced Level Hooks Videos
There are a few good resources for those who are up to speed with Hooks, here are a few that I take exploring Hooks a little further:
- The "Action Hooks" Pattern With React Hooks
- Modern React Workshop: Hooks and Suspense (Part 1)
- Modern React Workshop: Hooks and Suspense (Part 2)
- Fun with React Hooks - Michael Jackson and Ryan Florence
- Using Typescript With Modern React (Hooks, Context, Suspense)
- React, D3, and Hooks
- Getting Closure on React Hooks by Shawn Wang
- React Hooks useCallback Tutorial
Oldest comments (1)
One of the best React JS learning platform is React JS Online training