How to master React JS?

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?

Before getting to the details of mastering React, it is crucial to understand what exactly is React. Even after gaining such wide popularity, there still lies some confusion in the way people depict React to the first comers. React is just a JavaScript library for building User Interfaces which is often confused with a definition of a framework (which is a web development framework is a set of resources and tools for software developers to build and manage web applications, web services, and websites) like Angular.

This leaves us with what is a library, it’s a pre-written JavaScript code that allows for easier development of JavaScript-based applications. This means that React itself is not sufficient to build a complete web application. You will need a lot of other libraries along with React to complete building your application they could be for network requests, caching, or a design system. So this is why mastering React not just involves the library itself but other libraries of the eco-system as well. So we are going to divide the understanding into three parts for clear understanding.

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 useState(), useEffect() and 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 isLoading, isError and 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.

Conclusion

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