Introduction to React Native

Rami Sayar - @ramisayar
Senior Technical Evangelist
Microsoft Canada
@RAMISAYAR

• Introduction to React
• Introduction to React Native
• Building Apps with Flexbox
• Using the List View
• Builtin Components
• Demo Walkthrough
• Tools
@RAMISAYAR

Assumption: JavaScript Developer
@RAMISAYAR

• React is a UI *library* developed at Facebook.
• Lets you create interactive, stateful & reusable UI components.
@RAMISAYAR

@RAMISAYAR
Image: http://coenraets.org/blog/2014/12/sample-mobile-application-with-react-and-cordova/

• React can be used on both
the client and server side.
• Uses a Virtual DOM to
selectively render subtrees of
components on state change.
@RAMISAYAR

• Adds this weird thing to your HTML called JSX.
• Let’s you write HTML-ish tags in JavaScript to simplify creating
components.
var HelloWorldComponent = React.createClass({
render: function(){
return ( <h1>Hello, world!</h1> );
}
});
And you can use ES6 classes instead of calling createClass()
@RAMISAYAR

• Added attributes are called props and can be used to render
dynamic data.
var HelloNameComponent = React.createClass({
render: function(){
return ( <h1>Hello, {this.props.name}!</h1> );
}
});
ReactDOM.render(<HelloNameComponent name="Rami"
/>, document.getElementById('app'));
@RAMISAYAR

• Every component has a state object and a props object.
• Functions & Objects:
• getInitialState – Return value is the initial value for state.
• setState – Sets the state and triggers UI updates.
• getDefaultProps – Sets fallback props values if props aren’t supplied.
@RAMISAYAR

• React events are attached as properties and can trigger
methods.
• Data flows unidirectionally via the state and props objects.
• React seams to rerender the whole app on every data change
but really it only ends up rerendering the parts that changed.
@RAMISAYAR

• React Native is like React but instead of using web components
that you build yourself… you use native components instead.
• React Native allows you to use the same React concepts but
instead build native iOS and Android applications.
• There is also support for the Universal Windows platform and
Tizen platform.
@RAMISAYAR

class HelloWorldApp extends React.Component {
render(){
return ( <h1>Hello, world!</h1> );
}
}
Becomes
class HelloWorldApp extends Component {
render() {
return ( <Text>Hello world!</Text> );
}
}
@RAMISAYAR

ReactDOM.render(<HelloNameComponent name="Rami"
/>, document.getElementById('app'));
Becomes
AppRegistry.registerComponent('HelloWorldApp',
() => HelloWorldApp);
@RAMISAYAR

• All components have a style prop that accepts a JavaScript
object.
• You can use StyleSheet.create() to create a more complex style
sheet object that you can reference in your components.
@RAMISAYAR

class LotsOfStyles extends Component {
render() { return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
</View> );
}
}
const styles = StyleSheet.create({
bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, },
red: { color: 'red', }
});
@RAMISAYAR

Take a look at JavaScript style libraries: jss, cssx, jscss, react inline styles,
radium & more..
@RAMISAYAR

• Mobile viewports have fixed dimensions.
• React Native allows you to use the flexbox algorithm to layout
components, just like on the web*.
* A few exceptions. The defaults are different, with flexDirection
defaulting to column instead of row, and alignItems defaulting to
stretch instead of flex-start, and the flex parameter only supports a
single number.
@RAMISAYAR

• Displays vertically scrolling list of structured data.
• Only renders elements currently on screen.
• Extremely useful components that we will see in our demo.
@RAMISAYAR

react-native init AwesomeProject
cd AwesomeProject
react-native run-android
@RAMISAYAR

• React Native provides the Fetch API for your networking needs.
• Fetch will seem familiar if you have used XMLHttpRequest or
other networking APIs.
• The XMLHttpRequest API is built in to React Native.
• React Native also supports WebSockets for full-duplex
communication channels over a single TCP connection.
@RAMISAYAR

• ActivityIndicator
• ActivityIndicatorIOS
• DatePickerIOS
• DrawerLayoutAndroid
• Image
• ListView
• MapView
• Modal
• Navigator
• NavigatorIOS
• Picker
• PickerIOS
• ProgressBarAndroid
• ProgressViewIOS
• RefreshControl
• ScrollView
• SegmentedControlIOS
• Slider
• SliderIOS
• StatusBar
• SnapshotViewIOS
• Switch
• SwitchAndroid
• SwitchIOS
• TabBarIOS
• TabBarIOS.Item
• Text
• TextInput
• ToolbarAndroid
• TouchableHighlight
• TouchableNativeFeedback
• TouchableOpacity
• TouchableWithoutFeedback
• View
• ViewPagerAndroid
• WebView
@RAMISAYAR

• Nuclide is a package on top
of Atom to add support for
React Native, including
remote debugging.
• nuclide.io
@RAMISAYAR

Extension for Visual Studio
Code that allows you to debug
your code, quickly run react-
native commands from the
command palette and use
IntelliSense to browse objects,
functions and parameters for
React Native APIs.
github.com/Microsoft/vscode-
react-native
@RAMISAYAR

• No Need to Fork! Command-line Generator
• Apps, Components/Styles, Containers
(smart components), Screens
(opinionated containers), and more...
• ALL CODE works with iOS and Android
• Redux State Management
• Optional Redux Persistence (uses
AsyncStorage via redux-persist)
• Reactotron Ready
• Included Common Libs:
• react-native-vector-icons
• react-native-animatable
• react-native-i18n
• react-native-drawer
• apisauce
• reduxsauce
• react-native-maps
• rn-translate-template
• Included Developer Libs:
• reactotron
• AVA
• enzyme
• react-native-mock
• mockery
• nyc
@RAMISAYAR

• A cloud service that enables Cordova and React Native
developers to deploy mobile app updates directly to their
users’ devices. FREE.
• http://codepush.tools
@RAMISAYAR

tw: @ramisayar | gh: @sayar
@RAMISAYAR

©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the
U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft
must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Introduction to React Native

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to React Native (20)

Recently uploaded (20)

Introduction to React Native