SlideShare a Scribd company logo
1 of 39
Download to read offline
Exporing
React Native
Josh JEnsen ABOUT Me
mobile application consultant,
entrepreneur, Technology Addict,
OCR enthusiast, Beer Drinker.
@joshJ
EXPLORING REACT NATIVE
Define ab·stract·ed
consider (something)
theoretically or separately
from something else
EXPLORING REACT NATIVE
Define: Abstracted Platform
A platform where an API is abstracted away from or
separated from the primary language by proxy and/or
runtime.
EXPLORING REACT NATIVE
UIView	
  *	
  myView	
  =	
  [[UIView	
  alloc]	
  init];Obj c
React Native <View></View>
EXPLORING REACT NATIVE
React Native
Open Source ○
Licence BSD
iOS ○
Android ○
Windows No
Platform Quick Facts
Source: https://github.com/skypanther/mobileframeworks
EXPLORING REACT NATIVE
platform Tooling
React Native
Node.JS 4.x
Xcode 6.3+
Gradle N/A
ANT N/A
JDK Latest
HomeBrew Recommended
Build
Times
0
4
8
12
16
Build Times
0.68
14.345
Initial Subsequent
platform Setup
EXPLORING REACT NATIVE
1. OS X - Only OS X is currently supported
2. Homebrew is the recommended way to install Watchman and Flow.
3. Install Node.js 4.0 or newer.
3.1.Install nvm. Then run nvm install node && nvm alias default node, which installs the latest version
of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install
multiple versions of Node.js and easily switch between them.
4. brew install watchman. It is recommended that you install installing watchman, otherwise you might
hit a node file watching bug.
5. brew install flow, if you want to use flow.
Source: https://facebook.github.io/react-native/docs/getting-started.html
Mobilejs.io Todo App
EXPLORING REACT NATIVE
http://mobilejs.io - Source
Create Todo App
EXPLORING REACT NATIVE
1. $ cd todomjs
2. Open ios/todomjs.xcodeproj and hit run in Xcode.
3. Open index.ios.js in your text editor of choice and edit some lines.
4. Hit ⌘-R in your iOS simulator to reload the app and see your change!
Source: https://facebook.github.io/react-native/docs/getting-started.html
$	
  npm	
  install	
  -­‐g	
  react-­‐native-­‐cli	
  
$	
  react-­‐native	
  init	
  todomjs
Initializing an Application
EXPLORING REACT NATIVE
Initializing
an
Application
EXPLORING REACT NATIVE
var	
  {	
  
	
  	
  AppRegistry,	
  
	
  	
  StyleSheet,	
  
	
  	
  Text,	
  
	
  	
  View,	
  
}	
  =	
  React;	
  
var	
  todomjs	
  =	
  React.createClass({	
  
	
  	
  render:	
  function()	
  {	
  
	
  	
  	
  	
  return	
  (	
  
	
  	
  	
  	
  	
  	
  <View	
  style={styles.container}>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <Text	
  style={styles.welcome}>	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  Welcome	
  to	
  React	
  Native!	
  
	
  	
  	
  	
  	
  	
  	
  	
  </Text>	
  
	
  	
  	
  	
  	
  	
  </View>	
  
	
  	
  	
  	
  );	
  
	
  	
  }	
  
});	
  
AppRegistry.registerComponent('todomjs',	
  ()	
  =>	
  todomjs);
Base File
Layout Methods
EXPLORING REACT NATIVE
Layouts React NAtive
EXPLORING REACT NATIVE
<View	
  style={styles.formWrapper}>	
  	
  
	
  	
  <Icon	
  
	
  	
  	
  	
  name='fontawesome|chevron-­‐down'	
  
	
  	
  	
  	
  style={styles.selectAllIcon}	
  
	
  	
  	
  	
  />	
  	
  	
  
	
  	
  <TextInput	
  
	
  	
  	
  	
  ref="textInput"	
  
	
  	
  	
  	
  style={styles.textInput}	
  
	
  	
  />	
  
</View>	
  
formWrapper:	
  {	
  
	
  	
  flexDirection:	
  'row'	
  
},	
  
