React? Bro, Learn JS First!

Context :

So you just opened a React tutorial, saw a bunch of curly braces inside HTML tags, and thought, "Yep, I’m officially a frontend dev." But wait — what’s map() doing inside a <div>? Why does this suddenly feel like your ex ( I don’t have ex…I'm already married ) — unpredictable and confusing? And why does your terminal scream every time you try something new?

If this sounds familiar, don’t worry — you’re not alone. The truth is, React is built on top of JavaScript, and jumping into it without a good grip on JS fundamentals is like trying to ride a bike before learning to walk. It can be done, but you’ll fall… a lot.

In this blog, we’ll break down the essential JavaScript concepts you must know before learning React — no fluff, no bootcamp gatekeeping, just the good stuff. Whether you're self-taught, bootcamp-raised, or tutorial-binged, this guide will help you avoid those painful “React but confused” moments.

---

Topics :

• Logical AND and OR operator

• Template Literals.

• Ternary Operator

• Destructuring Array and Object

• Default parameter

• Rest and Spread operator

• Array methods :

  1. Map

  2. Filter

  3. ES6 array methods

• Async and Await for API calls

---

1. Logical AND and OR operator :

So, this is one the most important concept of Logical AND and OR operator

• So, for checking both the condition, this type of logical operator is used.

• syntax : && → logical AND and || → logical OR.

  • If Both the condition is true then and only then … Logical AND will work out.

  • If the first condition is false then It won't check the second condition.

  • For Logical OR, If one of the condition is right. Then it will execute.

function greet() {
  return ("Hey I'm ayush");
}
const isGoing = true;
const ramGoing = false;
console.log(isGoing && greet())
console.log(ramGoing && greet())
console.log(isGoing || greet())
console.log(ramGoing || greet())

---

2. Template Literals :

• Instead of writing the string with “ “ and ‘ ‘ but here will use ` ` ( Backticks ) and to write anything that is variable we have to use ${variable name}.

• It’s the modern way of writing it.

const name = "Ayush";
const age = 19;
console.log("My name is" + name + ", I'm " + age + "years old");
console.log(`My name is ${name}, I'm ${age} years old`);

---

3. Ternary Operator :