ES6 JS Refresher React Learning

 JavaScript refresher

let and const:

in Normal js we mostly used the var keyword to store the variables. but let is the new advanced concept to hold the value , its introduced in es6.

let name = 'raj';  is same as var name = 'raj';

const host = 'localhost'; // To declare the constant variables

 

Arrow Function:

let hello = () => {
  return "Hello World!";
}
 hello();

 Exports and Imports:

                     Spread & Rest Operators:

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

    Rest Operator :  The rest operator is used to put the rest of some specific user-supplied values into a JavaScript array.

function sumUp(...num){

console.log(num);//[10,20,30] here i am getting the array

}  

sumUp(10,20,30);// Passing here as a numbers not array

Conver list of values to array

Spread operator :

const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Oluwatobi", "Sofela", "is", "my", "name." ]

2- Convert Array to individual values is an spread operator. 

its just apposite of rest operator, 

 Foor Loop:

let numbers = [2,3,4,5,6,7];

for( let num of numbers){

console.log(num);// 2,3,4,5,6,7

}

Template Literals(With sign ``): we can display multi line description and can concatenate the dynamic value like below.

let name = 'Raj'

let description = `

Hello My name is
${name}

`;

 Destructing Array: Easily extract array element or object properties and store them in variables.

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

Destructing Object: Easily extract object element and store them in variables.

 let info = {

name = 'raj',

age = 26, 

}

let {name} = info; // raj 

Online editor for js check:

 

Const : 

we can declare it only once and can not change it. we can change it only out of the scope means for below example we can re declare with in the function and use it, but it will not effect outside the fn, so it works with in the scope only.

 

 How to run The Application(Basic Commands) :

Navigate to the project or open vscode terminal and run.

npx create-react-app my-app
cd my-app
npm start

npm start or yarn start  -> Start the development server localhost:3000

npm run build or yarn build -> Bundles the app into static files for production.

https://jsbin.com/?html,js,output

JSX Extends for  javascript XML

Some Usefull Function used for Array:

.map

.filter

.include