intro to react native

moduscreate.com @ModusCreate

Intro to React NativeJay Garcia

@ModusJesus@ModusCreate

04/30/2015

moduscreate.com @ModusCreate

• Introduction• What is React Native

• Problems it solves• What technologies does it comprise of?

• Getting started• Example of extending React Native• Overall thoughts

• Q&A

Agenda

moduscreate.com @ModusCreate

• A Library • Binds JSX to

• iOS Cocoa Touch• (soon) Android UI

• Custom Layout system• Comprises a suite of technologies

• Applications run at near full speed*• Architecture is scalable• Library is extensible• BSD Licensed

What is react Native?Native App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

*Business logic in JavaScript is fast, but still interpreted

moduscreate.com @ModusCreate

• Leverage existing skill sets to write apps with native feel

• Gets you out of the “HTML5 Sandbox”

• Writing cross-platform high performance apps using single business logic codebase

Problems React Native Solves

moduscreate.com @ModusCreate

• React Native wraps Existing native UI controls

• Implementation of UI via JSX

Many UI components to choose from

moduscreate.com @ModusCreate

UI Component Library

Activity Indicator

Date Picker

Image

ListView

MapView

Navigator

Picker

ScrollView

Slider

TabBar

Text

TextInput

Touchable

TouchableOpacity

Touchable Highlight

Touchable WithoutFeedback

View

WebView

Alert

Border

StatusBarIOS

StatusBarIOS

ActionSheet

CameraRoll

moduscreate.com @ModusCreate

Device APIs & PolyFills

AppState

AsyncStorage

Interaction Manager

LinkingIOS

NetInfo

Vibration

Flexbox

GeoLocation Timers

Network

moduscreate.com @ModusCreate

*Github project is Experimental!

Check it out for yourself• Clone the React Native Repo

• *https://github.com/facebook/react-native.git

• In terminal:cd react-nativenpm_installcd Examples/UIExplorer/open UIExplorer.xcodeproj

• Requirements:• Xcode• NodeJS• NPM

moduscreate.com @ModusCreate

• *Creating custom modules is not difficult• Example patterns already exists in the library• Patterns are well documented!

React Native is Extensible

https://facebook.github.io/react-native/docs/

*Objective C or Swift experience may be required

moduscreate.com @ModusCreate

React Native can work with existing appsNative App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

Your existing application

moduscreate.com @ModusCreate

React Native can work with existing appsNative App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

WebView / JS Engine

React JS

moduscreate.com @ModusCreate

React Native can work with other librariesNative App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

Custom Library

Must conform to the module or

view specs

Custom Library JS

moduscreate.com @ModusCreate

React Native can work with other librariesNative App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

MCModPlayerInterface

LibOpenMPTMCModPlayerInterface.js

moduscreate.com @ModusCreate

React Native can work with other librariesNative App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

MCVgmPlayer

LibGMEMCVgmPlayer.js

moduscreate.com @ModusCreate

React Native can work with other librariesNative App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

MCEzAudioPlot

EZAudioPlot

MCEzAudioPlotJS

moduscreate.com @ModusCreate

● JSX● Flow● Node JS● NPM● Chrome Debugger● XCode

● React JS● React Native

Technologies to get familiar withhttps://facebook.github.io/react/docs/jsx-in-depth.html http://flowtype.org/

https://facebook.github.io/react/index.html https://facebook.github.io/react-native/index.html

moduscreate.com @ModusCreate

● Merger of ES and HTML● Enhances JavaScript semantics● Forward-leaning ES6 syntax● Requires a “Transpiler” (comes packaged with React Native projects)● Really easy to learn

JSX

moduscreate.com @ModusCreate

● Static type checker for JavaScript● Extremely easy to use● Is optional for your apps● Comes for free with React Native

Flow

http://flowtype.org/

moduscreate.com @ModusCreate

• Implements JSX• Leverages the Web Component paradigm• Syntax easy to learn• Some design patterns can take getting used to• Required to use React Native

React JS

http://facebook.github.io/react/docs/getting-started.html

moduscreate.com @ModusCreate

• Custom CSS implementation• Very lightweight and easy to learn

• Takes some getting used to coming from the browser CSS• Only two types of layouts

• Flexbox• Absolute

React Native CSS

https://facebook.github.io/react-native/docs/style.html#content

moduscreate.com @ModusCreate

*Github project is Experimental!

Getting started with React Native

• In terminal:npm install -g react-native-clireact-native init MyProjectcd MyProjectopen iOS/MyProject.xcodeproj

• Requirements:• Xcode• NodeJS• NPM

Quick Tour

moduscreate.com @ModusCreate

Thoughts on developing with React Native• Community is *vibrant*• JSX is really easy to master• Getting outside of the HTML5 sandbox is liberating• The Facebook developers are very responsive

• Some exchanges have occurred nights & weekends• Technology is still new

• Has some evolving to do• More UI goodness to come from the FB React Native Team

moduscreate.com @ModusCreate

Thank you!Jay Garcia

@ModusJesus@ModusCreate