React Native - An Introduction

Transcript

1. REACT NATIVE
   BUILD NATIVE MOBILE APPS WITH JAVASCRIPT
   

   View Slide

2. BRENDAN NEE
   @BRENDANNEE
   

   View Slide

3. A way to make phone apps
   with Javascript and React
   REACT NATIVE IS…
   

   View Slide

4. Supports iOS and Android
   REACT NATIVE IS…
   

   View Slide

5. Real native apps, not a web
   view
   REACT NATIVE IS…
   

   View Slide

6. An open source* framework
   created by Facebook
   REACT NATIVE IS…
   * with a revocable patent license
   

   View Slide

7. Used by Airbnb, Facebook,
   Tesla, Baidu, Uber
   REACT NATIVE IS…
   

   View Slide

8. View Slide

9. WHAT IS REACT?
   Declarative
   
   Component-based
   
   Javascript
   
   Library for building user interfaces
   

   View Slide

10. WHAT IS REACT?
    

    View Slide

11. WHAT IS REACT?
    class MyComponent extends React.Component {
    render() {
    return Hello World;
    }
    }
    const mountNode = document.getElementById('root');
    ReactDOM.render(, mountNode);
    REACT EXAMPLE
    

    View Slide

12. WHAT IS REACT?
    REACT EXAMPLE
    

    View Slide

13. const element = Hello World;
    WHAT IS REACT?
    JSX
    Syntax extension to Javascript
    
    HTML inside of Javascript
    
    Template Language
    
    Optional (but suggested)
    

    View Slide

14. class MyComponent extends React.Component {
    render() {
    return Hello {this.props.name};
    }
    }
    const mountNode = document.getElementById('root');
    ReactDOM.render(, mountNode);
    WHAT IS REACT?
    REACT EXAMPLE - PROPS
    

    View Slide

15. WHAT IS REACT?
    REACT EXAMPLE - PROPS
    

    View Slide

16. ReactDOM.render(, mountNode);
    WHAT IS REACT?
    REACTDOM
    Library for working with the DOM
    
    DOM-specific methods
    

    View Slide

17. 
    
    
    
    
    WHAT IS REACT?
    JSX
    

    View Slide

18. WHAT IS REACT NATIVE?
    

    View Slide

19. WHAT IS REACT NATIVE?
    ReactNative instead of ReactDOM
    
    instead of
    
    Supports stylesheets
    

    View Slide

20. WHAT IS REACT NATIVE?
    import React from 'react';
    import {AppRegistry, View, Text, Button} from 'react-native';
    class MyComponent extends React.Component {
    render() {
    return (
    
    Hello world!
    
    
    );
    }
    }
    AppRegistry.registerComponent('MyComponent', () => MyComponent);
    REACT NATIVE EXAMPLE
    

    View Slide

21. WHAT IS REACT NATIVE?
    REACT NATIVE EXAMPLE
    

    View Slide

22. WHAT IS REACT NATIVE?
    REACT NATIVE EXAMPLE
    import React from 'react';
    import { AppRegistry, View, Text, Image } from 'react-native';
    class MyComponent extends React.Component {
    render() {
    const picture = {
    uri: 'https://i.imgur.com/b3iDL1u.png'
    };
    return (
    
    Hello world!
    source={picture}
    style={{width: 200, height: 112}}
    />
    
    );
    }
    }
    AppRegistry.registerComponent('MyComponent', () => MyComponent);
    

    View Slide

23. WHAT IS REACT NATIVE?
    REACT NATIVE EXAMPLE
    

    View Slide

24. STYLING REACT NATIVE
    import React from 'react';
    import { AppRegistry, StyleSheet, View, Text } from 'react-native';
    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'red',
    },
    });
    class MyComponent extends React.Component {
    render() {
    return (
    
    Hello world!
    
    );
    }
    }
    AppRegistry.registerComponent('MyComponent', () => MyComponent);
    

    View Slide

25. STYLING REACT NATIVE
    

    View Slide

