Learning React can be confusing at first, sometimes even downright scary! This article aims to put forth a complete roadmap to learn React so that you have a clear path moving forward.
There are some pre-requisites to learning React, without which, you will find yourself struggling hard. So it is highly advisable to master the following skills first, before diving into learning React
- HTML - You need to be well acquainted with the basic tags and the attributes they accept. No need to be an HTML master, just the basics would do
CSS - Unless you want to create bland websites like this
You should definitely spend some time going through the basics (namely
grid layout, and
responsive design) of CSS too.
DOM manipulation, and
event triggering. Learning the ES6+ features such as the
rest operators, and
arrow functionswould come in handy too.
Setting up a React Project: Before you can start learning React, quite evidently you would need to set up a React Project, which is a highly tedious task. Luckily we have awesome tools like the
create-react-appto get the job done
React.createElementcalls only, but there is no point in making your life miserable doing it
You should be familiar with the differences between JSX and HTML, like every
elementmust contain a closing tag, the events are in Camel Case (
onClickas opposed to
onclick), and the ability to use JS inside the code directly.
Types of Components: Although recently, there is a push toward using Functional Component for all purposes as they are more intuitive and easier to code, you should have a basic understanding of Class Components too to ensure when you work on a
legacy code base, you don't end up looking like this
Props vs State:
Propsallows us to pass data from one component to another, but if used inappropriately, it can lead to
prop chaining, a highly undesired practice in React projects, which we will fix later down the Roadmap.
Stateallows you to store data between the component re-renders. Updating the
statere-renders the component and every child accepting the
statedata as a prop.
Lists and Keys: Often while dealing with a lot of dynamic data, you be required to render
listsof data. Make sure you add
keyto allow React to keep track of the elements and optimally re-render them, instead of re-rendering them every time something changes.
Component Life Cycle: The Class Components has life cycle methods such as
componentWillUnmount(), which can also be emulated by the
useEffectHook in Functional Components. These life cycle methods run at specific time, making them useful for certain tasks, such as an API call on
componentDidMount()or timer cleanups during
Let's now dive into the Intermediate React topics
Styling: Till now your Application would end up looking pretty basic. Let's fix it right now. There are hundreds of choices to style the application, but unless you are using some library such as Material UI, Chakra UI, Semantic UI, I would highly suggest using CSS or SCSS modules, which gives you complete power of CSS with the addition of keeping the styling scoped to just one file.
No more to worry about using the same class name twice and accidentally overriding it.
Hooks: Hooks were a recent addition in React 16.8 and it totally changed the React Ecosystem. Hooks introduced features from Class Components into Functional Components, making it possible to use
refs in Functional Components.
Often people avoid learning the difficult concepts such as
ref, but that's a bad idea as if you are building anything of real-world significance, your application will definitely rely heavily on these. Moreover using
contextallows you to avoid the
prop chainingissue discussed previously.
React also allows you to create custom hooks to cater to your personal need, which you should also look into. If you want to master Hooks, you should definitely check out this article
Portals: Occasionally you will run into edge cases where, you styling elements such as modal to render on top of elements further down the DOM tree becomes a nightmare. In such cases, Portals are there to help you out, they allow you to render elements outside the default React Root Element, making it far easier to not only style, but even group elements together
Lazy Loading: Lazy loading is a design pattern commonly used in web design and development to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used.
Luckily implementing Lazy Loading in React is a walk in the park. All you need is the
SuspenseComponent and familiarity with the
Found everything on the list a piece of cake?
Put your knowledge to the test with these advanced skills
Webpack & Babel: None of the JSX you write can be understood by a browser, so it has to be
transpiledinto regular JS for Browser to execute it. The transpilation process is handled by Babel and bundling everything into a single file is done by Webpack.
To truly understand how everything fits in, you need to build a React App from scratch, check out this article to know how to do it.
Testing: Testing is something very few people actually enjoy doing, as it falls under the category of "dark work", where the things you doesn't make any visible changes. But for large applications, it is of crucial importance as a small change might end up breaking the entire application.
That's all you need to know about React
But what about the React Router, or perhaps something for state management?
Glad you asked! Let's dive into the React Tools that are worth diving into. You can check these out as soon as you are done with the basics of React
Routing: Since React is a library and not a framework, it doesn't ship with its own routing, but React Router is a library that's worth looking into.
If you are using an SSG (Static Site Generation) or SSR (Server Side Rendering) like Gatsby or Next.js, then you would already have a routing built-in, without requiring any additional libraries
State Management: State Management tools like Context API is a nice feature of React, but falls short in the case of large scale applications. In such cases, using a library like Redux or the innumerable ones available on
npmwould be a better idea
Cross-Platform: If you want to use the same logic as your Web App in a Mobile Application and Desktop Application too, React Native and Electron (or preferably Tauri) would be great tools to look into.
Styling: If you don't want to write custom styling for your application, Material UI, Chakra UI, or Semantic UI might be worth a look. It can drastically reduce the effort required as they come with pre-built components.
That's the Complete React Roadmap. Hope that helps you plan out your journey to become a ground-breaking React Developer.
Did I miss something? Share it in the comments below 👇
Want to see an Advanced React Project built from scratch? Check out
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to connect? Reach out to me on LinkedIn
I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram
Follow my blogs for Weekly new Tidbits on Dev
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Would you like to collaborate on our site?
As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.