It all began on 29 May 2013 when Tom Occhino and Jordan Walke first presented React Library at JS Conf US. Since its inception, the use of React in websites has skyrocketed. The resources for learning React are being constantly created by developers and even the React team is launching new documentation for it. In spite of having these, it’s unclear how to mater a library like React, to develop performant applications. Well, there is no correct way to master this library, but we will try and avoid the bad ways and follow the good methods. Let’s take a dive into it.
What is React JS?
1. Core React JS
When coming to the mastery part it’s very important to take a step back and get the core concepts of React right, so if you are not confident in the core concepts of React, then it’s important that you get a sound knowledge of the first, before taking a deep dive in its eco-system.
You should have massive clarity on How Hooks really work?, not just using them what exactly is happening with hooks is very useful and especially with
useRef(). If clearly understand how
useState() rerenders the component, how the dependency of
useEffect() work and how
useRef() values can be mutated and used. If you know how these work then you are better than the rest of the React Developers out there.
To understand your knowledge of these hooks, try and create timer delayed functions using hooks would help you get a good understanding of them, with start and stop controls and mount and unmount behavior and your website not being buggy, that means you have understood them well. Here is a good example.
2. React Eco System
The second part of mastering React is the React ecosystem itself, as said earlier you need to have other libraries to complete your web application in a medium to large-sized application. There is a large pool of tools and libraries available for each and every aspect, so it’s vital to choose wisely from the lot if you want to save time. Let’s consider the case of networking library if you are using GraphQL then considering apollo GraphQL might be a better choice or else you can also consider using libraries like
useSWR or React Query. We would recommend using React Query as it offers re-fetching after a certain timeout and also can cache the data and offers different states like
isSuccess. You have to learn React Query, try out our React Query course on Codedamn.
Coming to the UIs you can have Chakra UI or Material-UI. You can also consider using Tailwind CSS which is not particular to React but is very popular in the React world.
For Server-Side Rendering it’s always recommended to use Next.js, also there are other frameworks like Astro which also offers SSR. If you want to Learn Next.js take a look at Next.js Course on Codedamn.
3. Advanced React Concepts
Finally, it’s time to conquer those advanced concepts to become the master of React. The advanced concepts need not be theoretical when coming to React the advanced concepts would be React Suspense which will be coming in the React Version 18 or above, when coming to its application even if you are mostly using with Next.js it’s important to know its working. Some other things to know would also include Streaming Support and Server Side Components.
After hearing these names people may sometimes feel overwhelmed at the start but you’ll definitely get the hang of it once understand their functionality as a whole and how would they benefit the application and there also exists another bunch who would want to directly jump onto these concepts directly which is a big blunder and you should always avoid doing that.
If you are already familiar with React and you don’t understand any of the concepts or topics explained above, just take a step back and learn them and start mastering React. If you want to master React by the end of the year, try out our Full Stack Learning path.
You can watch the full YouTube video here