You know that you need to know Javascript to use React. But how much Javascript should you know? Do you need to learn every concept and master it or can you learn a few basic concepts and then jump into React?
In the long term, the more Javascript you know the better. It is the primary programming language of the web and is crucial fundamental knowledge that will help you understand and use frontend frameworks and tools. Not having a good grasp of Javascript will constantly bother you as you struggle to understand why some code doesn't work.
But realistically, only a subset of Javascript concepts are commonly used with React. So knowing this subset should be sufficient for you to start learning React. If you are not comfortable with Javascript, you might have to go back to it repeatedly when you struggle with certain concepts.
So here are the Javascript concepts that you must know before learning React. This is not a complete list but it should give you a good idea of what you should know.
Concepts that you should definitely know before learning React
If you don't know the following concepts, you will really struggle to understand React.
Programming basics
- Statements
- Variables
- Loops (e.g. while, for)
- Mathematical (e.g. +, -) and logical operators (e.g. >, <, ===)
- Conditional branching (e.g. if, ? operator)
- Functions (including arrow functions)
Data structure basics
- Strings and string methods (e.g. indexOf, slice, substr)
- Objects and object methods (e.g. Object.keys, Object.entries)
- Arrays and array methods (e.g. map, reduce, find, sort, push, unshift, includes)
Modules (e.g. import, export)
Concepts that you need to know but could skip for a while
You might be able to start with React without these concepts but not knowing them will limit what you can do.
Promises and asynchronous programming (i.e. async / await)
- Websites built with React usually need to download data from a server. The most basic way* to do this is with the Fetch API which uses Promises and so you need to know how to work with them. Other data fetching methods tend to be asynchronous as well.
Classes
- Most React components created nowadays are Function components. But before React hooks were introduced, most components were Class components. While you could avoid writing Class components now with by using React hooks, older React codebases still have many Class components.
Newer Javascript syntactic sugar
- Javascript is constantly evolving as a language with new concepts, operators and built in methods being added. There are several newer Javascript features that allow you to write code in a shorter, easier way. These features are commonly referred to as syntactic sugar and while you can achieve the same result without the older, basic syntax, they can make it a lot easier to write code. The following are the most useful for working with React.
*Perhaps the most basic way of doing data fetching is with the older XMLHttpRequest API but it is more cumbersome and the Fetch API is more commonly used
