By understanding the concept of controlled components in React by progressing through the topics which are mentioned above, in this order you will have a really good understanding of the fundamentals of React.
The second section in this learning path focuses on the advanced topics in React. So the advanced topics of React which you need to cover are as follows:
- Higher order functions
- Error boundaries
- HTTP requests –
useCallback, Custom hooks
Context, Higher order functions & Render
You will start by learning about React context which solves the problem of
props, drilling you will then come across higher-order components and the render
These are the patterns to share logic across components.
Refs and Error boundaries:
You will then learn about Refs which let you access the DOM and also error boundaries which let you catch errors and have a graceful UI fallback.
After that you should learn about React portals which let you render UI outside the root element of your react application.
HTTP requests –
Once you have understood these topics you should focus on making HTTP requests from your React application. You can either use Fetch API or a package like Axios to understand how to make
POST requests at the minimum.
Finally you can concentrate on some of the other hooks like
useCallback and even implement Custom hooks that will share logic across functional components.
Now there are certain topics that are specific to class components and some that are specific to functional components. However my advice for you would be to learn both of them, if you were to appear for an interview.
There is a high possibility that they have a few applications where they still use class components and would expect you to have a knowledge about class components and not just function components.
If you have gone through this list of topics, you are in a great position now and once you are through with React itself it is then time to focus on the ecosystem and other packages which play well with React.
In this third section I am going to describe the ecosystem and packages for React which goes well with it. The summery is as follows:
- State Management — Context API, Redux/Mobx, Apollo Client
- Routing — React Router
- Styling — Styled Components/Emotion, Tailwind CSS, Chakra UI, Material UI, Ant Design
- Forms — Formik, React Hook Form
- Testing – Jest + React Testing Library, Cypress
- Misc – Typescript, Storybook, Reacti18Next, Firebase, Practical React Libraries
- Next Steps — Gatsby, Next.js, React Native
Next you are going to learn about routing that means how to deliver different components when the user visits different URLs in the browser. The go-to package is React Router.
The next thing to learn is about styling your React apps, you can get started with Styled Components or Emotion that are really popular or you can also go the route of Tailwind CSS which is rising in its popularity.
Apart from these categories, there are a few things that will definitely help you if you wish to learn further then try with Typescript, this will let you add types to your React apps.
Another important tooling that you can have in your pocket is Storybook. If you wish to document your components this is the package for you. Next if you want internationalization in your application then you can experiment with Reacti18Next package.
In some cases you need to add authentication in your apps or perhaps to use a No SQL type database and also host your React application. For this you can go with Firebase.
Finally you might want to focus on a few practical React libraries that will be of use in most of your React applications. For example adding modal, tooltips, charts and so on.
If you have come this far, congratulations!! you definitely know much about React however if you wish to broaden your horizon there are a few paths you could look for.
For example, you can checkout Gatsby which is basically a static site generator but if you need sever side render your apps there is Next.js and if you want to dive into the world of mobile apps there is React Native.
So this is my take on the React learning path in 2021, if you liked this road map then kindly comment below. The reality of learning anything new is that it takes time and effort along with many ‘What the hell?’ kind of moments.
Thanks for reading!
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?