selectAllIcon:	
  {	
  
	
  	
  alignSelf:	
  'center',	
  
	
  	
  width:	
  40,	
  
	
  	
  height:	
  40	
  
},	
  	
  
textInput:	
  {	
  
	
  	
  flex:	
  1,	
  
	
  	
  height:	
  60,	
  
	
  	
  padding:	
  10,	
  
}
Navigator
EXPLORING REACT NATIVE
Navigator React NAtive
EXPLORING REACT NATIVE
<NavigatorIOS	
  
	
  	
  style={styles.topLevelNavigator}	
  
	
  	
  navigationBarHidden={true}	
  
	
  	
  initialRoute={{	
  
	
  	
  	
  	
  title:	
  '',	
  
	
  	
  	
  	
  component:	
  require('./app/pages/list')	
  
	
  	
  }}	
  
/>	
  
Getting to Hello World
EXPLORING REACT NATIVE
Getting to
Hello World
React Native
EXPLORING REACT NATIVE
var	
  React	
  =	
  require('react-­‐native');	
  
var	
  {	
  
	
  	
  Text	
  
}	
  =	
  React;	
  
var	
  ListPage	
  =	
  React.createClass({	
  
	
  	
  render:	
  function()	
  {	
  
	
  	
  	
  	
  return	
  (	
  
	
  	
  	
  	
  	
  	
  <Text>Hello	
  World</Text>	
  
	
  	
  	
  	
  );	
  
	
  	
  }	
  
});	
  
module.exports	
  =	
  ListPage;	
  
Adding A Native Module
EXPLORING REACT NATIVE
Adding
Native Icons
EXPLORING REACT NATIVE
Source: https://github.com/corymsmith/react-native-icons
npm	
  install	
  react-­‐native-­‐icons@latest	
  -­‐-­‐save
•In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name]
•Go to node_modules ➜ react-native-icons➜ ios and add ReactNativeIcons.xcodeproj
•Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your
project's Build Phases ➜ Link Binary With Libraries phase
•Add the font files you want to use into the Copy Bundle Resources build phase of your
project (click the '+' and click 'Add Other...' then choose the font files from node_modules/
react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit).
•Run your project (Cmd+R)
Text
EXPLORING REACT NATIVE
Text
React Native
EXPLORING REACT NATIVE
<Text	
  style={styles.header}>todos</Text>
