Before You React

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.

Transcript

1. Before You React by Natalie MacLees & Nathan Tyler
2. What is React?
3. Example: License Activation
4. 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
5. 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()
6. Perfomance Virtual DOM Real DOM
7. Perfomance Virtual DOM Real DOM
8. Component Lifecycle getInitialState() getDefaultProps() componentWillReceiveProps() shouldComponentUpdate() componentWillMount() componentWillUpdate() render() componentDidMount() componentDidUpdate() componentWillUnmount()
9. Our Story
10. Recommended Tools
11. Node • package.json • npm install {pkg name} --save • .gitignore node modules • run npm update after git pull
12. 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
13. var profile = <div> <img src="avatar.png" className="profile" /> <h3>{[user.firstName, user.lastName].join(' ')}</h3> </div>; var profile = React.createElement("div", null, React.createElement("img", { src: "avatar.png", className: "profile" }), React.createElement("h3", null, [user.firstName, user.lastName].join(" ")) );
14. Recommended Approaches
15. Beginner-friendly: Container Components Pure
 Component Pure
 Component Container Component Server Maintains state State passed as props Ajax
16. A bit more advanced: Redux, Thunk, Router Redux + Thunk React Router Server React Components Redux Async actions react-redux JSON props
17. JavaScript things to know or brush up on
18. Things you should know about objects
19. 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 };
20. object.assign() Can be used to clone objects var cat = {face: 'fuzzy'}; var myCat = Object.assign({}, cat);
21. Things you should know about functions
22. 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();
23. 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');
24. 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
25. Things you should know about arrays
26. 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; });
27. 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'; });
28. Things you should know about ECMAScript 6
29. var, let, and const var loopconf = 'Awesome!'; declares a variable global scope or function scope
30. var, let, and const let loopconf = 'Awesome!'; declares a variable block scope
31. var, let, and const const LOOPCONF = 'Awesome!'; creates a read-only reference to a value global, block, or function scope value is not immutable
32. 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 }; }
33. Modules • Maintainability • Namespacing • Reusability • Each module is contained in its own file
34. 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;
35. 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)); }
36. 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';
37. WTF is … ? It's two things, actually: • rest operator • spread operator …but nobody will tell you that
38. Rest operator Used to get the arguments passed to a function as an array function countFruits(...fruits) { return fruits.length; } countFruits('raspberry', 'banana', 'strawberry');
39. 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');
40. Spread operator let red = ['strawberry', 'apple', 'raspberry']; let yellow = ['banana', 'lemon']; let all = [...red, ...yellow]; Handy for constructing arrays from other arrays:
41. 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 );
42. 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); }
43. class Settings extends Component { constructor(props) { super(props); ... } render(){ ... } } Classes …well kind of…
44. Takeaways
45. 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
46. 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
47. 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/
48. 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
49. 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
50. 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
51. Thank You