How much JavaScript to learn before learning React?

How much JS should I know before I start learning React – this is a very common question I get asked all the time. In this blog post, I will break down a few myths and also list some very important topics/things you should know before you start React, or any other similar library/framework (Angular, Vue, etc.)

You don’t need to learn all of JavaScript

Stress on the keyword “all”. A very important thing is that if your aim is to become, say a frontend developer (a complete guide on it here), you don’t want to spend month after month on only JavaScript preparation.

The ideal mix that worked for me is to learn “just enough” to move on to React. This absolutely does not mean that you have learned JavaScript. This only means that you don’t need to. JavaScript, like any programming language, can be vast, especially with all the tooling and ecosystem around it. Therefore, it is super important to get the core, fundamental understanding of JavaScript ready before you learn anything that involves JavaScript.

Should I learn React directly without JavaScript?

Different people might give different answers here. Don’t get tricked by only one opinion (this applies to this blog post too). In my opinion, the fastest way to learn and absorb React is to go through JavaScript, and not directly jump on React.

The reason for this is context switching. When you learn React, you will parallelly learn a lot of JavaScript too, all the time. If you come with a solid understanding of JavaScript to React, you will spend a lot of time on React methodologies and how to work inside a React codebase, best practices, and libraries to choose. This is only possible if you aren’t asking every minor detail about JavaScript syntax/code. If you do too much context switching from React to JavaScript learning, you’ll eventually make less progress on both ends.

However, this also does not mean that you should over-optimize your JavaScript learnings for React. You don’t need to, for example, learn about Node.js or streams in Node.js to become a good React developer. You also don’t need to learn about service workers and ES6 proxies for becoming a good React developer. A typical coding course might confuse you that you need those parts, but trust me, initially you don’t. You can always “context switch” and come back to learn these things if needed.

Okay, so if this is not required, then what is truly required before you move on to React?

Things to learn before learning React

Here’s a compiled list of topics I believe you should know. I have divided these topics into 3 categories: Diamond, Gold, and Silver.

Diamond topics – are absolutely mandatory and you should have a crystal clear solid understanding. They will haunt you back if you try to skip these.

Gold – recommended to learn, but you can do some context switching and learn them on the “runtime”

Silver – these might be advanced topics that are good to know under the hood things, but usually not needed in the initial phase.

Diamond topics are super important. I often think of this quote when people ask me can we start directly with React and learn JS later:

It isn’t the mountains ahead to climb that wear you out; it’s the pebble in your shoe.

– Muhammad Ali

Diamond pre-requisites for React

The points below are a few things you can almost not afford to miss. If you have a weak understanding of these topics, they’ll become bigger bottlenecks in your journey as and when you move ahead.

• Using a computer, a browser.
• Language syntax.
• Programming fundamentals – variables, functions, loops, conditionals, how a program runs.
• Working with a text editor like VSCode.
• Understanding of HTML, CSS, and how it connects to JavaScript with DOM API.
• Basic operations with JavaScript – network requests, alerts, DOM changes, event listeners
• Asynchronous behavior of JavaScript – Callbacks, promises, async/await.
• Data structures and data types in JavaScript and how they differ from each other – string, boolean, undefined, null, objects, etc.
• Ability to write simple standalone JS programs and functions (like calculating prime numbers, making 10 HTTP requests sequentially/parallelly using loops/promises, etc.)
• Ability to google your problems, always.

If you have any additions to it, feel free to leave them in a comment below.

Gold pre-requisites for React

These things are not strictly required but are recommended in order to create an even stronger steel framework of understanding.

• ES6+ syntax – how ES6 module system works, why const and let were introduced, variable scoping concepts, function hoisting.
• Linux command line – How to work with bash commands, creating folders, running scripts, deleting files, and navigating around the filesystem.
• Git – How to deploy your projects to remote websites like GitHub using git from your command line.
• Package manager understanding – how npm or yarn work, why are they even required, semantic versioning, lockfiles.
• High-level overview of additional tooling – webpack, babel, prettier, vscode.
• Hosting providers you can use to deploy your static sites easily – netlify, vercel, github pages, heroku, etc.
• Browser devtools like chrome devtools for debugging your code/errors or inspecting network requests.
• Understanding JSON/APIs/HTTP/REST practices in a little depth.

Silver pre-requisites for React

These things are not required initially, but can really help you in long run to become a great developer overall with your stack. In a nutshell, this section can come “after” learning React too.

• TypeScript with React – how to strongly type your code to catch more errors at development time
• A clear structure of organizing your files/folders in a project.
• CI/CD knowledge, for example, with GitHub actions for deploying new changes automatically.
• Code testing to shipping code confidently to production.
• The stronger grip on the best libraries in the ecosystem for their specific use case ( react-query? apollo-graphql? tailwindcss? next?)

How to learn frontend web development?

The sad state of web development right now is that there’s not a lot that needs to be learned to become a great developer, but the content noise levels are at an all-time high. The secret is to just a few things in depth.

If you’re looking to learn frontend web development, my personal recommendation is to research for any one good complete source where you can learn from start to end, instead of being half pregnant on nine websites teaching you different things differently. Check out codedamn’s own frontend web development learning path.

We also provide a full-blown full-stack learning path roadmap, that covers frontend as close to 50% of the curriculum. Feel free to try it.

Conclusion

This blog post should have given you clarity on how much JavaScript you should be aware of before starting learning React. How can you learn React properly? That’s for another blog post.