React Native Web

Vortrag zum Meetup des React Native Stammtisch Dresden

Transcript

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!