This is the Hello World component.
4 | 5 | 6 | 21 | 22 | 28 | -------------------------------------------------------------------------------- /appendix/es6/arrow_funcs.js: -------------------------------------------------------------------------------- 1 | const cities = [ 2 | { name: 'Cairo', pop: 7764700 }, 3 | { name: 'Lagos', pop: 8029200 }, 4 | ]; 5 | 6 | const formattedPopulations = cities.map((city) => { 7 | const popMM = (city.pop / 1000000).toFixed(2); 8 | return popMM + ' million'; 9 | }); 10 | console.log(formattedPopulations); 11 | // -> [ "7.76 million", "8.03 million" ] 12 | 13 | const formattedPopulations2 = cities.map((city) => ( 14 | (city.pop / 1000000).toFixed(2) + ' million' 15 | )); 16 | 17 | const pops = cities.map(city => city.pop); 18 | console.log(pops); 19 | // [ 7764700, 8029200 ] 20 | 21 | const popsNoArrow = cities.map(function(city) { return city.pop }); 22 | -------------------------------------------------------------------------------- /appendix/es6/arrow_funcs_jukebox_1.js: -------------------------------------------------------------------------------- 1 | function printSong() { 2 | console.log("Oops - The Global Object"); 3 | } 4 | 5 | const jukebox = { 6 | songs: [ 7 | { 8 | title: "Wanna Be Startin' Somethin'", 9 | artist: "Michael Jackson", 10 | }, 11 | { 12 | title: "Superstar", 13 | artist: "Madonna", 14 | }, 15 | ], 16 | printSong: function (song) { 17 | console.log(song.title + " - " + song.artist); 18 | }, 19 | printSongs: function () { 20 | // `this` bound to the object (OK) 21 | this.songs.forEach(function(song) { 22 | // `this` bound to global object (bad) 23 | this.printSong(song); 24 | }); 25 | }, 26 | } 27 | 28 | jukebox.printSongs(); 29 | // > "Oops - The Global Object" 30 | // > "Oops - The Global Object" 31 | -------------------------------------------------------------------------------- /appendix/es6/arrow_funcs_jukebox_2.js: -------------------------------------------------------------------------------- 1 | function printSong() { 2 | console.log("Oops - The Global Object"); 3 | } 4 | 5 | const jukebox = { 6 | songs: [ 7 | { 8 | title: "Wanna Be Startin' Somethin'", 9 | artist: "Michael Jackson", 10 | }, 11 | { 12 | title: "Superstar", 13 | artist: "Madonna", 14 | }, 15 | ], 16 | printSong: function (song) { 17 | console.log(song.title + " - " + song.artist); 18 | }, 19 | printSongs: function () { 20 | this.songs.forEach((song) => { 21 | // `this` bound to same `this` as `printSongs()` (`jukebox`) 22 | this.printSong(song); 23 | }); 24 | }, 25 | } 26 | 27 | jukebox.printSongs(); 28 | // > "Wanna Be Startin' Somethin' - Michael Jackson" 29 | // > "Superstar - Madonna" 30 | -------------------------------------------------------------------------------- /appendix/es6/const_let.js: -------------------------------------------------------------------------------- 1 | var myVariable = 5; 2 | -------------------------------------------------------------------------------- /appendix/es6/default_args.js: -------------------------------------------------------------------------------- 1 | function divide(a, b) { 2 | // Default divisor to `1` 3 | const divisor = typeof b === 'undefined' ? 1 : b; 4 | 5 | return a / divisor; 6 | } 7 | 8 | function divide(a, b = 1) { 9 | return a / b; 10 | } 11 | 12 | divide(14, 2); 13 | // => 7 14 | divide(14, undefined); 15 | // => 14 16 | divide(14); 17 | // => 14 18 | 19 | divide(14, null); // `null` is used as divisor 20 | // => Infinity // 14 / null 21 | -------------------------------------------------------------------------------- /appendix/es6/destructuring_assignments.js: -------------------------------------------------------------------------------- 1 | var fruits = [ 'apples', 'bananas', 'oranges' ]; 2 | var fruit1 = fruits[0]; 3 | var fruit2 = fruits[1]; 4 | 5 | const [ veg1, veg2 ] = [ 'asparagus', 'broccoli', 'onion' ]; 6 | console.log(veg1); // -> 'asparagus' 7 | console.log(veg2); // -> 'broccoli' 8 | 9 | const smoothie = { 10 | fats: [ 'avocado', 'peanut butter', 'greek yogurt' ], 11 | liquids: [ 'almond milk' ], 12 | greens: [ 'spinach' ], 13 | fruits: [ 'blueberry', 'banana' ], 14 | }; 15 | 16 | const { liquids, fruits } = smoothie; 17 | 18 | console.log(liquids); // -> [ 'almond milk' ] 19 | console.log(fruits); // -> [ 'blueberry', 'banana' ] 20 | 21 | const containsSpinach = ({ greens }) => { 22 | if (greens.find(g => g === 'spinach')) { 23 | return true; 24 | } else { 25 | return false; 26 | } 27 | }; 28 | 29 | containsSpinach(smoothie); // -> true 30 | -------------------------------------------------------------------------------- /appendix/es6/enhanced_object_literals.js: -------------------------------------------------------------------------------- 1 | const explicit = { 2 | getState: getState, 3 | dispatch: dispatch, 4 | }; 5 | 6 | const implicit = { 7 | getState, 8 | dispatch, 9 | }; 10 | -------------------------------------------------------------------------------- /appendix/es6/object_assign.js: -------------------------------------------------------------------------------- 1 | const coffee = { }; 2 | const noCream = { cream: false }; 3 | const noMilk = { milk: false }; 4 | Object.assign(coffee, noCream); 5 | // coffee is now: `{ cream: false }` 6 | Object.assign(coffee, noMilk); 7 | // coffee is now: `{ cream: false, milk: false }` 8 | 9 | const coffeeWithMilk = Object.assign({}, coffee, { milk: true }); 10 | // coffeeWithMilk is: `{ cream: false, milk: true }` 11 | // coffee was not modified: `{ cream: false, milk: false }` 12 | -------------------------------------------------------------------------------- /appendix/es6/spread_operator_arrays.js: -------------------------------------------------------------------------------- 1 | const a = [ 1, 2, 3 ]; 2 | const b = [ 4, 5, 6 ]; 3 | const c = [ ...a, ...b, 7, 8, 9 ]; 4 | 5 | console.log(c); // -> [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] 6 | 7 | const d = [ a, b, 7, 8, 9 ]; 8 | console.log(d); // -> [ [ 1, 2, 3 ], [ 4, 5, 6 ], 7, 8, 9 ] 9 | -------------------------------------------------------------------------------- /appendix/es6/template_literals_1.js: -------------------------------------------------------------------------------- 1 | 2 | var greeting = 'Hello, ' + user + '! It is ' + degF + ' degrees outside.'; 3 | -------------------------------------------------------------------------------- /appendix/es6/template_literals_2.js: -------------------------------------------------------------------------------- 1 | 2 | const greeting = `Hello, ${user}! It is ${degF} degrees outside.`; 3 | -------------------------------------------------------------------------------- /appendix/store/simpleStore/NumberDisplay.vue: -------------------------------------------------------------------------------- 1 | 2 |6 | Day of event: Monday 7 |
8 | Submit 9 |This is where the description of each movie will live!
13 |Use the navigation links above to navigate between the product and 5 | cart screens.
6 |{{ productItem.description }}
11 | 12 | {{ productItem.price }} 13 | 14 |Use the navigation links above to navigate between the product and 5 | cart screens.
6 |{{ productItem.description }}
15 | 16 | {{ productItem.price }} 17 | 18 |Use the navigation links above to navigate between the product and 5 | cart screens.
6 |{{ productItem.description }}
15 | 16 | {{ productItem.price }} 17 | 18 |Use the navigation links above to navigate between the product and 5 | cart screens.
6 |{{ productItem.description }}
15 | 16 | {{ productItem.price }} 17 | 18 |{{ productItem.description }}
11 | 12 | {{ productItem.price }} 13 | 14 |{{ productItem.description }}
12 | 13 | {{ productItem.price }} 14 | 15 |{{ cartItem.title }}
4 |{{ productItem.description }}
12 | 13 | {{ productItem.price }} 14 | 15 |{{ cartItem.title }}
4 |{{ productItem.description }}
11 | 12 | {{ productItem.price }} 13 | 14 |