React: Difference between revisions
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> |
Revision as of 07:04, 1 October 2019
Installation
// initialize a nodejs project (creates package.json)
$ npm init -y
// package manager
$ npm install yarn
$ yarn install packagename
$ yarn remove packagename
JavaScript
Three ways to declare variables are
- const
- var
- let
Template string
console.log(`${lastName}, ${firstName} ${middleName}`);
document.body.innerHTML = `
<section>
<header>
<h1>The React Blog</h1>
</header>
<article>
<h2>${article.title}</h2>
${article.body}
</article>
<footer>
<p>copyright ${new Date().getYear()} | The React Blog</p>
</footer>
</section>
`;
Function declaration vs function expression
declarations are hoisted
const f = function() {
};
Arrow functions
const lordify = function(firstName) {
return `${firstName} of Canterbury`;
};
// equals
const lordify = firstName => `${firstName} of Canterbury`;
Returning an object
DON'T FORGET PARENTHESES!
const person = (firstName, lastName) => ({
first: firstName,
last: lastName
});
console.log(person("Flad", "Hanson"));
Arrow functions and scope
const tahoe = {
mountains: ["Freel", "Rose", "Tallac", "Rubicon", "Silver"],
print: function(delay = 1000) {
setTimeout(function() {
console.log(this.mountains.join(", "));
}, delay);
}
};
tahoe.print(); // Uncaught TypeError: Cannot read property 'join' of undefined
console.log(this); // Window {}
To solve this problem:
const tahoe = {
mountains: ["Freel", "Rose", "Tallac", "Rubicon", "Silver"],
print: function(delay = 1000) {
setTimeout(() => {
console.log(this.mountains.join(", "));
}, delay);
}
};
tahoe.print(); // Freel, Rose, Tallac, Rubicon, Silver
= Destructing objects
const sandwich = {
bread: "dutch crunch",
meat: "tuna",
cheese: "swiss",
toppings: ["lettuce", "tomato", "mustard"]
};
const { bread, meat } = sandwich;
console.log(bread, meat); // dutch crunch tuna
const sandwich = {
bread: "dutch crunch",
meat: "tuna",
cheese: "swiss",
toppings: ["lettuce", "tomato", "mustard"]
};
let { bread, meat } = sandwich;
bread = "garlic";
meat = "turkey";
console.log(bread); // garlic
console.log(meat); // turkey
console.log(sandwich.bread, sandwich.meat); // dutch crunch tuna
destructuring parameter
const lordify = ({ firstname }) => {
console.log(`${firstname} of Canterbury`);
};
const regularPerson = {
firstname: "Bill",
lastname: "Wilson"
};
lordify(regularPerson); // Bill of Canterbury
const regularPerson = {
firstname: "Bill",
lastname: "Wilson",
spouse: {
firstname: "Phil",
lastname: "Wilson"
}
};
const lordify = ({ spouse: { firstname } }) => {
console.log(`${firstname} of Canterbury`);
};
lordify(regularPerson); // Phil of Canterbury
Destructuring arrays
const [firstAnimal] = ["Horse", "Mouse", "Cat"];
console.log(firstAnimal); // Horse
const [, , thirdAnimal] = ["Horse", "Mouse", "Cat"];
console.log(thirdAnimal); // Cat
Object literal enhancement
const name = "Tallac";
const elevation = 9738;
const funHike = { name, elevation };
console.log(funHike); // {name: "Tallac", elevation: 9738}
const name = "Tallac";
const elevation = 9738;
const print = function() {
console.log(`Mt. ${this.name} is ${this.elevation} feet tall`);
};
const funHike = { name, elevation, print };
funHike.print(); // Mt. Tallac is 9738 feet tall
old vs. new: object syntax
// Old
var skier = {
name: name,
sound: sound,
powderYell: function() {
var yell = this.sound.toUpperCase();
console.log(`${yell} ${yell} ${yell}!!!`);
},
speed: function(mph) {
this.speed = mph;
console.log("speed:", mph);
}
};
// New
const skier = {
name,
sound,
powderYell() {
let yell = this.sound.toUpperCase();
console.log(`${yell} ${yell} ${yell}!!!`);
},
speed(mph) {
this.speed = mph;
console.log("speed:", mph);
}
};
Spread operator
const peaks = ["Tallac", "Ralston", "Rose"];
const canyons = ["Ward", "Blackwood"];
const tahoe = [...peaks, ...canyons];
console.log(tahoe.join(", ")); // Tallac, Ralston, Rose, Ward, Blackwood
Getting last element:
const peaks = ["Tallac", "Ralston", "Rose"];
const [last] = peaks.reverse();
console.log(last); // Rose
console.log(peaks.join(", ")); // Rose, Ralston, Tallac
Getting the rest of elements:
const lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"];
const [first, ...others] = lakes;
console.log(others.join(", ")); // Marlette, Fallen Leaf, Cascade
function parameters:
function directions(...args) {
let [start, ...remaining] = args;
let [finish, ...stops] = remaining.reverse();
console.log(`drive through ${args.length} towns`);
console.log(`start in ${start}`);
console.log(`the destination is ${finish}`);
console.log(`stopping ${stops.length} times in between`);
}
directions("Truckee", "Tahoe City", "Sunnyside", "Homewood", "Tahoma");
combining objects:
const morning = {
breakfast: "oatmeal",
lunch: "peanut butter and jelly"
};
const dinner = "mac and cheese";
const backpackingMeals = {
...morning,
dinner
};
console.log(backpackingMeals);
// {
// breakfast: "oatmeal",
// lunch: "peanut butter and jelly",
// dinner: "mac and cheese"
// }
Asynchronous requests
Simple promises with fetch
fetch("https://api.randomuser.me/?nat=US&results=1")
.then(res => res.json())
.then(json => json.results)
.then(console.log)
.catch(console.error);
Async/Await
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();
Building Promises
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}`))
);
Classes
prototypical inheritance
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
ES2015 way of declaring class
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.
Simple inheritance
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
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:
export const print(message) => log(message, new Date())
export const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`)
Exporting only one variable from a module using export default
export default new Expedition("Mt. Freel", 2, ['water","snack"]);
Consuming using the import command
import { print, log } from "./text-helpers";
import freel from "./mt-freel";
print("printing a message");
log("logging a message");
freel.print();
scoping under different name:
import { print as p, log as l } from "./text-helpers";
p("printing a message");
l("logging a message");
import everything
import * as fns from './text-helpers`
CommonJS
the module pattern that is supported by all versions of Node, "Modules"
e.g.
const print(message) => log(message, new Date())
const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`}
module.exports = {print, log}
CommonJS does not support an import statement; modules are mported with the require function
const { log, print } = require("./txt-helpers");