A joint presentation with Nathan Tyler of Tyler Digital. An overview of React and all the things you should learn and understand before diving into building your first React project.
The Old Way Listen for form submit event, fire Ajax request with entered key Show loading animation while we wait for the ajax response to come back Response received, license key found. Hide loading animation, show obfuscated license key, show success message, add Remove button and bind event handler. If license key isn't found, display error message to end user
Webpack • Module bundler - treats every kind of file as a module • Given one file, Webpack can detect all dependencies, then process and bundle browser-ready files • Lots of handy plugins, npm modules, and integrations with other tools
object.assign() Can be used to merge objects var defaultSettings = {showArrows: true, showPagination: false}; var mySettings = {showPagination: true}; var settings = Object.assign({}, defaultSettings, mySettings); /* Settings */ { showArrows: true, showPagination: true };
function.bind() Returns a new function with the this value set explicitly: var cat1 = {name: 'Chloe', temperament: 'friendly'}; var cat2 = {name: 'Risa', temperament: 'scaredy'}; function callKitty(){ alert('Come here, ' + this.name + ' you ' + this.temperament + ' kitty.'); } var callChloe = callKitty.bind(cat1); var callRisa = callKitty.bind(cat2); callChloe(); callRisa();
function.call() Invoke a JavaScript function with a comma-separated list of arguments and the this value set explicitly var cat1 = {name: 'Chloe', temperament: 'friendly'}; var cat2 = {name: 'Risa', temperament: 'scaredy'}; function callKitty(greeting){ alert(greeting + ', ' + this.name + ' you ' + this.temperament + ' kitty.'); } callKitty.call(cat1, 'Come here'); callKitty.call(cat2, 'Hello');
function.apply() var cat1 = {name: 'Chloe', temperament: 'friendly'}; var cat2 = {name: 'Risa', temperament: 'scaredy'}; function callKitty(greeting){ alert(greeting + ', ' + this.name + ' you ' + this.temperament + ' kitty.'); } callKitty.apply(cat1, ['Come here']); callKitty.apply(cat2, ['Hello']); Invoke a JavaScript function with an array of arguments and the this value set explicitly
array.map() Create a new array with the results of calling a function on every element var numbers = [3, 27, 17, 62, 354, 10]; var numbersTimesFive = numbers.map(function(el){ return el * 5; });
array.filter() Used to filter the items in an array and return only some items: var cats = [ {name:'Maru', country: 'Japan'}, {name:'Grumpy Cat', country: 'US'}, {name:'Snoopy', country: 'China'}, {name:'Lil Bub', country: 'US'}, {name:'Shironeko', country: 'Japan'} ]; var catsFromJapan = cats.filter(function(el){ return el.country === 'Japan'; });
Object Literal Property Value Shorthand Can be used when the property value has the same name as the identifier: function createCat(name, color) { return { type: 'cat', name, color }; } Shorthand for: function createCat(name, color) { return { type: 'cat', name: name, color: color }; }
Exports You can have a single default export per module: var mathUtils = { sum: function(a, b) { return a + b; }, product: function(a, b) { return a * b; } }; export default mathUtils;
Exports You can have multiple named exports: export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); }
Imports Import named exports by wrapping them in curly brackets: import { square, diag } from 'mathlib'; Import default exports by using just their name: import utils from 'mathlib';
Rest operator Used to get the arguments passed to a function as an array function countFruits(...fruits) { return fruits.length; } countFruits('raspberry', 'banana', 'strawberry');
Rest operator Can also be used to gather the rest of the arguments that remain: function bestFruit(best, ...otherFruits) { console.log('The best fruit is', best); } bestFruit('raspberry', 'strawberry', 'banana');
Spread operator let red = ['strawberry', 'apple', 'raspberry']; let yellow = ['banana', 'lemon']; let all = [...red, ...yellow]; Handy for constructing arrays from other arrays:
Arrow Functions Skip typing function and return in anonymous function expressions. So instead of typing: var newArray = array.map(function(s){ return s.length }); You can just type: var newArray = array.map( s => s.length );
Arrow Functions Also do not create their own context. Instead, they capture the this value of the enclosing context: function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| properly refers to the person object }, 1000); }
What to use & not use ECMAScript 5 Browserify/Grunt/Gulp react-jsx/reactify Flux ECMAScript 6 NPM + Webpack Babel Redux * * but get started with Ajax and a container + pure component
Resources More React Stuff • Best practices for using Ajax with React: http://andrewhfarmer.com/react-ajax-best- practices/ • Setting up React for ES6 with Webpack and Babel: https://www.twilio.com/blog/2015/08/ setting-up-react-for-es6-with-webpack-and-babel-2.html • Weekly React Newsletter: http://react.statuscode.com/ • Let’s Build a Redux Powered React Application: https://stormpath.com/blog/build-a-redux- powered-react-application • A beginner's guide to npm: https://www.impressivewebs.com/npm-for-beginners-a-guide- for-front-end-developers/
Resources More ECMAScript 6 Stuff • Modules, importing, and exporting: https://www.youtube.com/watch? v=qi_rLTcXers#t=1m49s • Object Literal Property Value Shorthand https://ariya.io/2013/02/es6-and- object-literal-property-value-shorthand • Spread and rest operators: https://rainsoft.io/how-three-dots-changed- javascript/ • Things You Can Do In ES6 That Can't Be Done In ES5: https://www.youtube.com/ watch?v=GbVAMgU3Jj0
nataliemac
linedevth
tomuro
devopstaiwan
nrryuya
tomoaki25
kmwebnet
defaultcf
koudaiii
karawoo
picardparis
miyake
soudai
rasmusluckow
hursman
jnunemaker
jonrohan
geoffreycrofte
sstephenson
jmmastey
philhawksworth
trishagee
jakevdp
lauravandoore
mojombo