Introduction to React Native

263 views

Published on

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.

Published in: Engineering
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
263
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Introduction to React Native

  1. 1. Rami Sayar - @ramisayar Senior Technical Evangelist Microsoft Canada @RAMISAYAR
  2. 2. @RAMISAYAR
  3. 3. @RAMISAYAR
  4. 4. @RAMISAYAR
  5. 5. • Introduction to React • Introduction to React Native • Building Apps with Flexbox • Using the List View • Builtin Components • Demo Walkthrough • Tools @RAMISAYAR
  6. 6. Assumption: JavaScript Developer @RAMISAYAR
  7. 7. @RAMISAYAR
  8. 8. • React is a UI *library* developed at Facebook. • Lets you create interactive, stateful & reusable UI components. @RAMISAYAR
  9. 9. @RAMISAYAR Image: http://coenraets.org/blog/2014/12/sample-mobile-application-with-react-and-cordova/
  10. 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. 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. 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. 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. 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. 15. @RAMISAYAR
  16. 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. 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. 18. ReactDOM.render(<HelloNameComponent name="Rami" />, document.getElementById('app')); Becomes AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp); @RAMISAYAR
  19. 19. @RAMISAYAR
  20. 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. 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. 22. Take a look at JavaScript style libraries: jss, cssx, jscss, react inline styles, radium & more.. @RAMISAYAR
  23. 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. 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. 25. react-native init AwesomeProject cd AwesomeProject react-native run-android @RAMISAYAR
  26. 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. 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. 28. @RAMISAYAR
  29. 29. • Nuclide is a package on top of Atom to add support for React Native, including remote debugging. • nuclide.io @RAMISAYAR
  30. 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. 31. @RAMISAYAR
  32. 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. 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. 34. @RAMISAYAR
  35. 35. @RAMISAYAR
  36. 36. • Introduction to React • Introduction to React Native • Building Apps with Flexbox • Using the List View • Builtin Components • Demo Walkthrough • Tools @RAMISAYAR
  37. 37. tw: @ramisayar | gh: @sayar @RAMISAYAR
  38. 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.

×