React Native — Webnesday #9

Transcript

1. 1.

   React Native React Native #webnesday — November 2016

2. 2.

   Robert Vogt Robert Vogt Software Engineer at smartive.ch @_deniaz

3. 3.

   1. History 2. React 3. React Native 4. Live Example

4. 4.

   None
5. 5.

   $str = '<ul>'; foreach ($talks as $talk) { $str +=

   '<li>' . $talk->name . '</ li>'; } $str += '</ul>'; 1. Facebook in 2004 (PHP)
6. 6.

   None
7. 7.

   $content = <ul />; foreach ($talks as $talk) { $content->appendChild(<li>{$talk-

   >name} />); } 2. Facebook in 2010 (XHP)
8. 8.

   $talkList = <TalkList />; foreach ($talks as $talk) { $talkList->appendChild(<Talk

   talk={$talk} />); } 3. Facebook in 2010 (XHP)
9. 9.

   «Welp, I’m going to take XHP to the browser within

   six months.» — Jordan Walke, Facebook / ReactJS
10. 10.

    None
11. 11.

    var content = ( <TalkList>{talks.map(talk => <Talk talk={talk} /> )}

    </TalkList> ); 4. Facebook in 2013 (ReactJS)
12. 12.

    UI = f (data)

13. 13.

    function f(name) { var div = document.createElement('div'); var p =

    document.createElement('p'); p.textContent = 'Hello ' + name ? name : 'World'; div.appendChild(p); return div; } 
 var node = f('Webnesday'); document.getElementById('my- app').replaceWith(node);
14. 14.

    None
15. 15.

    $(document).on('message.new', (e, data) => { let $msg = $('.messages'); $msg.prepend(`<li>New:

    ${data.message}</li>`); }); 1. jQuery (Imperative)
16. 16.

    $(document).on('message.new', () => { let $count = $('.notifications__count'); let currentCount

    = parseInt($count.text(), 10); $count.text(++currentCount); }); 2. jQuery (Imperative)
17. 17.

    const state = { unread: 1, messages: [{ id: 43,

    body: 'Hallo!', sender: 'Alice' }, { id: 42, body: 'Hoi :)', sender: 'Bob' }] }; 1. ReactJS (Declarative)
18. 18.

    class TalkList extends React.Component { render () { return (

    <ul className='talk-list'> {props.messages.map((message) => ( <li>{message.sender} says: {message.body}</li> )} </ul> ); } }
 <TalkList messages={state.message} /> 2. ReactJS (Declarative)
19. 19.

    class Counter extends React.Component { render () { const {

    count } = this.props; return ( <span className='counter'>{count}</span> ); } }
 <Counter count={state.unread} /> 3. ReactJS (Declarative)
20. 20.

    const state = { unread: 2, messages: [{ id: 44,

    body: 'Wie gehts!', sender: 'Alice' }, { id: 43, body: 'Hallo!', sender: Alice' }] }; 4. ReactJS (Declarative)
21. 21.

    «It turns out, ‘good enough’ wasn’t good enough.» — Mark

    Zuckerberg, 2012
22. 22.

    react-dom (DOM) react www.smartive.ch

23. 23.

    react-native
 (UIKit) react smartive App

24. 24.

    class Hello extends React.Component { constructor(props) { super(props); this.state =

    { name: 'World' }; } render() { return ( <div className="hello"> <input ref={(c) => this._input = c} type="text" placeholder="Your Name" onChange={() => this.setState({ name: this._input.value })} /> <p>Hello {this.state.name}!</p> </div> ); } }
25. 25.

    class Hello extends React.Component { constructor(props) { super(props); this.state =

    { name: 'World' }; } render() { return ( <View> <TextInput ref={(c) => this._input = c} placeholder="Your Name" onChange={() => this.setState({ name: this._input.value })} />
 <Text>Hello {this.state.name}!</Text> </View> ); } }
26. 26.

    <Button title="My Button" onPress={onButtonPressed} />

27. 27.

    Components ActivityIndicator Button DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator

    Picker ProgressBarAndroid ProgressViewIOS RefreshControl ScrollView Slider SnapshotViewIOS StatusBar Switch TabBarIOS Text TextInput TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View WebView APIS Alert Animated AppState AsyncStorage BackAndroid CameraRoll Clipboard Dimensions Geolocation ImageEditor ImageStore Keyboard Linking NetInfo PanResponder PushNotificationIOS Settings StyleSheet ToastAndroid Vibration
28. 28.

    React Native Community Quality code from the React Native Community

    github.com/react-native-community react-native-svg react-native-elements react-native-blur react-native-tab-view react-native-video react-native-navbar react-native-side-menu
29. 29.

    JS Runtime React Native
 JS API Custom App Code Android

    SDK Custom View Manager iOS SDK RN Bridge
30. 30.

    Native Bridge JavaScript 1 2 3 4 5 6 8

    7 Event (touch, timer, networks, …) Collect data and notify JS Serialized payload Process event Call native methods Update UI if needed Process commands Serialized response
31. 31.

    None
32. 32.

    $ brew install node $ brew install watchman $ npm

    install -g react-native Xcode AND/OR Gradle + Android Emulator
33. 33.

    ! A Word Of Warning Fun on OS X macOS,

    not so much on Linux / Windows.
34. 34.

    .babelrc android index.android.j s index.ios.js ios node_modules package.json src !""

    app.js $ react-native init WebnesdayApp $ cd WebnesdayApp $ react-native run-ios
35. 35.

    None
36. 36.

    Cheers Cheers @_deniaz