Thread by @swapnakpanda

JavaScript essentials for your React journey

⇩

➊ 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 <ChildComponent {...rest} />
}

➐ Template Literals

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

➑ ES Modules

⇥ import
⇥ import {}
⇥ export
⇥ export default

👉Suggestions👈

Do you think anything is missed here? Add those in the 💬

🎯 Final Words

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

🚏 Upcoming Twitter Space

📅 12-Feb-2022 (Tomorrow)
⏰ 07.30PM IST (02.00PM GMT)

⬘ Join me in this space to have some interesting technical discussion around "Arrays and Functions in JavaScript".

⬙ Share among your circle if anyone is interested.
twitter.com/i/spaces/1dRJZ…

End of 🧵

Hope you found this one useful. I am sharing "Guidance" threads on HTML, CSS, JavaScript and React.

To never miss any, Follow me ✅