Downloaded 79 times
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Introduction to React Native
Introduction to React Native
- 1. Rami Sayar -@ramisayar Senior Technical Evangelist Microsoft Canada @RAMISAYAR
- 2.
- 3.
- 4.
- 5. • Introduction toReact • Introduction to React Native • Building Apps with Flexbox • Using the List View • Builtin Components • Demo Walkthrough • Tools @RAMISAYAR
- 6.
- 7.
- 8. • React isa UI *library* developed at Facebook. • Lets you create interactive, stateful & reusable UI components. @RAMISAYAR
- 9.
- 10. • React canbe used on both the client and server side. • Uses a Virtual DOM to selectively render subtrees of components on state change. @RAMISAYAR
- 11. • Adds thisweird 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 attributesare 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 componenthas 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 eventsare 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.
- 16. • React Nativeis 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 extendsReact.Component { render(){ return ( <h1>Hello, world!</h1> ); } } Becomes class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); } } @RAMISAYAR
- 18.
- 19.
- 20. • All componentshave 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 extendsComponent { 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 lookat JavaScript style libraries: jss, cssx, jscss, react inline styles, radium & more.. @RAMISAYAR
- 23. • Mobile viewportshave 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 verticallyscrolling 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 cdAwesomeProject react-native run-android @RAMISAYAR
- 26. • React Nativeprovides 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.
- 29. • Nuclide isa package on top of Atom to add support for React Native, including remote debugging. • nuclide.io @RAMISAYAR
- 30. Extension for VisualStudio 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.
- 32. • No Needto 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 cloudservice that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. FREE. • http://codepush.tools @RAMISAYAR
- 34.
- 35.
- 36. • Introduction toReact • 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.