Imo focus on learning the rest of the API that’s available. There isn’t much — React has a very small API. There’s Context, there’s preventing unneeded rerenders with PureComponent or React.memo, there’s loading components on the fly with React.lazy and Suspense (Suspense will also handle data loading once they settle on an API at some point later this year, which will be massive). Plus there are a few useful lifecycle methods that are worth checking out.
Learn to use the React dev tools in the browser. Key thing I would say is make sure the rerendering highlighting is turned on. It flashes on every element that rerenders, which gives you huge hints as to what you should look at when optimising in the code (you want as few rerenders as possible).
Context is very good, and very usable (if not quite there yet).
Do install the latest alpha and play around with hooks: they are going into React at some point in the next month or two and are generally fantastic, the API is very easy to understand. They tend to seriously reduce the amount of code you need to write to Get Stuff Done.
As @jenovs emphasises, learn to test the code, this is super important, much moreso than learning other libraries in terms of immediate benefit. If you’re using create-react-app, Jest is fully configured and ready to go, and will handle most things you need. Enzyme can help, but imo learn to use Jest well first, then you can more easily see what benefits Enzyme gives you. Cypress is also worth looking at for UI integration testing.
CRA works with Typescript out-of-the-box, so maybe look at that — there are certain benefits to using a typed language. A certain class of bugs become impossible. It has some downsides; it isn’t perfect by any means and code becomes pretty verbose. But a major benefit is that, particularly if you use VSCode, your editor gets some superpowers with regards to editing/refactoring the project as a whole. Flow is the other option, but note it looks like it’s dead in the water, major projects using it are moving to Typescript en masse.
Bear in mind that dependencies are liabilities. React itself is a dependency, then every further thing you add on top is a dependency of that dependency, each with its own API. As was mentioned, you can do a helluva lot of stuff just with React + just writing logic in plain JS: look at supporting libraries when you’ve hit a brick wall in terms of trying to do something. Like routing — first figure out if you actually need it. Then see if you can just use the browser history API. Then maybe use a wrapper around it (ReactTraining’s history library is a good choice). Then if it’s still painful, look at something like React Router (…which is built on top of the history library, which is built on top of the browser history API). Reinventing the wheel is useful when you’re learning: you have the luxury of time, of being able to see how it works at the lowest useful level then working up from there.
