Before diving into react, I'd recommend getting a fundamental understanding of the latest JS syntax. Most examples out there will be written in the latest style, and most people are using transpilers to be able to write the latest code.
- I don't have a good specific resource for this, but Dr. Axel has some good in depth stuff about it: http://dr-axel.de/
- Destructuring and default parameters are probably some of the most used new features.
- Easy to get started react playground: https://github.com/facebook/create-react-app
- React-router is a really useful tool for building single page apps: https://github.com/ReactTraining/react-router
- Its really useful to understand the difference between controlled / uncontrolled components. Mixing the two (often with getDerivedStateFromProps) can be an antipattern: https://reactjs.org/docs/uncontrolled-components.html
- React has very good docs, I highly recommend a deep understanding of the react component lifecycle. It often helps solve hard problems, and misunderstanding can be the cause of a lot of pain: https://reactjs.org/docs/hello-world.html.
In most cases, React state is more than enough for most use cases; especially since state stays encapsulated in the interested component. There are some cases, especially in larger apps where it can be useful. But with all things, easy to abuse.
- Really good explanation of Redux by Dan Abromov: https://egghead.io/courses/getting-started-with-redux
This is again something that tends to get overused, I recommend sticking to their theme which is using them for "side effects". A good example is if a user needs to upload an image, and you want to pop up a notification saying that the upload is complete (a side effect).