React: Difference between revisions

React (view source)

Revision as of 07:04, 1 October 2019

3,913 bytes added , 1 October 2019

completion of JavaScript section

← Older edit Newer edit →

Mhan

Bureaucrats, Interface administrators, Administrators

4,461

edits

@@ Line 324: / Line 324: @@
 //   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>