Thread by @swapnakpanda

How much JavaScript is good enough to start in React?

⇩

💭 Why is this Thread?

⬘ JavaScript and React both are popular and having a large share.

⬗ I have often seen people jumping straight to React without much knowledge in JavaScript.

⬙ Is this a good idea? If no, then how much JavaScript knowledge is enough to start React?

👩‍💻 Beginning Words

⬖ I suggest to start learning JavaScript first.

⬘ If you start with React, you would frequently travel between JavaScript and React making the learning progress slower.

⬗ Let's see how much JavaScript should be enough to start working in React.

📋 What should I learn?

➊ Basics
➋ Array.prototype Methods
➌ Array Destructuring
➍ Array Spread
➎ Object Destructuring
➏ Object Spread
➐ Template Literals
➑ ES Modules

➊ 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()

Know more:

https://twitter.com/swapnakpanda/status/1502950275837005825?s=20&t=OQrmhLylXm8LXbtMJY0-jA

➌ 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

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

⚠️ Repost Notice ⚠️

⬘ Though this is my original work, portions of it was previously posted in [CHIRPBIRDICON]

⬙ If you liked this content and do feel others might learn from it, please support.

💭 Feedbacks

✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?

Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.

End of 🧵

Hey 👋 I am a Tech Educator from India 🇮🇳

I am sharing Tutorials, Tips, Techniques, Infographics, Cheat Sheets, Interview Questions and Roadmaps on Web Development, DSA and, Database.

Are you interested? I am sure, you are.

To never miss anything, Follow Me ✅