React Native Web

Vortrag zum Meetup des React Native Stammtisch Dresden

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 jest@24.7.1
    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