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.
Pre-requisites
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
selectors
,box-model
,flexbox
,grid layout
, andresponsive design
) of CSS too. -
JavaScript - Since React runs on top of JavaScript, you do need a solid foundation to ease up the process of learning React. As a barebones, you would need
variables
,conditional statements
,loops
,DOM manipulation
, andevent triggering
. Learning the ES6+ features such as thespread
&rest operators
, andarrow functions
would come in handy too.
Basics
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-app
to get the job done-
Get Acquainted with JSX: Typically React code is written JSX (JavaScript XML). You can opt to not use it, using only
React.createElement
calls only, but there is no point in making your life miserable doing itYou should be familiar with the differences between JSX and HTML, like every
element
must contain a closing tag, the events are in Camel Case (onClick
as opposed toonclick
), 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:
Props
allows us to pass data from one component to another, but if used inappropriately, it can lead toprop chaining
, a highly undesired practice in React projects, which we will fix later down the Roadmap.State
allows you to store data between the component re-renders. Updating thestate
re-renders the component and every child accepting thestate
data as a prop. Lists and Keys: Often while dealing with a lot of dynamic data, you be required to render
lists
of data. Make sure you addkey
to 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
componentDidMount()
andcomponentWillUnmount()
, which can also be emulated by theuseEffect
Hook in Functional Components. These life cycle methods run at specific time, making them useful for certain tasks, such as an API call oncomponentDidMount()
or timer cleanups duringcomponentWillUnmount()
Intermediate
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
state
,lifecycle methods
,context
andref
s in Functional Components.Often people avoid learning the difficult concepts such as
memo
andref
, 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 usingcontext
allows you to avoid theprop chaining
issue 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
Suspense
Component and familiarity with theimport()
function.
Advanced
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
transpiled
into 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.
TypeScript: This is simply one of the core skills you must possess. TypeScript is a superset of JavaScript, which adds the important, yet optional, strict type system and is the language of choice for any large scale React application.
That's all you need to know about React
Ecosystem
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
npm
would be a better ideaCross-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.
Wrapping Up
That's the Complete React Roadmap. Hope that helps you plan out your journey to become a ground-breaking React Developer.
Happy Developing!
Did I miss something? Share it in the comments below 👇
Want to see an Advanced React Project built from scratch? Check out
ruppysuppy / Crypto-Crowdfund
🤑💰 Crowdfunding Platform backed by Ethereum Blockchain to bring your creative projects to life
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
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
FAQ
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.
Top comments (8)
This is a really awesome resource! More React developers incoming!
I love the GIFs.
Wow your website is insane.
I've never heard the term "dark work" before.
I just finished the course at Free Code Camp on React. It's good to know that developers are leaning towards using functional components instead of class components.
Bravo!!! Nice one...
Thanks!
Best of luck on your React journey!
Thanks :)
How cool is that
youtube.com/watch?v=lqFi-XLtw6M