Javascript for ReactJs

 ARROW FUNCTIONS

old JS:
function DoXXX() {

}

React:
const DoXXXX = () => {

}
-------------------------------

old JS:
export default function DoXXX() {

}

React:
export const DoXXXX = () => {

}

===========================
ANONYMOUS FUNCTIONS

<button onClick={() => {
     console.log("hello world");
    }}>

</button>

===========================
TERNARY OPERATORS

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

const Component = () => {
   return age > 10 ? <div> Pedro </div> ? <div> Jack </div>;
};

======================================================
OBJECTS/DICTIONARIES/HASH MAPS

(Short-hand 1) Deconstructor:
const person = { name: "Pedro", age: 20, isMarried: False };
const { name, age, isMarried } = person;

(Short-hand 2) Assigns if field is the same:
const name: "Pedro";
const person = { name, age: 20, isMarried: False };

(Short-hand 3) Assigns all except specific overrides on objects:
const person = { name: "Pedro", age: 20, isMarried: False };
const person2 = { ...person, name: "Jack" };

(Short-hand 4) Assigns all except specific overrides on arrays:
const names = [ "Pedro", "Jack", "Jessica" ];
const names2 = [ ...names: "Joel" ];

======================================================

let names = [ "Pedro", "Jessica", "Carol" ];

.map()
.filter()
.reduce()

names.map((name) => { console.log(name) });


names.map((name) => { return "Joe" }); // overwrites all with Joe

names.map((name) => { return name + 1 }); // appends 1 to end of name

names.map((name) => { return <h1> {name} </h1> });


let names = [ "Pedro", "Jessica", "Carol", "Pedro", "Pedro" ];
names.filter((name) => { return name !== "Pedro" });

======================================================
Async + Await + Fetch

===========================