React Native Evening

React Native Evening

• 1.
  ReactNative Evening CoWork SouthBay Torrance, CA 26 July 2017 @ 7:00 PM, PDT
• 3.
  Me • Troy Miles •Over 38 years of programming experience • Software engineer, speaker, book and video author • rockncoder@gmail.com • @therockncoder • lynda.com Author

• 4.
  Kotlin for JavaDevelopers
• 5.
  “Learn once, writeanywhere: Build mobile apps with React”
• 6.
  React Native • “Delivernative Android, iOS, and Windows apps, using existing skills, teams, and code.” • Released: March 27, 2015 • 51k+ GitHub Stars
• 7.
  Installation • Node.js (&npm) • Android SDK • iOS SDK (on Mac only) • React Native
• 8.
  Android Development • InstallJava 8 • Install Android Studio • Install Android SDK 23 (Marshmallow) • Install Intel HAXM (x86 Android Emulator)
• 9.
  iOS Development • InstallXcode from macOS App Store
• 10.
  Mac Installation • brewinstall node • brew install watchman* • npm i -g react-native-cli
• 11.
  Windows Installation • chocoinstall nodejs.install • choco install python2 • choco install jdk8
• 12.
  iOS Development • Inorder to build apps for iOS you must have a Mac
• 13.
  React-Native • react-native init<app name> • cd <app name> • react-native run-android / run-ios
• 14.
  react-native CLI Command Purpose init[app name] creates a react-native app run-android [options] builds app, starts on Android run-ios [options] builds app, starts on iOS start [options] starts webserver new-library [options] generates a native library bridge bundle [options] builds offline javascript bundle unbundle [options] builds unbundle javascript
• 15.
  react-native CLI Command Purpose eject[options] takes the shackles off link [options] <packageName> links all native dependencies unlink [options] <packageName> unlink native dependency install [options] <packageName> install+link native dependencies uninstall [options] <packageName> uninstall+unlink native upgrade [options] upgrade app's template files log-android [options] starts adb logcat log-ios [options] starts iOS device syslog tail
• 16.
  Application Root Directory •All of the commands, for all of the tools are designed work on the application root directory • If used anywhere else bad things will happen • be sure you are in the app root • double check that you are in the app root
• 17.
  JavaScript
• 18.
  ECMAScript Versions Version Date ES1June 1997 ES2 June 1998 ES3 December 1999 ES4 DOA 2006 ES5 December 2009 ES2015 / ES6 June 2015 ES2016 / ES7 2016
• 19.
  Collection Operators • .isArray() •.every() • .forEach() • .indexOf() • .lastIndexOf() • .some() • .map() • .reduce() • .filter()
• 20.
  map let junk =[1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}];
 let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
 let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
 console.log(nums);
 
 // map iterates over all of the elements and returns a new array with the same // number of elements
 let nums2 = nums.map((elem) => elem * 2);
 console.log(nums2); /// [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40] 

• 21.
  filter let junk =[1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}];
 let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
 let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
 console.log(nums);
 
 // filter iterates over the array and returns a new array with only the elements // that pass the test
 let nums3 = nums.filter((elem) => !!(elem % 2));
 console.log(nums3); /// [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
• 22.
  reduce let junk =[1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}];
 let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
 let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
 console.log(nums);
 
 // reduce iterates over the array passing the previous value and the current
 // element it is up to you what the reduction does, let's concatenate the strings
 let letters2 = letters.reduce((previous, current) => previous + current);
 console.log(letters2); /// ABCDEFGHIJK
 
 // reduceRight does the same but goes from right to left
 let letters3 = letters.reduceRight((previous, current) => previous + current);
 console.log(letters3); /// KJIHGFEDCBA

• 23.
  let • let allowsus to create a block scoped variables • they live and die within their curly braces • var is considered deprecated • best practice is to use let instead of var
• 24.
  let // let allowsus to create block scoped variables
 // they live and die within the curly braces
 let val = 2;
 console.info(`val = ${val}`);
 {
 let val = 59;
 console.info(`val = ${val}`);
 }
 console.info(`val = ${val}`);
 

• 25.
  const • const createsa variable that can't be changed • best practice is to make any variable that should not change a constant • does not apply to object properties or array elements
• 26.
  const const name ='Troy';
 console.info(`My name is ${name}`);
 // the line below triggers a type error
 name = 'Miles';

