19
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 breakdown 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.)
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.
Different people might give different answers here. Don't get tricked by only one opinion (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 jumping 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 in 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?
Here's a compiled list of topics I believe you should know. I have divided these topics into 3 categories: Diamond, Gold, Silver.
Diamond topics - 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 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
The points below are few things you can almost not afford to miss. If you have a weak understanding on 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.
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
constandletwere introduced, variable scoping concepts, function hoisting. - Linux command line - How to work with bash commands, creating folders, running scripts, deleting files, navigating around 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 about JSON/APIs/HTTP/REST practices in a little depth.
These things are not required initially, but can really help you in long run becoming 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 ship code confidently to production.
- Stronger grip on best libraries in the ecosystem for their specific use case (
react-query?apollo-graphql?tailwindcss?next?)
The sad state of web development right now is that there's not a lot that needs to be learnt to become a great developer, but the content noise levels are 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. 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.
This blog post should have given you a clarity on how much JavaScript you should be aware of before starting learning React. How to learn React properly? That's for another blog post. If the article helped you, feel free to subscribe to the developer newsletter below to receive weekly updates on more high quality articles here.
19