React has been named the front-end library to learn in 2016! React Native has also picked up tremendous steam as a way to build cross-platform apps with React. In this talk, Rami will do a quick 5 minute introduction to React's core concepts. Following, Rami will introduce React Native, discuss the differences between React & React Native, and show you how to build a simple Android application. By the end of this talk, you will have a greater grasp of the ecosystem and leave with new tools in your developer arsenal.

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

2. @RAMISAYAR

3. @RAMISAYAR

4. @RAMISAYAR

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

6. Assumption: JavaScript Developer
@RAMISAYAR

7. @RAMISAYAR

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

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

10. • 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

11. • 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

12. • 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

13. • 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

14. • 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

15. @RAMISAYAR

16. • 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

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

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

19. @RAMISAYAR

20. • 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

21. 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

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

23. • 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

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

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

26. • 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

27. • 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

28. @RAMISAYAR

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

30. 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

31. @RAMISAYAR

32. • 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

33. • 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

34. @RAMISAYAR

35. @RAMISAYAR

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

37. tw: @ramisayar | gh: @sayar
@RAMISAYAR

38. ©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.