26. MORE NATIVE COMPONENTS
    class MyComponent extends React.Component {
    render() {
    return (
    
    Name
    
    
    );
    }
    }
    AppRegistry.registerComponent('MyComponent', () => MyComponent);
    

    View Slide

27. MORE NATIVE COMPONENTS
    

    View Slide

28. REACT NATIVE COMPONENTS
    ActivityIndicatorIOS
    DatePickerIOS
    DrawerLayoutAndroid
    Image
    ListView
    MapView
    Modal
    Navigator
    NavigatorIOS
    PickerIOS
    Picker
    ProgressBarAndroid
    ProgressViewIOS
    RefreshControl
    ScrollView
    SegmentedControlIOS
    SliderIOS
    StatusBar
    Switch
    TabBarIOS
    TabBarIOS.Item
    Text
    TextInput
    ToolbarAndroid
    TouchableHighlight
    TouchableNativeFeedback
    TouchableOpacity
    TouchableWithoutFeedback
    View
    ViewPagerAndroid
    WebView
    

    View Slide

29. ACTIVITY INDICATOR
    

    View Slide

30. DATE PICKER
    

    View Slide

31. LIST VIEW - GRID
    

    View Slide

32. MAP VIEW
    

    View Slide

33. MODALS
    

    View Slide

34. PICKER
    

    View Slide

35. PROGRESS VIEW
    

    View Slide

36. SCROLL VIEW
    

    View Slide

37. SEGMENTED CONTROL
    

    View Slide

38. STATUS BAR
    

    View Slide

39. SWIPEABLE LIST VIEW
    

    View Slide

40. WEB VIEW
    

    View Slide

41. WRITE ONCE, RUN ANYWHERE
    

    View Slide

42. WRITE ONCE, RUN ANYWHERE
    LEARN ONCE, RUN ANYWHERE
    

    View Slide

43. REACT NATIVE PROJECT STRUCTURE
    

    View Slide

44. SHARE COMPONENTS
    

    View Slide

45. PLATFORM SPECIFIC CODE
    ActivityIndicatorIOS
    DatePickerIOS
    NavigatorIOS
    PickerIOS
    ProgressViewIOS
    SegmentedControlIOS
    SliderIOS
    TabBarIOS
    ProgressBarAndroid
    DrawerLayoutAndroid
    ViewPagerAndroid
    

    View Slide

46. NETWORKING
    fetch('https://mywebsite.com/mydata.json');
    fetch('https://mywebsite.com/endpoint/', {
    method: 'POST',
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    },
    body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
    })
    })
    

    View Slide

47. COMPONENT LIBRARIES
    https://github.com/react-native-training/react-native-elements
    REACT NATIVE ELEMENTS
    

    View Slide

48. COMPONENT LIBRARIES
    https://github.com/react-native-material-design/react-native-material-design
    REACT NATIVE MATERIAL DESIGN
    

    View Slide

49. COMPONENT LIBRARIES
    https://nativebase.io/
    NATIVE BASE
    

    View Slide

50. GETTING STARTED
    npm install -g create-react-native-app
    create-react-native-app AwesomeProject
    cd AwesomeProject
    npm start
    

    View Slide

51. GETTING STARTED
    > create-react-native-app AwesomeProject
    To run your app on iOS:
    cd /Users/brendannee/Sites/AwesomeProject
    react-native run-ios
    - or -
    Open ios/AwesomeProject.xcodeproj in Xcode
    Hit the Run button
    To run your app on Android:
    cd /Users/brendannee/Sites/AwesomeProject
    Have an Android emulator running (quickest way to get started), or a device connected
    react-native run-android
    

    View Slide

52. DEVELOPING IN REACT NATIVE
    ⌘D
    

    View Slide

53. DEBUGGING IN REACT NATIVE
    

    View Slide

54. APPLE TV
    React Native iOS applications "just work" on tvOS
    

    View Slide

55. THE END
    Brendan Nee
    @BRENDANNEE
    

    View Slide