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.
Advanced topics
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:
- Context
- Higher order functions
- Render
props - Refs
- Error boundaries
- Portals
- HTTP requests –
GETandPOST - Hooks:
useContext,useReducer,useRef,useMemo,useCallback, Custom hooks
Context, Higher order functions & Render props:
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 props pattern.
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.
Portals:
After that you should learn about React portals which let you render UI outside the root element of your react application.
HTTP requests – GET and POST:
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 GET and POST requests at the minimum.
Hooks:
Finally you can concentrate on some of the other hooks like useContext, useReducer, useRef, useMemo, 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.
Ecosystem
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
State Management:
The first thing you need to learn is about state management, you can either learn Redux or Mobx and Apollo client.
Routing:
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.
Styling:
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.
If you want to quickly get up and running then you can use UI libraries like Chakra UI, Material UI or Ant Design.
Forms:
But what if your application has complex forms to deal with then you might want to learn Formik or React Hook Form.
Testing:
When it comes to testing you will be learning Jest with React Testing Library for unit testing and Cypress for end-to-end testing.
Misc:
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.
Conclusion
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.
My advice is to stick with it, build real projects and put all this on GitHub. Move forth and back between JavaScript and React while you learn and finally have fun working with one of the best technologies out there!
Thanks for reading!
Add comment