Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

React Native Web

Slide 3

Slide 3 text

Jan Männig Senior CMS-Developer

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Alles aus einer Feder …

Slide 6

Slide 6 text

Trennung von React und React Native

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Zusammenführung der Basis

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Auf Los gehts los …

Slide 16

Slide 16 text

Abhängigkeiten

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Installation

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Die Wahrheit liegt auf dem Platz.

Slide 29

Slide 29 text

Ordnerstruktur

Slide 30

Slide 30 text

Projekt-„Root“ • Struktur auf Basis einer React Native App • „public“-Verzeichnis für 
 HTML-Grundgerüst React Native Web: Ordnerstruktur

Slide 31

Slide 31 text

„src“-Verzeichnis • Alle eigenen im Web genutzten Komponenten müssen unter ./src abgelegt werden • Weitere Unterverzeichnisse 
 möglich React Native Web: Sonstiges

Slide 32

Slide 32 text

Basics

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Plattformspezifischer Code

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Routing

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

React Native Web: Routing const Home = props => { const handlePress = office => { props.selectOffice(office); props.history.push('/subpage', {selectedOffice: office}); }; return ( offices.id.toString()} data={offices} renderItem={({ item }) => ( handlePress(item)}> {item.name} )} /> ); }; export default Home; Home.js

Slide 41

Slide 41 text

Was ihr sonst noch 
 wissen solltet …

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Fragen?

Slide 44

Slide 44 text

Danke für eure Aufmerksamkeit!