Modern Javascript Crash Course for Reactjs developers

Object Literals
template-strings
const greeting = "Hello World";

const answer = "Forty Two";

const html = `
  <div>
    ${Math.random()}
  </div>
`;

html;
Classes
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello ${this.name}!`);
  }
}

class Student extends Person {
  constructor(name, level) {
    super(name);
    this.level = level;
  }
  greet() {
    console.log(`Hello ${this.name} from ${this.level}`);
  }
}

const o1 = new Person("Max");
const o2 = new Student("Tina", "1st Grade");
const o3 = new Student("Mary", "2nd Grade");
o3.greet = () => console.log("I am special!");

o1.greet();
o2.greet();
o3.greet();
Promises
// const fetchData = () => {
//   fetch('https://api.github.com').then(resp => {
//     resp.json().then(data => {
//       console.log(data);
//     });
//   });
// };

// when we use async and await like below, fetchData become asynchronous function too and return, promise object.
const fetchData = async () => {
  const resp = await fetch("https://api.github.com");
  const data = await resp.json();
  console.log(data);
};

fetchData();
Destructuring Objects in JS
// const PI = Math.PI;
// const E = Math.E;
// const SQRT2 = Math.SQRT2;

const { PI, E, SQRT2 } = Math;

// Somewhere in a React App
// const {Component, Fragment, useState} = require('react');
// useState();

// const circle = {
//   label: 'circleX',
//   radius: 2,
// };

// const circleArea = ({radius}, {precision = 2} = {}) =>
//   (PI * radius * radius).toFixed(precision);

// console.log(
//   circleArea(circle, { precision: 5 })
// );

// const [first, second,, forth] = [10, 20, 30, 40];

// const [value, setValue] = useState(initialValue);

/*
const [first, ...restOfItems] = [10, 20, 30, 40]
console.log(first);
console.log(restofItems);
*/


const data = {
    temp1 = '001',
    temp1 = '002',
    firstName = 'Ahmad',
    lastName = 'Khan',
};

// with following line we can use the value of temp1 and temp2 and create the new object name person.
const {temp1, temp2, ...person} = data;


// line below will create the new copy of restOfItems into newArray. it will be a shallow copy. spreed operator.
const newArray = [...restOfItems]


Previous
Next