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.

Prerequisites

There are some prerequisites 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

1. 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
2. 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, and responsive design) of CSS too.
3. 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, and event triggering. Learning the ES6+ features such as the spread & rest operators, and arrow functions would come in handy too.

Basics

1. 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

2. 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 it

   

   You 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 to onclick), and the ability to use JS inside the code directly.

3. 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

   

4. Props vs State: Props allows 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.

   State allows you to store data between the component re-renders. Updating the state re-renders the component and every child accepting the state data as a prop.

5. Lists and Keys: Often while dealing with a lot of dynamic data, you be required to render lists of data. Make sure you add key to allow React to keep track of the elements and optimally re-render them, instead of re-rendering them every time something changes.

6. Component Life Cycle: The Class Components has life cycle methods such as componentDidMount() and componentWillUnmount(), which can also be emulated by the useEffect Hook 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 componentWillUnmount()

Intermediate

Let's now dive into the Intermediate React topics

1. 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.

2. 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 and refs in Functional Components.

   Often people avoid learning the difficult concepts such as memo and 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 context allows you to avoid the prop 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

3. 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

4. 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 the import() function.

Advanced

Found everything on the list a piece of cake?

Put your knowledge to the test with these advanced skills

1. 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.

2. 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.

3. 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

1. 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

2. 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 idea

3. 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.

4. 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!