All The JavaScript You Need To Know For React

Functions

• Working with functions in JavaScript is important for React development.
• Arrow functions are a concise way to define functions and are commonly used in React.
• Anonymous functions can be used to execute commands without declaring a function.

Arrow Functions

In Normal JavaScript We define function like this

function doSomething(){
	//logic
}

NOTE

In newer versions of JavaScript we can use Arrow Functions. This syntax is in many different languages

const doSomething = () => {
	//logic
}

even-though this looks kinda complex but it makes it better when you are working with callback functions

Exporting Functions

In Normal Js :

export default function doSomething(){
	//logic
}

Newer Version

export const doSomething = () => {
	//logic
}

Anonymous Functions

Anonymous functions in JavaScript are functions that are defined without a name. They are often used as one-time use functions or as arguments to higher-order functions

Example :

<button 
	onClick={() => {
		console.log("Hello World");
	}}
></button>;

It allows to execute functions without having to declaring functions. This is usefull in React

---

Conditionals and Ternary Operators

• Ternary operators are useful for minimizing code and are commonly used in React.
• They can be used to conditionally render UI components based on state.

Reacts allows u to write HTML inside Js but actually it’s not called as HTML its modified version of HTML names JSX. u need to decrease lines of codes using in UI so that doesn’t looks messy.This is Where Ternary Operators Comes In

with Normal Js . If else statement looks like this :

let age = 10;
let name = "Pedro";
 
if(age>10){
	name = "Pedro"
}else {
	name = "Jack"
}

This is taking way too much space and there is easier way to do this. They are basically shorthand notations for doing if statements or if else statements.

let age = 10;
let name = age > 16 ? "Pedro": "Jack;

So in React we can use this like this :

let age = 10;
let name = age > 16 ? "Pedro": "Jack;
 
const Component = () => {
   return age>16? <div>Jack</div> : <div>Jack</div>;
};

---

Objects

• Objects are a fundamental data structure in JavaScript and are used extensively in React
• Destructuring objects allows for easy extraction of properties into variables
• The spread operator can be used to copy objects and add or modify properties

const person = {
	name: "Pedro",
	age: 20,
	isMarried: false,
};
 
const person2 = {...person, name: "Neo"}

NOTE

name: name, == name,

---

Arrays

• The map function is used to iterate over arrays and transform elements

let names = ["Pedro", "Neo", "Trinity"];
 
names.map((name) => {
   return name + "1";
});
 
//OUTPUT : Pedro1 , Neo1 , Trinity1

• The filter function is used to filter out elements from an array based on a condition

let  names = ["Pedro", "Neo", "Trinity", "Pedro"];
 
name.filter((name)=> {
	return name != "Pedro";
});
 
//OUTPUT : "Neo", "Trinity"

• Both functions are commonly used in React for rendering lists and filtering data

---

Additional Concepts

• Promises and async/await are important for working with APIs and handling asynchronous data
• Fetching data from APIs is a crucial concept in React development
• The speaker recommends learning these concepts before diving into React

---

Resources