• 27.
  Template strings • Definedby using opening & closing back ticks • Templates defined by ${JavaScript value} • The value can be any simple JavaScript expression • Allows multi-line strings (return is pass thru)
• 28.
  Template strings let state= 'California';
 let city = 'Long Beach';
 console.info(`This weekend's workshop is in ${city}, ${state}.`);
 
 // template strings can run simple expressions like addition
 let cup_coffee = 4.5;
 let cup_tea = 2.5;
 console.info(`coffee: $${cup_coffee} + tea: $${cup_tea} = $$ {cup_coffee + cup_tea}.`);
 
 // they can allow us to create multi-line strings
 console.info(`This is line #1.
 this is line #2.`);
 

• 29.
  Arrow functions • Succinctsyntax • Doesn’t bind its own this, arguments, or super • Facilitate a more functional style of coding • Can’t be used as constructors
• 30.
  Arrow functions • Whenonly one parameter, parenthesis optional • When zero or more than one parameter, parenthesis required
• 31.
  Arrow function let anon_func= function (num1, num2) {
 return num1 + num2;
 };
 console.info(`Anonymous func: ${anon_func(1, 2)}`);
 
 let arrow_func = (num1, num2) => num1 + num2;
 console.info(`Arrow func: ${arrow_func(3, 4)}`);

• 32.
  this • this ishandled different in arrow functions • In anonymous function this is bound to the global object • In arrow function this is what it was in the outer scope
• 33.
  Destructuring • Maps thedata on the right side of the equals sign to the variables on the left • The data type decides the way values are mapped • It is either object or array destructuring
• 34.
  Object Destructuring 16// thisis a demo of the power of destructuring 17// we have two objects with the same 3 properties 18 const binary = {kb: 1024, mb: 1048576, gb: 1073741824}; 19 const digital = {kb: 1000, mb: 1000000, gb: 1000000000}; 20// We use a ternary statement to choose which object 21// assign properties based on their property names 22 const {kb, mb, gb} = (useBinary) ? binary : digital;
• 35.
  Array Destructuring 5 6 let[param1, bob, key] = ['first', 'second', '3rd']; 7 console.info(`param1 = ${param1}, bob = ${bob}, key = ${key}`); 8 // param1 = first, bob = second, key = 3rd
• 36.
  Spread syntax • Expandsan expression in places where multiple arguments, elements, or variables are expected
• 37.
  The spread operator 11 12// the spread operator 13 const myArray = ['Bob', 'Sue', 'Fido']; 14 function printFamily(person1, person2, pet) { 15 console.info(`Person 1: ${person1}, Person 2: ${person2}, and their pet: ${pet}`); 16 } 17 printFamily(...myArray); 18 // Person 1: Bob, Person 2: Sue, and their pet: Fido 19
• 38.
  Class • Syntactic sugarover JavaScript use of function constructors • JavaScript uses proto-typical inheritance • If a class extends another, it must include super() as first instruction in its constructor • Only create a constructor if it does something
• 39.
  Class • Syntactic sugarover JavaScript use of function constructors • JavaScript uses proto-typical inheritance • If a class extends another, it must include super() as first instruction in its constructor • Only create a constructor if it does something
• 40.
  import • Imports functions,objects, or primitives from other files • import <name> from “<module name>”; • import {name } from “<module name>”; • import * as Greetings from “<module name>”; • relative path indicates not an npm package
• 41.
  export • export <vara> • export {a, b};
• 42.
  export default • onlyone per file • common pattern for libraries • const Greetings = {sayHi, sayBye}; • export default Greetings; • export default {sayHi, sayBye};
• 43.
  Importing Old SchoolJS • Many JS libraries don’t support the new syntax • How do we use them? • import ‘jquery’;
• 44.
  React
• 45.
  React • A JavaScriptlibrary for building user interfaces • Created by Facebook & Instagram • Initial release March 2013 • Current version 15.6.1 • Next major version 16.0.0, will have breaking changes
• 46.
  React • Virtual DOM •One-way data flow • JSX - JavaScript eXtension allows in HTML generation • Component-based
• 47.
  React API • Theuse of JSX is optional in React • You can use the React “API” instead • The createClass method is deprecated and will be removed in React 16
• 48.
  Component • Fundamental buildingblock of React • Can be created with a JS Class or Function • The render method is mandatory
• 49.
  Class Component 3 4 classSquare extends React.Component { 5 render() { 6 return ( 7 <button 8 className="square" 9 onClick={() => this.props.onClick()}> 10 {this.props.value} 11 </button> 12 ); 13 } 14 } 15
