$30 off During Our Annual Pro Sale. View Details »

React Native Web

React Native Web

Vortrag zum Meetup des React Native Stammtisch Dresden

move:elevator

May 20, 2019
Tweet

More Decks by move:elevator

Other Decks in Programming

Transcript

  1. View Slide

  2. React Native Web

    View Slide

  3. Jan Männig
    Senior CMS-Developer

    View Slide

  4. Agenda
    Gedanke dahinter
    Grundlagen
    Abhängigkeiten
    Installation
    Getting Started In der Praxis
    Ordnerstruktur
    Basics
    Routing
    Plattformspezifischer Code
    Sonstiges
    Quellen

    View Slide

  5. Alles aus einer Feder …

    View Slide

  6. Trennung von React und
    React Native

    View Slide

  7. React
    • Basis von beiden Plattformen
    • Basierend auf HTML-Tags
    React Native Web: Grundgedanke

    View Slide

  8. React Native Web: Grundgedanke
    class App extends Component {
    render() {
    return (


    Hallo Welt

    {this.renderList()}

    );
    }
    }
    export default App;
    body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    }
    Auszug React App

    View Slide

  9. React Native
    • Verknüpfung der JS-Ebene mit nativen Funktionalitäten
    • Eigene Komponenten
    • Keine HTML-Tags
    • Eigenes Styling
    React Native Web: Grundgedanke

    View Slide

  10. React Native Web: Grundgedanke

    Welcome to React Native!
    To get started, edit App.js
    {instructions}

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    },
    instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    },
    });
    Auszug React Native App

    View Slide

  11. Zusammenführung der Basis

    View Slide

  12. React Native Web: Grundgedanke
    • React Native Web stellt React Native Komponenten für Web zur
    Verfügung

    View Slide

  13. React Native Web: Grundgedanke
    export default class App extends Component {
    render() {
    const { id, name, address, zip, city, image } = this.props.selectedOffice;
    return (

    SUBPAGE
    Go Back

    {`#${id}`}


    {name}


    {`Adresse: ${address} ${zip} ${city}`}





    );
    }
    }
    Auszug Screen

    View Slide

  14. React Native Web: Grundgedanke
    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    }
    });
    Screenshot - Styles

    View Slide

  15. Auf Los gehts los …

    View Slide

  16. Abhängigkeiten

    View Slide

  17. react-native
    • Basis der Applikation
    • https://facebook.github.io/react-native/docs/getting-started
    React Native Web: Abhängigkeiten

    View Slide

  18. react-scripts
    • Enthält Skripte und Konfiguration für Build-Prozess
    • Kombiniert Webpack, Babel, ESLint …
    • https://www.npmjs.com/package/react-scripts
    React Native Web: Abhängigkeiten

    View Slide

  19. react-dom
    • Einstiegspunkt zur Arbeit mit dem „DOM“ (Document Object Model)
    • https://www.npmjs.com/package/react-dom
    React Native Web: Abhängigkeiten

    View Slide

  20. react-native-web
    • Konvertiert React Native Komponenten in Web-Elemente
    • https://www.npmjs.com/package/react-native-web
    React Native Web: Abhängigkeiten

    View Slide

  21. react-art
    • Abhängigkeit von react-native-web
    • Library zur Generierung von Vektorgrafiken per ReactJs
    • https://www.npmjs.com/package/react-art
    React Native Web: Abhängigkeiten

    View Slide

  22. react-router-native
    • Routing-Library für React Native
    • React Native „Binding“ für React-Router
    • https://www.npmjs.com/package/react-router-native
    React Native Web: Abhängigkeiten

    View Slide

  23. react-router-dom
    • DOM „Binding“ für React Router
    • https://www.npmjs.com/package/react-router-dom
    React Native Web: Abhängigkeiten

    View Slide

  24. Installation

    View Slide

  25. React Native App initialisieren
    $ react-native init TestReactNativApp
    React Native Web: Installation

    View Slide

  26. Web-Abhängigkeiten installieren
    $ yarn add react-scripts
    $ yarn add react-dom
    $ yarn add react-native-web
    $ yarn add react-art
    $ yarn add react-router-native
    $ yarn add react-router-dom
    React Native Web: Installation

    View Slide

  27. Versionskonflikt bzgl. Jest
    • Konflikt in den Abhängigkeiten zwischen react-native und react-
    native-web
    • Installation von Jest, manuell, in geforderter Version

    $ yarn add [email protected]
    React Native Web: Installation

    View Slide

  28. Die Wahrheit liegt auf dem Platz.

    View Slide

  29. Ordnerstruktur

    View Slide

  30. Projekt-„Root“
    • Struktur auf Basis einer React Native App
    • „public“-Verzeichnis für 

    HTML-Grundgerüst
    React Native Web: Ordnerstruktur

    View Slide

  31. „src“-Verzeichnis
    • Alle eigenen im Web genutzten Komponenten müssen unter ./src
    abgelegt werden
    • Weitere Unterverzeichnisse 

    möglich
    React Native Web: Sonstiges

    View Slide

  32. Basics

    View Slide

  33. React Native Komponenten
    • ca. 95% der Komponenten auch 

    im Web verfügbar
    • z.B. TouchableOpacity, View, 

    Text, Image, Flatlist …
    • Chrome, Firefox, Edge, 

    Safari 7+, IE 10+
    • https://necolas.github.io/react-native-web/examples/
    • https://github.com/necolas/react-native-web#components
    React Native Web: Basics

    View Slide

  34. Plattformspezifischer Code

    View Slide

  35. React Native Web: Plattformspezifisch
    const instructions = Platform.select( {
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
    web: 'Use CMD+R in browser window'
    } );
    isWeb = () => {
    return Platform.OS === 'web';
    };
    isAndroid = () => {
    return Platform.OS === 'android';
    };
    isIos = () => {
    return Platform.OS === 'ios';
    };
    Platform.select
    Platform.OS

    View Slide

  36. Import
    • Import spezifisch für einzelne Plattformen per Dateinamen
    steuerbar
    • Bsp: „filename.ios.js“, „fileName.android.js“, „fileName.web.js“,
    „fileName.native.js“
    • Benötigte Datei wird beim Import automatisch geladen
    React Native Web: Plattformspezifisch

    View Slide

  37. Routing

    View Slide

  38. React Native Web: Routing
    export {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
    } from 'react-router-dom';
    export {
    NativeRouter as Router,
    Switch,
    Route,
    Link
    } from 'react-router-native';
    routing.web.js
    routing.native.js

    View Slide

  39. React Native Web: Routing
    export default class App extends Component {
    state = {selectedOffice: null};
    selectOffice = selectedOffice => {
    this.setState( {selectedOffice} );
    };
    render() {
    return (



    (

    )} />
    (

    )} />



    );
    }
    }
    App.js

    View Slide

  40. React Native Web: Routing
    const Home = props => {
    const handlePress = office => {
    props.selectOffice(office);
    props.history.push('/subpage', {selectedOffice: office});
    };
    return (

    keyExtractor={offices => offices.id.toString()}
    data={offices}
    renderItem={({ item }) => (
    handlePress(item)}>
    {item.name}

    )}
    />

    );
    };
    export default Home;
    Home.js

    View Slide

  41. Was ihr sonst noch 

    wissen solltet …

    View Slide

  42. Quellen
    • https://medium.com/@jonnykalambay/your-first-hybrid-app-in-15-
    minutes-react-native-on-the-web-2cc2646051e
    • https://github.com/necolas/react-native-web
    • https://github.com/janmaennig/play-react-native-web
    React Native Web: Sonstiges

    View Slide

  43. Fragen?

    View Slide

  44. Danke für eure Aufmerksamkeit!

    View Slide