Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Agenda Gedanke dahinter Grundlagen Abhängigkeiten Installation Getting Started In der

    Praxis Ordnerstruktur Basics Routing Plattformspezifischer Code Sonstiges Quellen
  2. 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
  3. React Native • Verknüpfung der JS-Ebene mit nativen Funktionalitäten •

    Eigene Komponenten • Keine HTML-Tags • Eigenes Styling React Native Web: Grundgedanke
  4. 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
  5. React Native Web: Grundgedanke • React Native Web stellt React

    Native Komponenten für Web zur Verfügung
  6. 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
  7. 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
  8. 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
  9. react-dom • Einstiegspunkt zur Arbeit mit dem „DOM“ (Document Object

    Model) • https://www.npmjs.com/package/react-dom React Native Web: Abhängigkeiten
  10. 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
  11. 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
  12. 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
  13. 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
  14. Projekt-„Root“ • Struktur auf Basis einer React Native App •

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

    ./src abgelegt werden • Weitere Unterverzeichnisse 
 möglich React Native Web: Sonstiges
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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