The 2024 ReactJS Developer Roadmap | Zero to Hero

Hi Guys!! This article contains a lot of links, but believe me, after reading them you’ll get started with React JS right away. If reading is not what you looking for, add the Natural Reader Text to Speech extension to your chrome and make your life easy. :)

Honestly, I wasted a lot of my time searching for the best material to get started. But didn’t find a single best roadmap to learn REACT. So I gathered everything which I as a beginner needed to learn React. If you don’t have a software degree, don’t worry I got you too. This article is for all. Let's get started. :D

Remember: No matter, which framework or library you learn for web development, you must know the basics and when I say basics, I mean HTML, CSS, and JavaScript, these three are three pillars of web development.

In order to be a React Developer Pro, you need to have a basic understanding of Javascript.

JavaScript

JS is the only thing which brings logic and programming to the life of a front-end developer. It is very much flexible and surprising.

Basics

1. Var, Let & Const: Learn about their scope.
2. Data Types (Primitive and Non-Primitive): Learn which type is mutable and which is immutable.
3. Loops: Get a bit of an understanding of loops, and to be honest one loop will do your all work. I would recommend seeing FOR loop. Why? It’s my personal choice only. :D
4. Objects: Learn how to create, display or access an object.
5. String: Go through some basic string methods, they will make your coding life a lot easier.
6. Arrays and their basic functions: Array functions are one of the best things in React. I know some of you must be thinking it’s javascript basics but React is a declarative and flexible JavaScript library. :D
7. Immutability and More Array Functions: Go through the immutability concept only. This article contains more array functions if you want to learn.
8. Spread Operator and Rest Parameter: You’ll need these operators a lot sometimes so get familiar with them.
9. Shallow and Deep Copy: Get the basic understanding only.
10. Lexical Scope: Often people don’t know that it is called lexical scoping, but you know it. :)
11. Difference b/w ES5 & ES6

Advanced JavaScript Concepts:

Congrats! You have completed the first part, now let’s learn more about javascript.

1. Hoisting: Learn the hoisting behaviour of var, let, const, simple function & arrow functions. Difference between reference and undefined error.
2. Closures: Closures are difficult to grasp at first but going step by step will help you understand how easy they are. Reread as many times till you get them. We’re not racing, here our goal is to learn. Have a break and come back later. :D
3. Arrow Functions: They are cleaner, learn how to create them.
4. Callbacks: Callbacks are great until they are being nested and become very hard to read or maintain. This is called callback hell. To fix this problem, Promises were introduced.
5. Promises and Promise Chaining: Promises are one of my favourite topics. They are often used in React projects, especially in API calls. They are also asked in interview questions.
6. Async Await
7. Web APIs (setTimeout, setInterval): Learn how to use these methods and how they actually function. setTimeout is often asked in interviews.
8. Eventloop (JS is a single-threaded Async Concurrent language): No article would explain it better than this video.
9. Currying Function

Yeah, we have completed the JS section. Now you’re ready to learn REACT.

REACT

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front-end library which is responsible only for the view layer of the application. It was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram.

Basics Part-1

1. What is React and how it works?
2. Virtual DOM vs Real DOM: Understand why Real DOM is slow.
3. Reconciliation: Understand how React updates the browser.
4. Components: Learn functional & class components, and how to declare them.
5. React Component LifeCycle
6. State and Props: Learn how these both are used to pass data in React. Props drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level.
7. Difference between class & functional components: It is generally believed that functional components are faster than class components. React team has been promising optimizations to functional components.
8. Initialize a React App using create-react-app: Create react setup and run your first react project.
9. Hello World: How can we start a new thing without writing a hello world code? It’s a tradition in the software world. :D

Basics Part-2

1. Introducing JSX
2. Rendering Elements & Components and Props: Learn how to render a component.
3. State and Lifecycle
4. Handling Events: Understand how to handle events on forms and buttons.
5. How do we style React Components?
6. Conditional Rendering: Get familiar with the conditional operator “? :”. It's one of the best practices.
7. Lists and Keys
8. Forms
9. Lifting State Up
10. Composition vs Inheritance
11. Thinking In React
12. React Router
13. Single vs Multiple Page Application
14. Network request (Fetch & Axios)
15. useState & useReducer
16. useEffect: Learn how to implement Mount, Update and Unmount Callbacks using useEffect
17. useRef
18. useMemo & useCallback

React Advanced Concepts

If things are becoming overwhelming for you, I would recommend at least having a basic concept of HOC, HOF, Redux and Formik from the following. :)

1. Code-Splitting
2. Context
3. Error Boundaries
4. Forwarding Refs
5. Fragments
6. Higher-Order Components (HOC)
7. HOFs
8. Difference between Callback and HOFs
9. Integrating with Other Libraries
10. JSX In Depth
11. Reconciliation
12. Refs and the DOM
13. Render Props
14. Static Type Checking
15. Typechecking With PropTypes
16. Uncontrolled Components
17. Implement Formik and Yup for form validation
18. Flux
19. Redux & mapStateToProps
20. Add Redux Thunk to your React Application
21. Redux persist (whitelist & blacklist)

General Concepts:

1. npm vs yarn
2. Difference between npm & npx
3. Babel & Webpack
4. Https vs Http
5. What is Gulp and Grunt? (Just Overview)

That’s all about the ReactJS RoadMap For Developers. It’s very comprehensive for sure, but there is a good chance that many of you may already know most of the stuff. Remember to Start small and follow along. :)

Soon I’ll write an article on CRUD operations in React using redux for your better understanding. Till then Bye. :D

For more stories, you should follow my profile, Iqra Jamil. Happy Learning! :)