React: Difference between revisions

3,913 bytes added ,  1 October 2019
completion of JavaScript section
completion of JavaScript section
Line 324: Line 324:
//  dinner: "mac and cheese"
//  dinner: "mac and cheese"
// }
// }
</source>
== Asynchronous requests ==
=== Simple promises with fetch ===
<source lang="js">
fetch("https://api.randomuser.me/?nat=US&results=1")
  .then(res => res.json())
  .then(json => json.results)
  .then(console.log)
  .catch(console.error);
</source>
=== Async/Await ===
<source lang="js">
const getFakePerson = async () => {
  try {
    let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
    let { results } = res.json();
    console.log(results);
  } catch (error) {
    console.error(error);
  }
};
getFakePerson();
</source>
=== Building Promises ===
<source lang="js">
const getPeople = count =>
  new Promise((resolves, rejects) => {
    const api = `https://api.randomuser.me/?nat=US&results=${count}`;
    const request = new XMLHttpRequest();
    request.open("GET", api);
    request.onload = () =>
      request.status === 200
        ? resolves(JSON.parse(request.response).results)
        : reject(Error(request.statusText));
    request.onerror = err => rejects(err);
    request.send();
  });
getPeople(5)
  .then(members => console.log(members))
  .catch(error => console.error(`getPeople failed: ${error.message}`))
);
</source>
== Classes ==
=== prototypical inheritance ===
<source lang="js">
function Vacation(destination, length) {
  this.destination = destination;
  this.length = length;
}
Vacation.prototype.print = function() {
  console.log(this.destination + " | " + this.length + " days");
};
const maui = new Vacation("Maui", 7);
maui.print(); // Maui | 7 days
</source>
=== ES2015 way of declaring class ===
<source lang="js">
class Vacation {
  constructor(destination, length) {
    this.destination = destination;
    this.length = length;
  }
  print() {
    console.log(`${this.destination} will take ${this.length} days.`);
  }
}
const trip = new Vacation("Santiago, Chile", 7);
trip.print(); // Chile will take 7 days.
</source>
Simple inheritance
<source lang="js">
class Expedition extends Vacation {
  constructor(destination, length, gear) {
    super(destination, length);
    this.gear = gear;
  }
  print() {
    super.print();
    console.log(`Bring your ${this.gear.join(" and your ")}`);
  }
}
const trip = new Expedition("Mt. Whitney", 3, [
  "sunglasses",
  "prayer flags",
  "camera"
]);
trip.print();
// Mt. Whitney will take 3 days.
// Bring your sunglasses and your prayer flags and your camera
</source>
== ES6 Modules ==
A module is a peice of reusable code that can easily be incorporated into other JavaScript files without causing variable collisions.
In text-helpers.js, two functions are exported:
<source lang="js">
export const print(message) => log(message, new Date())
export const log(message, timestamp) =>
  console.log(`${timestamp.toString()}: ${message}`)
</source>
Exporting only one variable from a module using ''export default''
<source lang="js">
export default new Expedition("Mt. Freel", 2, ['water","snack"]);
</source>
=== Consuming using the '''import''' command ===
<source lang="js">
import { print, log } from "./text-helpers";
import freel from "./mt-freel";
print("printing a message");
log("logging a message");
freel.print();
</source>
scoping under different name:
<source lang="js">
import { print as p, log as l } from "./text-helpers";
p("printing a message");
l("logging a message");
</source>
import everything
<source lang="js">
import * as fns from './text-helpers`
</source>
=== CommonJS ===
the module pattern that is supported by all versions of Node, "Modules"
e.g.
<source lang="js">
const print(message) => log(message, new Date())
const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`}
module.exports = {print, log}
</source>
CommonJS does not support an '''import''' statement; modules are mported with the '''require''' function
<source lang="js">
const { log, print } = require("./txt-helpers");
</source>
</source>