Before You React by Natalie MacLees & Nathan Tyler 

What is React? 

Example: License Activation 

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 

The React Way state = { loading: false, license: “”, isLicenseActive: false } render(); state = { loading: true, license: “1294u09u…”, isLicenseActive: false } render() state = { loading: false, license: “1294u09u…”, isLicenseActive: true } render() state = { loading: false, license: “dfasdfasdf…”, isLicenseActive: false } render() 

Perfomance Virtual DOM Real DOM 

Perfomance Virtual DOM Real DOM 

Component Lifecycle getInitialState() getDefaultProps() componentWillReceiveProps() shouldComponentUpdate() componentWillMount() componentWillUpdate() render() componentDidMount() componentDidUpdate() componentWillUnmount() 

Our Story 

Recommended Tools 

Node • package.json • npm install {pkg name} --save • .gitignore node modules • run npm update after git pull 

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 

var profile = ; var profile = React.createElement("div", null, React.createElement("img", { src: "avatar.png", className: "profile" }), React.createElement("h3", null, [user.firstName, user.lastName].join(" ")) ); 

Recommended Approaches 

Beginner-friendly: Container Components Pure
 Component Pure
 Component Container Component Server Maintains state State passed as props Ajax 

A bit more advanced: Redux, Thunk, Router Redux + Thunk React Router Server React Components Redux Async actions react-redux JSON props 

JavaScript things to know or brush up on 

Things you should know about objects 

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 }; 

object.assign() Can be used to clone objects var cat = {face: 'fuzzy'}; var myCat = Object.assign({}, cat); 

Things you should know about functions 

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 

Things you should know about arrays 

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'; }); 

Things you should know about ECMAScript 6 

var, let, and const var loopconf = 'Awesome!'; declares a variable global scope or function scope 

var, let, and const let loopconf = 'Awesome!'; declares a variable block scope 

var, let, and const const LOOPCONF = 'Awesome!'; creates a read-only reference to a value global, block, or function scope value is not immutable 

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 }; } 

Modules • Maintainability • Namespacing • Reusability • Each module is contained in its own file 

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'; 

WTF is … ? It's two things, actually: • rest operator • spread operator …but nobody will tell you that 

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); } 

class Settings extends Component { constructor(props) { super(props); ... } render(){ ... } } Classes …well kind of… 

Takeaways 

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 React Stuff • Pro React book and Git repo: http://www.pro-react.com/ • Create-React-App: https://github.com/facebookincubator/create-react-app • Advanced-Boilerplate https://github.com/pro-react/react-app-advanced-boilerplate • React.js Intro: http://reactfordesigners.com/labs/reactjs-introduction-for-people- who-know-just-enough-jquery-to-get-by/ • React primer: http://patternhatch.com/2016/07/06/a-primer-on-the-react- ecosystem-part-1-of-3 

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 JavaScript Stuff • call(), bind(), apply() http://javascriptissexy.com/javascript-apply-call-and- bind-methods-are-essential-for-javascript-professionals/ • object.assign() https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference/Global_Objects/Object/assign • array.map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/map • array.filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference/Global_Objects/Array/filter 

Resources ECMAScript 6 Stuff • ES6 features playlist: https://www.youtube.com/playlist? list=PL0zVEGEvSaeHJppaRLrqjeTPnCH6vw-sm • Arrow Functions: https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Functions/Arrow_functions • Arrow Functions in Depth: https://hacks.mozilla.org/2015/06/es6-in- depth-arrow-functions/ • var, let, and const: https://www.youtube.com/watch?v=sjyJBL5fkp8 

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 

Thank You