JavaScript Essentials for React Developers

Basics

⇥ Variable Declaration
⇥ Variable Scope
⇥ Variable Hoisting
⇥ Functions
⇥ Arrow Functions
⇥ Callback Functions
⇥ Closure
⇥ Basic Operators
⇥ Array Literals
⇥ Object Literals
⇥ if, if...else
⇥ for, for...in, for...of, while, do...while

Array.prototype Methods

⇥ forEach()
⇥ map()
⇥ reduce()
⇥ flat()
⇥ flatMap()
⇥ find()
⇥ filter()
⇥ slice()
⇥ splice()
⇥ push()
⇥ pop()
⇥ shift()
⇥ unshift()
⇥ some()
⇥ every()

Array Destructuring

It's frequently used in hooks esp. useState()

Example:

⇥ const [fruits, setFruits] = useState([]);

Array Spread

There are so many use cases. One of the place where we frequently spread an array is adding/updating/removing an item from the state.

Example:
Add an item to the starting of Array

⇥ let newArray = [itemToAdd, ...oldArray]

Object Destructuring

⬒ Properties are passed as an object parameter to our function component.

⬓ We can destructure it and, specify only those properties that we are going to use.

Example:

function MyComponent({name, address}) {

}

Object Spread

We may spread an object to pass those to a child component.

Example:

function MyComponent({name, address, ...rest}) {
return
}

Template Literals

⇥ Untagged Template Literals
⇥ Tagged Template Literals
This one is used heavily in few styling libraries.

ES Modules

⇥ import
⇥ import {}
⇥ export
⇥ export default

Conclusion

⬖ Learning method varies from person to person.

⬘ Though it's not mandatory to have JS knowledge, you can learn both React and JS at the same time.

⬗ But for a smooth riding, it's advisable to have basic knowledge of JS before starting your React journey.