Moving from Basic to Advanced React
A while ago I began wondering how to improve my React game.
As a beginner in React, I had learned to take a page, break it out into component parts, organize my file structure, implement React Router, even implement Redux, but still my React code was made up 100% of component classes inheriting and passing props. That was all. Declare a class, set state (or not), pass props, repeat.
I knew there were "Advanced React Patters" and wanted to get to the point that I was comfortable implementing those patterns in production. But as with learning most things in code, tutorials only get you so far and then there is a gap between beginner and expert level resources.
So --slowly-- I waded through the you tube videos, many that were super helpful from people like Kent Dodds and Steve Kinney and bunch of others whose names I don't remember. They helped a lot, but I didn't find anything expessly geared towards taking a react beginner and leveling up their game.
What I was really looking for was a list of different React techniques and their pros/cons/when to use them. So far though, I haven't found anything like that, so I'm endeavouring to create it, now that I feel mostly comfortable with these topics.
I will highlight the details in further posts perhaps, but here is a list of the techniques I've found that I would put in the somewhere-past-beginner level react skills bucket. I'd be extatic if any of you have others to recommend!
Advanced React Techniques, loosely ordered from "easiest" to most complex:
1. Functional Components
Functional Components are just components declared as functions not classes. They behave a bit differently though, one difference is that they can't have state. This could be a really good thing though if you don't want that component to store state and want to make sure no one else (including you) is tempted to add it later.
2. PropTypes
Type checking for react props
3. React Composition / React Composite Components / Compound Components
I've seen different names for the same general concept, but so far I think they all refer to the same or mostly the same thing. With widely varying degrees of complexity, you can create a pass-through component that can do some thinking of its own and renders the things you nest inside it. Definitely need to put together a better lesson on this to show a good progression from the simpler composite components to the more complex ones
4. React Children
Closely associated with composite components but worth looking into on their own
5. Higher Order Components
5. React Component Refs
Refs are a way of storing references to an object on a component instance.
6. React Context
... and more to come
References:
- I am very much relying on a lot of the work by Kent Dodds
example post:
https://blog.kentcdodds.com/advanced-react-component-patterns-56af2b74bc5f - The react docs, though sometimes a bit hard to follow if you don't have a good grasp of the surrounding concepts, are awesome
- https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
