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

```javascript
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.
    

```javascript
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 :