No content

React Native Web 

Jan Männig Senior CMS-Developer 

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

Alles aus einer Feder … 

Trennung von React und React Native 

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

React Native Web: Grundgedanke class App extends Component { render() { return ( ); } } export default App; body { margin: 0; padding: 0; font-family: sans-serif; } Auszug React App 

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

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 

Zusammenführung der Basis 

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

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 

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 

Auf Los gehts los … 

Abhängigkeiten 

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

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 

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

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

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 

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 

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

Installation 

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

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 

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 

Die Wahrheit liegt auf dem Platz. 

Ordnerstruktur 

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

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

Basics 

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 

Plattformspezifischer Code 

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 

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 

Routing 

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 

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

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 

Was ihr sonst noch 
 wissen solltet … 

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 

Fragen? 

Danke für eure Aufmerksamkeit!