• 50.
  Functional Component 15 16 functionSquare(props) { 17 return ( 18 <button 19 className="square" 20 onClick={() => props.onClick()}> 21 {props.value} 22 </button> 23 ); 24 }
• 51.
  React.PropTypes • React.PropTypes isdeprecated • It will be deleted in React 16 • Use the npm package “prop-types” instead • import PropTypes from ‘prop-types’;
• 52.
  PropTypes • PropTypes allowyou to declare what properties your component expects • React validates property at runtime • Using propTypes is optional
• 53.
  Some PropTypes Component Command PropTypes.arrayan optional array PropTypes.bool an optional bool PropTypes.element An optional React element PropTypes.func An optional function PropTypes.node Anything that can be rendered PropTypes.number An optional number PropTypes.object An optional object PropTypes.string An optional string PropTypes.symbol An optional Symbol
• 54.
  PropType in code 1 2import React from 'react'; 3 import ReactDOM from 'react-dom'; 4 import PropTypes from 'prop-types'; 5 6 class App extends React.Component { 7 render () { 8 return React.DOM.span(null, `My name is ${this.props.name}`); 9 } 10 } 11 12 App.propTypes = { 13 name: PropTypes.string.isRequired 14 }; 15 16 ReactDOM.render( 17 React.createElement(App, {}), 18 document.getElementById('root') 19 ); 20 21
• 55.
  When property ismissing
• 56.
  React Components • Canbe created two ways: • Using JavaScript • Using JSX
• 57.
  Components via JS •React’s API contains method createElement() • Takes 3 parameters: type, props, children render() { return React.createElement('h1', null, "Hello there.");
• 58.
  JSX • JavaScript SyntaxEXtension • A mixture of JavaScript and HTML syntax • Compiles to JavaScript • Is optional but preferred over using JavaScript • Is easier to read
• 59.
  JSX Attributes • Canassign either a string or an expression • Strings can be either single or double quotes • Expressions must be enclosed with curly braces
• 60.
  Boolean Attributes • HTMLhas a few boolean attributes, if present they are true • Some of these include: checked, selected, disabled • In JSX, • <Component disabled={true / false} />
• 61.
  Forbidden Attributes • Twoattributes are JavaScript keywords • JavaScript keywords can’t be used in JSX • class -> className • for -> htmlFor
• 62.
  JSX Spread Syntax •a shortcut to passing props to a component • uses ES2015 spread operator • <Component {…object} />
• 63.
  JSX Spread Syntax return( <Timer id={this.props.id} amount={this.props.amount} elapsed={this.props.elapsed} runningSince={this.props.runningSince} onStartClick={this.props.onStartClick} onStopClick={this.props.onStopClick} onResetClick={this.props.onResetClick} onSetClick={this.handleSetClick} /> );
• 64.
  JSX Spread Syntax return( <Timer {...this.props} onSetClick={this.handleSetClick} /> );
• 65.
  JSX Debugging Tip •Assign component to a variable • console.log the variable
• 66.
  JSX Debugging Tip consttimerComp = ( <Timer troy='miles' {...this.props} onSetClick={this.handleSetClick} /> ); console.log(timerComp);
• 67.
  JSX Debugging Tip
• 68.
  JSX Debugging Tip
• 69.
  Lifecycle Events Event When componentWillMountinvoked once before rendering componentDidMount invoked after component loaded componentWillReceiveProps invoked when receiving new props shouldComponentUpdate asks if component should update componentWillUpdate invoked before rendering new props componentDidUpdate invoked after rendered new props componentWillUnmount invoked before component removed
• 70.
  System Components Component ActivityIndicator Button DatePickerIOS DrawerLayoutAndroid FlatList Image KeyboardAvoidingView
• 71.
  System Components Component ListView Modal NavigatorIOS Picker PickerIOS ProgressBarAndroid ProgressViewIOS
• 72.
  System Components Component RefreshControl ScrollView SectionList SegmentedControlIOS Slider SnapshotViewIOS StatusBar
• 73.
  System Components Component Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid TouchableHighlight
• 74.
  System Components Component TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid VirtualizedList WebViewAPIs
• 75.
  Platform Differences • Notall components work with all devices • Some are for iOS only or Android only • Those that end in IOS are for iOS • Those that end in Android are for Android
• 76.
  Summary • React Nativeallows you to make mobile apps in JS • While easier than native development, it is not easy