header:	
  {	
  
	
  	
  fontFamily:	
  'Helvetica	
  Neue',	
  
	
  	
  fontWeight:	
  '100',	
  
	
  	
  fontSize:	
  80,	
  
	
  	
  textAlign:	
  'center',	
  
	
  	
  color:	
  '#e7e7e7',	
  
	
  	
  marginTop:	
  20	
  
}
Mobilejs.io Todo App
EXPLORING REACT NATIVE
http://mobilejs.io - Source
ListView
EXPLORING REACT NATIVE
ListView React Native
EXPLORING REACT NATIVE
var	
  ListPage	
  =	
  React.createClass({	
  
	
  	
  getInitialState:	
  function()	
  {	
  
	
  	
  	
  	
  this.ds	
  =	
  new	
  ListView.DataSource({rowHasChanged:	
  (r1,	
  r2)	
  =>	
  
r1.rowID	
  !==	
  r2.rowID});	
  
	
  	
  	
  	
  return	
  {	
  
	
  	
  	
  	
  	
  	
  todoItems:	
  this.props.todoItems	
  ||	
  [],	
  
	
  	
  	
  	
  	
  	
  dataSource:	
  this.ds.cloneWithRows(this.props.todoItems	
  ||	
  []),	
  
	
  	
  	
  	
  };	
  
	
  	
  }	
  
}
ListView React Native
EXPLORING REACT NATIVE
<ListView	
  
	
  	
  style={styles.todoListView}	
  
	
  	
  initialListSize={15}	
  
	
  	
  dataSource={this.state.dataSource}	
  
	
  	
  renderRow={(rowData,	
  sectionID,	
  rowID,	
  highlightRow)	
  =>	
  (	
  
	
  	
  	
  	
  <TodoRow	
  rowParams={{	
  
	
  	
  	
  	
  	
  	
  sectionID,	
  
	
  	
  	
  	
  	
  	
  rowID,	
  
	
  	
  	
  	
  	
  	
  highlightRow,	
  
	
  	
  	
  	
  	
  	
  updateRow:	
  this.updateRow,	
  
	
  	
  	
  	
  	
  	
  deleteRow:	
  this.deleteRow,	
  
	
  	
  	
  	
  	
  	
  rowOnPress:	
  this.rowOnPress	
  
	
  	
  	
  	
  }}	
  rowData={rowData}	
  />	
  
	
  	
  )}	
  
	
  automaticallyAdjustContentInsets={false}	
  
/>
ListView React Native
EXPLORING REACT NATIVE
this.state.todoItems.unshift(_.extend({	
  
	
  	
  rowID:	
  new	
  Date().getTime(),	
  
	
  	
  text:	
  e.nativeEvent.text,	
  
	
  	
  children:	
  []	
  
},	
  config.rowTypes.notDone));	
  
this.setState({	
  
	
  	
  dataSource:	
  this.ds.cloneWithRows(this.state.todoItems)	
  
},	
  function()	
  {	
  
	
  	
  this.clearTextInput();	
  
});	
  
Tap Event Handlers
EXPLORING REACT NATIVE
Tap Event Handlers
React Native
EXPLORING REACT NATIVE
<TouchableOpacity	
  
	
  	
  onPress={()	
  =>	
  this.backOnPress()}	
  
	
  	
  activeOpacity={0.2}	
  
	
  	
  >	
  
	
  	
  <Text>back</Text>	
  
</TouchableOpacity>
List.JS
Code Reuse
EXPLORING REACT NATIVE
Code Reuse
React NAtive
EXPLORING REACT NATIVE
renderBackButton:	
  function()	
  {	
  
	
  	
  if	
  (this.props.showBack)	
  {	
  
	
  	
  	
  	
  return	
  (	
  
	
  	
  	
  	
  	
  	
  <TouchableOpacity	
  
	
  	
  	
  	
  	
  	
  	
  	
  style={styles.touchableAreaBackIcon}	
  
	
  	
  	
  	
  	
  	
  	
  	
  onPress={()	
  =>	
  this.backOnPress()}	
  
	
  	
  	
  	
  	
  	
  	
  	
  activeOpacity={0.2}	
  
	
  	
  	
  	
  	
  	
  	
  	
  >	
  
	
  	
  	
  	
  	
  	
  	
  	
  <Icon	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  name='fontawesome|arrow-­‐circle-­‐o-­‐left'	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  size={30}	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  color='#ead7d7'	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  style={styles.backButtonIcon}	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  />	
  
	
  	
  	
  	
  	
  	
  </TouchableOpacity>	
  
	
  	
  	
  	
  );	
  
	
  	
  }	
  
}
{this.renderBackButton()}
Code Reuse
React NAtive
EXPLORING REACT NATIVE
<TodoRow	
  rowParams={{	
  
	
  	
  sectionID,	
  
	
  	
  rowID,	
  
	
  	
  highlightRow,	
  
	
  	
  updateRow:	
  this.updateRow,	
  
	
  	
  deleteRow:	
  this.deleteRow,	
  
	
  	
  rowOnPress:	
  this.rowOnPress	
  
}}	
  rowData={rowData}	
  />
var	
  TodoRow	
  =	
  require('./../components/todorow');
this.props
Navigation
EXPLORING REACT NATIVE
NAvigation
REact NAtive
EXPLORING REACT NATIVE
	
  	
  	
  	
  this.props.navigator.push({	
  
	
  	
  	
  	
  	
  	
  title:	
  '',	
  
	
  	
  	
  	
  	
  	
  component:	
  require('./list'),	
  
	
  	
  	
  	
  	
  	
  passProps:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  rowID:	
  rowID,	
  
	
  	
  	
  	
  	
  	
  	
  	
  showBack:	
  true,	
  
	
  	
  	
  	
  	
  	
  	
  	
  todoItems:	
  this.state.todoItems[rowID].children,	
  
	
  	
  	
  	
  	
  	
  	
  	
  updateRowChildren:	
  this.updateRowChildren	
  
	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  });	
  
Extending React Native
EXPLORING REACT NATIVE
Extending React Native
EXPLORING REACT NATIVE
var	
  React	
  =	
  require('react-­‐native');	
  
var	
  {	
  NativeModules	
  }	
  =	
  React;	
  
var	
  {	
  RNControlFlashlight	
  }	
  =	
  NativeModules;	
  
RNControlFlashlight.turnFlashlight("flashlightOn",	
  function	
  
errorCallback(results)	
  {	
  
	
   	
  	
  	
  	
  console.log('JS	
  Error:	
  '	
  +	
  results['errMsg']);	
  
	
   },	
  function	
  successCallback(results)	
  {	
  
	
   	
  	
  	
  	
  console.log('JS	
  Success:	
  '	
  +	
  results['successMsg']);	
  
	
   }	
  
);
Source: https://github.com/rhaker/react-native-control-flashlight-ios
Pros & Cons
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Pros & CONS React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
‣ Best Feature: Live Reload
Pros Cons
Live Reload / No compile Time No JS Encryption
Growing Community Very Young
Completely Open Source ES6 Fluency is almost required
Expressive Markup React Methodology Learning Curve
Limited Cross-platform Apis
THANK YOU Questions?
646.876.2777
Josh@pixelflavor.com
@joshJ
EXPLORING REACT NATIVE
Mobilejs.IO
techmatters.fm

More Related Content

What's hot

2011 a grape odyssey
2011   a grape odyssey2011   a grape odyssey
2011 a grape odysseyMike Hagedorn
 
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...Ryan Weaver
 
Maxim Salnikov - Service Worker: taking the best from the past experience for...
Maxim Salnikov - Service Worker: taking the best from the past experience for...Maxim Salnikov - Service Worker: taking the best from the past experience for...
Maxim Salnikov - Service Worker: taking the best from the past experience for...Codemotion
 
Modern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on RailsModern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on RailsJonathan Johnson
 
Mobile Open Day: React Native: Crossplatform fast dive
Mobile Open Day: React Native: Crossplatform fast diveMobile Open Day: React Native: Crossplatform fast dive
Mobile Open Day: React Native: Crossplatform fast diveepamspb
 
vJUG - The JavaFX Ecosystem
vJUG - The JavaFX EcosystemvJUG - The JavaFX Ecosystem
vJUG - The JavaFX EcosystemAndres Almiray
 
api-platform: the ultimate API platform
api-platform: the ultimate API platformapi-platform: the ultimate API platform
api-platform: the ultimate API platformStefan Adolf
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gearsdion
 
Kiss PageObjects [01-2017]
Kiss PageObjects [01-2017]Kiss PageObjects [01-2017]
Kiss PageObjects [01-2017]Iakiv Kramarenko
 
Easy tests with Selenide and Easyb
Easy tests with Selenide and EasybEasy tests with Selenide and Easyb
Easy tests with Selenide and EasybIakiv Kramarenko
 
The Road to Native Web Components
The Road to Native Web ComponentsThe Road to Native Web Components
The Road to Native Web ComponentsMike North
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaExoLeaders.com
 
PhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device CapabilitiesPhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device CapabilitiesIvano Malavolta
 
Polyglot automation - QA Fest - 2015
Polyglot automation - QA Fest - 2015Polyglot automation - QA Fest - 2015
Polyglot automation - QA Fest - 2015Iakiv Kramarenko
 

What's hot (20)

2011 a grape odyssey
2011   a grape odyssey2011   a grape odyssey
2011 a grape odyssey
 
The JavaFX Ecosystem
The JavaFX EcosystemThe JavaFX Ecosystem
The JavaFX Ecosystem
 
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...
 
Maxim Salnikov - Service Worker: taking the best from the past experience for...
Maxim Salnikov - Service Worker: taking the best from the past experience for...Maxim Salnikov - Service Worker: taking the best from the past experience for...
Maxim Salnikov - Service Worker: taking the best from the past experience for...
 
Modern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on RailsModern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on Rails
 
Mobile Open Day: React Native: Crossplatform fast dive
Mobile Open Day: React Native: Crossplatform fast diveMobile Open Day: React Native: Crossplatform fast dive
Mobile Open Day: React Native: Crossplatform fast dive
 
vJUG - The JavaFX Ecosystem
vJUG - The JavaFX EcosystemvJUG - The JavaFX Ecosystem
vJUG - The JavaFX Ecosystem
 
Vuejs testing
Vuejs testingVuejs testing
Vuejs testing
 
api-platform: the ultimate API platform
api-platform: the ultimate API platformapi-platform: the ultimate API platform
api-platform: the ultimate API platform
 
Boost your angular app with web workers
Boost your angular app with web workersBoost your angular app with web workers
Boost your angular app with web workers
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
Kiss PageObjects [01-2017]
Kiss PageObjects [01-2017]Kiss PageObjects [01-2017]
Kiss PageObjects [01-2017]
 
Easy tests with Selenide and Easyb
Easy tests with Selenide and EasybEasy tests with Selenide and Easyb
Easy tests with Selenide and Easyb
 
The Road to Native Web Components
The Road to Native Web ComponentsThe Road to Native Web Components
The Road to Native Web Components
 
React native
React nativeReact native
React native
 
Automated Testing ADF with Selenium
Automated Testing ADF with SeleniumAutomated Testing ADF with Selenium
Automated Testing ADF with Selenium
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with Karma
 
Automated testing by Richard Olrichs and Wilfred vd Deijl
Automated testing by Richard Olrichs and Wilfred vd DeijlAutomated testing by Richard Olrichs and Wilfred vd Deijl
Automated testing by Richard Olrichs and Wilfred vd Deijl
 
PhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device CapabilitiesPhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device Capabilities
 
Polyglot automation - QA Fest - 2015
Polyglot automation - QA Fest - 2015Polyglot automation - QA Fest - 2015
Polyglot automation - QA Fest - 2015
 

Similar to Connect.js - Exploring React.Native

An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...GreeceJS
 
Android development with Scala and SBT
Android development with Scala and SBTAndroid development with Scala and SBT
Android development with Scala and SBTAnton Yalyshev
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Robert DeLuca
 
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Ontico
 
React & Redux for noobs
React & Redux for noobsReact & Redux for noobs
React & Redux for noobs[T]echdencias
 
React on Rails - RailsConf 2017 (Phoenix)
 React on Rails - RailsConf 2017 (Phoenix) React on Rails - RailsConf 2017 (Phoenix)
React on Rails - RailsConf 2017 (Phoenix)Jo Cranford
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Elyse Kolker Gordon
 
React.js workshop by tech47.in
React.js workshop by tech47.inReact.js workshop by tech47.in
React.js workshop by tech47.inJaikant Kumaran
 
Learning React: Facebook's Javascript Library For Building User Interfaces
Learning React: Facebook's Javascript Library For Building User InterfacesLearning React: Facebook's Javascript Library For Building User Interfaces
Learning React: Facebook's Javascript Library For Building User InterfacesKen Wheeler
 
React mit TypeScript – eine glückliche Ehe
React mit TypeScript – eine glückliche EheReact mit TypeScript – eine glückliche Ehe
React mit TypeScript – eine glückliche Eheinovex GmbH
 
Overview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web FrameworkOverview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web FrameworkIndicThreads
 
Scala based Lift Framework
Scala based Lift FrameworkScala based Lift Framework
Scala based Lift Frameworkvhazrati
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in AndroidRobert Cooper
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsJeff Durta
 

Similar to Connect.js - Exploring React.Native (20)

An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
 
Android development with Scala and SBT
Android development with Scala and SBTAndroid development with Scala and SBT
Android development with Scala and SBT
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
 
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
 
React & Redux for noobs
React & Redux for noobsReact & Redux for noobs
React & Redux for noobs
 
React native tour
React native tourReact native tour
React native tour
 
React on Rails - RailsConf 2017 (Phoenix)
 React on Rails - RailsConf 2017 (Phoenix) React on Rails - RailsConf 2017 (Phoenix)
React on Rails - RailsConf 2017 (Phoenix)
 
Let's react - Meetup
Let's react - MeetupLet's react - Meetup
Let's react - Meetup
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
 
React outbox
React outboxReact outbox
React outbox
 
React.js workshop by tech47.in
React.js workshop by tech47.inReact.js workshop by tech47.in
React.js workshop by tech47.in
 
Learning React: Facebook's Javascript Library For Building User Interfaces
Learning React: Facebook's Javascript Library For Building User InterfacesLearning React: Facebook's Javascript Library For Building User Interfaces
Learning React: Facebook's Javascript Library For Building User Interfaces
 
React mit TypeScript – eine glückliche Ehe
React mit TypeScript – eine glückliche EheReact mit TypeScript – eine glückliche Ehe
React mit TypeScript – eine glückliche Ehe
 
React 101
React 101React 101
React 101
 
Overview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web FrameworkOverview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web Framework
 
Scala based Lift Framework
Scala based Lift FrameworkScala based Lift Framework
Scala based Lift Framework
 
Overview Of Lift Framework
Overview Of Lift FrameworkOverview Of Lift Framework
Overview Of Lift Framework
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
 
React js
React jsReact js
React js
 

Recently uploaded

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Recently uploaded (20)

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

Connect.js - Exploring React.Native

  • 2. Josh JEnsen ABOUT Me mobile application consultant, entrepreneur, Technology Addict, OCR enthusiast, Beer Drinker. @joshJ EXPLORING REACT NATIVE
  • 3. Define ab·stract·ed consider (something) theoretically or separately from something else EXPLORING REACT NATIVE
  • 4. Define: Abstracted Platform A platform where an API is abstracted away from or separated from the primary language by proxy and/or runtime. EXPLORING REACT NATIVE UIView  *  myView  =  [[UIView  alloc]  init];Obj c React Native <View></View>
  • 5. EXPLORING REACT NATIVE React Native Open Source ○ Licence BSD iOS ○ Android ○ Windows No Platform Quick Facts Source: https://github.com/skypanther/mobileframeworks
  • 6. EXPLORING REACT NATIVE platform Tooling React Native Node.JS 4.x Xcode 6.3+ Gradle N/A ANT N/A JDK Latest HomeBrew Recommended
  • 8. platform Setup EXPLORING REACT NATIVE 1. OS X - Only OS X is currently supported 2. Homebrew is the recommended way to install Watchman and Flow. 3. Install Node.js 4.0 or newer. 3.1.Install nvm. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them. 4. brew install watchman. It is recommended that you install installing watchman, otherwise you might hit a node file watching bug. 5. brew install flow, if you want to use flow. Source: https://facebook.github.io/react-native/docs/getting-started.html
  • 9. Mobilejs.io Todo App EXPLORING REACT NATIVE http://mobilejs.io - Source
  • 10. Create Todo App EXPLORING REACT NATIVE 1. $ cd todomjs 2. Open ios/todomjs.xcodeproj and hit run in Xcode. 3. Open index.ios.js in your text editor of choice and edit some lines. 4. Hit ⌘-R in your iOS simulator to reload the app and see your change! Source: https://facebook.github.io/react-native/docs/getting-started.html $  npm  install  -­‐g  react-­‐native-­‐cli   $  react-­‐native  init  todomjs
  • 12. Initializing an Application EXPLORING REACT NATIVE var  {      AppRegistry,      StyleSheet,      Text,      View,   }  =  React;   var  todomjs  =  React.createClass({      render:  function()  {          return  (              <View  style={styles.container}>                  <Text  style={styles.welcome}>                      Welcome  to  React  Native!                  </Text>              </View>          );      }   });   AppRegistry.registerComponent('todomjs',  ()  =>  todomjs); Base File
  • 14. Layouts React NAtive EXPLORING REACT NATIVE <View  style={styles.formWrapper}>        <Icon          name='fontawesome|chevron-­‐down'          style={styles.selectAllIcon}          />          <TextInput          ref="textInput"          style={styles.textInput}      />   </View>   formWrapper:  {      flexDirection:  'row'   },   selectAllIcon:  {      alignSelf:  'center',      width:  40,      height:  40   },     textInput:  {      flex:  1,      height:  60,      padding:  10,   }
  • 16. Navigator React NAtive EXPLORING REACT NATIVE <NavigatorIOS      style={styles.topLevelNavigator}      navigationBarHidden={true}      initialRoute={{          title:  '',          component:  require('./app/pages/list')      }}   />  
  • 17. Getting to Hello World EXPLORING REACT NATIVE
  • 18. Getting to Hello World React Native EXPLORING REACT NATIVE var  React  =  require('react-­‐native');   var  {      Text   }  =  React;   var  ListPage  =  React.createClass({      render:  function()  {          return  (              <Text>Hello  World</Text>          );      }   });   module.exports  =  ListPage;  
  • 19. Adding A Native Module EXPLORING REACT NATIVE
  • 20. Adding Native Icons EXPLORING REACT NATIVE Source: https://github.com/corymsmith/react-native-icons npm  install  react-­‐native-­‐icons@latest  -­‐-­‐save •In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name] •Go to node_modules ➜ react-native-icons➜ ios and add ReactNativeIcons.xcodeproj •Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your project's Build Phases ➜ Link Binary With Libraries phase •Add the font files you want to use into the Copy Bundle Resources build phase of your project (click the '+' and click 'Add Other...' then choose the font files from node_modules/ react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit). •Run your project (Cmd+R)
  • 22. Text React Native EXPLORING REACT NATIVE <Text  style={styles.header}>todos</Text> header:  {      fontFamily:  'Helvetica  Neue',      fontWeight:  '100',      fontSize:  80,      textAlign:  'center',      color:  '#e7e7e7',      marginTop:  20   }
  • 23. Mobilejs.io Todo App EXPLORING REACT NATIVE http://mobilejs.io - Source
  • 25. ListView React Native EXPLORING REACT NATIVE var  ListPage  =  React.createClass({      getInitialState:  function()  {          this.ds  =  new  ListView.DataSource({rowHasChanged:  (r1,  r2)  =>   r1.rowID  !==  r2.rowID});          return  {              todoItems:  this.props.todoItems  ||  [],              dataSource:  this.ds.cloneWithRows(this.props.todoItems  ||  []),          };      }   }
  • 26. ListView React Native EXPLORING REACT NATIVE <ListView      style={styles.todoListView}      initialListSize={15}      dataSource={this.state.dataSource}      renderRow={(rowData,  sectionID,  rowID,  highlightRow)  =>  (          <TodoRow  rowParams={{              sectionID,              rowID,              highlightRow,              updateRow:  this.updateRow,              deleteRow:  this.deleteRow,              rowOnPress:  this.rowOnPress          }}  rowData={rowData}  />      )}    automaticallyAdjustContentInsets={false}   />
  • 27. ListView React Native EXPLORING REACT NATIVE this.state.todoItems.unshift(_.extend({      rowID:  new  Date().getTime(),      text:  e.nativeEvent.text,      children:  []   },  config.rowTypes.notDone));   this.setState({      dataSource:  this.ds.cloneWithRows(this.state.todoItems)   },  function()  {      this.clearTextInput();   });  
  • 29. Tap Event Handlers React Native EXPLORING REACT NATIVE <TouchableOpacity      onPress={()  =>  this.backOnPress()}      activeOpacity={0.2}      >      <Text>back</Text>   </TouchableOpacity> List.JS
  • 31. Code Reuse React NAtive EXPLORING REACT NATIVE renderBackButton:  function()  {      if  (this.props.showBack)  {          return  (              <TouchableOpacity                  style={styles.touchableAreaBackIcon}                  onPress={()  =>  this.backOnPress()}                  activeOpacity={0.2}                  >                  <Icon                      name='fontawesome|arrow-­‐circle-­‐o-­‐left'                      size={30}                      color='#ead7d7'                      style={styles.backButtonIcon}                      />              </TouchableOpacity>          );      }   } {this.renderBackButton()}
  • 32. Code Reuse React NAtive EXPLORING REACT NATIVE <TodoRow  rowParams={{      sectionID,      rowID,      highlightRow,      updateRow:  this.updateRow,      deleteRow:  this.deleteRow,      rowOnPress:  this.rowOnPress   }}  rowData={rowData}  /> var  TodoRow  =  require('./../components/todorow'); this.props
  • 34. NAvigation REact NAtive EXPLORING REACT NATIVE        this.props.navigator.push({              title:  '',              component:  require('./list'),              passProps:  {                  rowID:  rowID,                  showBack:  true,                  todoItems:  this.state.todoItems[rowID].children,                  updateRowChildren:  this.updateRowChildren              }          });  
  • 36. Extending React Native EXPLORING REACT NATIVE var  React  =  require('react-­‐native');   var  {  NativeModules  }  =  React;   var  {  RNControlFlashlight  }  =  NativeModules;   RNControlFlashlight.turnFlashlight("flashlightOn",  function   errorCallback(results)  {            console.log('JS  Error:  '  +  results['errMsg']);     },  function  successCallback(results)  {            console.log('JS  Success:  '  +  results['successMsg']);     }   ); Source: https://github.com/rhaker/react-native-control-flashlight-ios
  • 37. Pros & Cons BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  • 38. Pros & CONS React Native BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT ‣ Best Feature: Live Reload Pros Cons Live Reload / No compile Time No JS Encryption Growing Community Very Young Completely Open Source ES6 Fluency is almost required Expressive Markup React Methodology Learning Curve Limited Cross-platform Apis