React Native Web

React Native Web

Vortrag zum Meetup des React Native Stammtisch Dresden

1e3f36cacc64d0a924cdbb3fdc59e8af?s=128

move:elevator

May 20, 2019
Tweet

Transcript

  1. None
  2. React Native Web

  3. Jan Männig Senior CMS-Developer

  4. Agenda Gedanke dahinter Grundlagen Abhängigkeiten Installation Getting Started In der

    Praxis Ordnerstruktur Basics Routing Plattformspezifischer Code Sonstiges Quellen
  5. Alles aus einer Feder …

  6. Trennung von React und React Native

  7. React • Basis von beiden Plattformen • Basierend auf HTML-Tags

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

    { return ( <div className="App"> <header className="App-header"> <h1 className=„App-title">Hallo Welt</h1> </header> {this.renderList()} </div> ); } } export default App; body { margin: 0; padding: 0; font-family: sans-serif; } Auszug React App
  9. React Native • Verknüpfung der JS-Ebene mit nativen Funktionalitäten •

    Eigene Komponenten • Keine HTML-Tags • Eigenes Styling React Native Web: Grundgedanke
  10. React Native Web: Grundgedanke <View style={styles.container}> <Text style={styles.welcome}>Welcome to React

    Native!</Text> <Text style={styles.instructions}>To get started, edit App.js</Text> <Text style={styles.instructions}>{instructions}</Text> </View> 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
  11. Zusammenführung der Basis

  12. React Native Web: Grundgedanke • React Native Web stellt React

    Native Komponenten für Web zur Verfügung
  13. React Native Web: Grundgedanke export default class App extends Component<Props>

    { render() { const { id, name, address, zip, city, image } = this.props.selectedOffice; return ( <View style={styles.container}> <Text style={styles.welcome}>SUBPAGE</Text> <Link to="/"><Text>Go Back</Text></Link> <View> <Text>{`#${id}`}</Text> </View> <View> <Text>{name}</Text> </View> <View> <Text>{`Adresse: ${address} ${zip} ${city}`}</Text> </View> <View> <Image style={{ width: 50, height: 50 }} source={{ uri: image }} /> </View> </View> ); } } Auszug Screen
  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
  15. Auf Los gehts los …

  16. Abhängigkeiten

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

    Abhängigkeiten
  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
  19. react-dom • Einstiegspunkt zur Arbeit mit dem „DOM“ (Document Object

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

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

    Native Web: Abhängigkeiten
  24. Installation

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

    Web: Installation
  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
  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
  28. Die Wahrheit liegt auf dem Platz.

  29. Ordnerstruktur

  30. Projekt-„Root“ • Struktur auf Basis einer React Native App •

    „public“-Verzeichnis für 
 HTML-Grundgerüst React Native Web: Ordnerstruktur
  31. „src“-Verzeichnis • Alle eigenen im Web genutzten Komponenten müssen unter

    ./src abgelegt werden • Weitere Unterverzeichnisse 
 möglich React Native Web: Sonstiges
  32. Basics

  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
  34. Plattformspezifischer Code

  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
  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
  37. Routing

  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
  39. React Native Web: Routing export default class App extends Component<Props>

    { state = {selectedOffice: null}; selectOffice = selectedOffice => { this.setState( {selectedOffice} ); }; render() { return ( <View style={styles.container}> <Router> <Switch> <Route exact path="/" render={props => ( <Home {...props} selectOffice={this.selectOffice} /> )} /> <Route path="/subpage" render={props => ( <Subpage {...props} selectedOffice={this.state.selectedOffice} /> )} /> </Switch> </Router> </View> ); } } App.js
  40. React Native Web: Routing const Home = props => {

    const handlePress = office => { props.selectOffice(office); props.history.push('/subpage', {selectedOffice: office}); }; return ( <View> <FlatList keyExtractor={offices => offices.id.toString()} data={offices} renderItem={({ item }) => ( <TouchableOpacity onPress={() => handlePress(item)}> <Text>{item.name}</Text> </TouchableOpacity> )} /> </View> ); }; export default Home; Home.js
  41. Was ihr sonst noch 
 wissen solltet …

  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
  43. Fragen?

  44. Danke für eure Aufmerksamkeit!