Einführungssession zu React Native auf dem TYPO3camp Hamburg 2017

1. Einführung
TYPO3camp Hamburg – Markus Günther

2. Agenda
- Was ist React-Native
- Development requirements
- Development-Environment setup
- Getting started
- Initiale react native app
- Test App in Simulator
- Erklärung React-Native Basics
- Wie wird aus JS eine native Komponente?
- JSX
- Mehr React-Native interna
- Struktur einer RN App
- Struktur einer RN index file
- Neue Komponenten erstellen
- Komponenten stylen
- State-Management, Storage, Properties

4. Anforderungen
Basis Anforderungen
- Node.js
- npm oder yarn
- Watchman
- React Native command line interface
iOS Anforderungen
- Xcode mit den inkludierten iOS SDK
Android Anforderungen
- Android Studio
- Android SDK
- Android SDK Platform
- Android Virtual Device
Host Betriebsystem
- OSX/MacOS 10.7 oder neuer
- Linux Systeme mit inotify

5. - Homebrew installieren
/usr/bin/ruby -e "$(curl -fsSL https://raw.* usercontent.com/Homebrew/install/master/install)"
- Homebrew aktualisieren
brew update && brew upgrade
- node installieren
brew install node
- watchman installieren
brew install watchman
- yarn installieren
brew install yarn
- react-native-cli installieren
yarn global add react-native-cli
Installation (MacOS)

6. - Java version prüfen
javac -version
- Android Studio installieren
- Android SDK installieren
- Android SDK Platform installieren
- Android Virtual Devices installieren
- Android home in ~/.bashrc definieren
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
Wenn man android via Homebrew installiert dann ist der Pfad /usr/local/opt/android-sdk
Installation für Android

7. Erstellen einer neuen App via CLI
react-native init AppName
App starten
cd AppName
react-native run-ios
Getting started

8. Wie wird JS zu einer Nativen-Komponente

9. export default class SgTestApp extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
React Native Basics - JSX

10. React.createElement(
Text,
{styles.welcome},
'Welcome to React Native!'
)
React Native Basics - JSX
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
JSX Code kann auch in JavaScript geschrieben werden.

11. export default class SgTestApp extends Component {
render() {
const welcome = React.createElement(Text,{style: styles.welcome},'Welcome to React Native!'),
view = React.createElement(View, {style: styles.container}, welcome);
return (
view
);
}
}
React Native Basics - JSX

12. class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
React Native Basics - Komponenten
- React-Native ist sehr Komponentenorientiert
- Mehr oder weniger ist was man sehen kann in der Anwendungen eine Komponente
<Greeting name="Jon Doe" />

13. React Native Basics - Komponenten
- ActivityIndicator
- Button
- DatePickerIOS
- DrawerLayoutAndroid
- Image
- KeyboardAvoidingView
- ListView
- MapView
- WebView
- ScrollView
- Slider
- SnapshotViewIOS
- StatusBar
- Switch
- TabBarIOS
- TabBarIOS.Item

14. __tests__
ios
node_modules
android
index.ios.js
index.android.js
jsconfig.json
package.json
Struktur eine React-Native App
Basis Struktur nach dem kickstarten mit dem CLI Tool

15. import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';
export default class SgTestApp extends Component {
render() {
return (
<View>
<Text>Hello World</Text>
</View>
);
}
}
AppRegistry.registerComponent('SgTestApp', () => SgTestApp);
Struktur einer index File in React-Native
Die Struktur sollte immer folgendes
umfassen
Abhängigkeiten importieren
Komponente erstellen
Komponente als App registrieren