Hey there!
I was trying to figure out where do I stand from a React learning perspective? to set my next learning goal. But I couldn't find anything specific to where to draw the line between a beginner, intermediate and an advanced React developer.
So, I made a list of topics related to React and some other stuff I'd like to learn, then grouped them into those three categories. These topics are not 100% React. Those fall into foundation topics that you need or libraries/tools that you will face at any point in your career.
For the grouping part, I thought: "If I wanted to learn from scratch React today, what would be the order I'd need them?" With that in mind, this is the list I came up with:
Beginner:
- Basic HTML and CSS knowledge
- CRA setup
- Basic JSX syntax
- Component creation (functional and class components)
- Props and Children
- State (useState and useEffect hooks)
- Conditional render
- Router
Intermediate:
- Lifecycle methods
- Error boundary
- Using one state management library (Context, Redux, Zustand, etc.)
- More state (useMemo and useCallback hooks)
- Controlled and Uncontrolled components
- Typescript
- Testing components (React Testing Library, Jest or both)
- Adding a CSS Framework (TailwindCSS)
- Customizing component styles (SASS, Styled-Components or JSS)
- Bundler configuration (Webpack)
Advance:
- Create your custom hooks
- Storybook
- React Suspense and Lazy
- Mocking services for tests purposes (like overwriting the render to add a ThemeProvider - React Testing Library)
- Server-side rendering
- Rewiring React
- Frameworks like NextJS or Gatsby
- Creating your own component's library
After creating this initial list, I gave them a score. Mostly because their learning difficulty is different. It's not the same to learn how to pass props to a component, as learning how to implement Redux! Also because I thought it would be cool to have a small app that will do this for us! And that's how I ended up creating this!
Please, be aware that this list comes from my own experience working on different companies as a React developer, and is probably (if not extremely) incomplete. If you guys have any suggestions, let me know what topics you'd like to see reflected in the list.
What was purpose of this, again? right! the goal:
It's going to be Suspense and Lazy!
Top comments (1)
This is pretty neat, you might add Remix to the list of frameworks. Though, if we're judging React only, you may want to drop the things that aren't specifically React. There are a lot of possibilities for interacting with React so trying to guage skill level while including anything external becomes bias, as you mention.
It's cool either way, good job!