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