react native - jsday
TRANSCRIPT
![Page 2: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/2.jpg)
O que é React Native?
![Page 3: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/3.jpg)
O que não é React Native?
![Page 4: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/4.jpg)
Não é híbrido!
![Page 5: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/5.jpg)
Device API
HTML 5 e JavaScript
<!doctype html> <html>
<body>
Content
</body> </html>
WebView
• RN não usa WebView, a renderização é
nativa
• Perfomance do React Native tende a ser
melhor
• Os dois são OpenSource e tem um
ecossistema bem movimentado
![Page 6: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/6.jpg)
Não é transpiled!
![Page 7: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/7.jpg)
JavaScriptNative Code
Objective-C Swift Java
Kotlin…
![Page 8: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/8.jpg)
Native App
• Nativo não tem portabilidade de código
• Desenvolvimento apenas com
linguagem nativa
• Nativo tem performance um pouco
melhor
![Page 9: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/9.jpg)
Não é PWA!
![Page 10: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/10.jpg)
Device API
HTML 5 e JavaScript
<!doctype html> <html>
<body>
Content
</body> </html>
Web Browser Container
• PWA não está na App ou Play Store
• Ainda não tem acesso a todas as
APIs e em todas as plataformas
• Sem nenhum tipo de linguagem
nativa, usa API do browser
![Page 11: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/11.jpg)
O que é React Native?
![Page 12: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/12.jpg)
O que é React Native?
“Learn once, write anywhere”
![Page 13: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/13.jpg)
O que é React Native?
“Learn once, write anywhere”
Framework que permite criar aplicativos móveis nativos utilizando JavaScript e React (Native)
![Page 14: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/14.jpg)
Uma breve história do React Native
Summer 2013
Facebook internal hackathon
January 2015
Public Preview
March 2015
Released to open source
( iOS Support )
September 2015
Android Support
![Page 15: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/15.jpg)
React vs React Native
ReactJS
React Component render: function() {
return <div>Hello!</div>;}
BrowserDOM
ReactNative
React Component render: function() {
return <View>Hello!</View>;}
iOS
bridge
Android
???
![Page 16: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/16.jpg)
Código Nativo iOS
// Objective-C
UIAlertController * alert = [UIAlertController alertControllerWithTitle:@"Alert" message:@"Hello World" preferredStyle:UIAlertControllerStyleAlert]; [self presentViewController:alert animated:YES completion:nil];
![Page 17: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/17.jpg)
Código Nativo iOS
// Swift
let alert = UIAlertController(title: "Alert", message: "Hello World", preferredStyle: .alert) self.present(alert, animated: true)
![Page 18: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/18.jpg)
Código Nativo Android
// Java
AlertDialog.Builder builder = new AlertDialog.Builder(this);builder.setTitle("Alert");builder.setMessage("Hello World");builder.setPositiveButton("OK", null);builder.show();
![Page 19: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/19.jpg)
Código Nativo Android
// Kotlin
val builder = AlertDialog.Builder(this) builder.setTitle("Alert") builder.setMessage("Hello World") builder.setPositiveButton("OK", null) builder.show()
![Page 20: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/20.jpg)
Com o React Native
alert('Hello World');
… e multi-plataforma!
![Page 21: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/21.jpg)
Native - JavaScript Bridge
React Native API, Native Modules
JavaScript runtime (JavaScript Core, V8)
Application Code (JavaScript)
Native APIs
iOS, Android …
![Page 22: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/22.jpg)
Bridge (JavaScript - Nativo)
UIButton Class
<Button title="My Button" />
![Page 23: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/23.jpg)
Android iOS React Native
View UIView <View>
EditText UITextField <TextInput>
![Page 24: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/24.jpg)
Por que React Native?- experiência nativa
- uma única linguagem, JavaScript
- amigável para desenvolvedor web
- experiência de desenvolvimento rápida ( Hot Reloading, ~80% código compartilhado, fácil debug )
- possibilita acesso a código nativo caso precise
- open source e comunidade extremamente ativa ( +57K Stars )
![Page 25: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/25.jpg)
Por que não React Native?
- React Native é ainda relativamente novo comparado com iOS e Android nativo
- algumas das API ainda não são suportadas por padrão ( mas é possível acessar a API nativa através da Bridge )
- Navegação é… complexa!
- atualizações de versões constantes
- adiciona uma camada a mais
![Page 26: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/26.jpg)
Quem usa?
Facebook Facebook Ads Manager Instagram Airbnb
Walmart Tesla
…
Skype UberEATS
SoundCloud Pulse Wix
![Page 27: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/27.jpg)
Desenvolvimento
React = JSX + Modern JavaScript
![Page 28: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/28.jpg)
React = JSX + Modern JavaScript
class App extends Component {
state = { text: '' }; constructor(props) {
super(props); }
render() { return ( <TextInput style={{ marginTop:30, marginHorizontal:10, height: 40, borderColor: 'gray', borderWidth: 1}} placeholder = 'Digite seu nome' onChangeText={(text) => this.setState({text})} value={this.state.text} /> ); } }
![Page 29: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/29.jpg)
Styles
![Page 30: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/30.jpg)
Styles- na web nós temos o CSS
- no React Native, nós temos algo "similar" ao CSS usando JavaScript
class LotsOfStyles extends Component { render() { return ( <View> <Text style={styles.red}>just red</Text> <Text style={styles.bigblue}>just bigblue</Text> <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text> </View> ); } }
const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, });
![Page 31: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/31.jpg)
Layout
![Page 32: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/32.jpg)
Layout
buttons: { flex: 1, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center'}
FLEXBOX
![Page 33: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/33.jpg)
class App extends Component { render() { return ( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center'}}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ) } }
![Page 34: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/34.jpg)
class App extends Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>Hello!</Text> </View> ) } }
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { backgroundColor: 'whitesmoke', color: '#4A90E2', fontSize: 24, padding: 10, }, })
![Page 35: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/35.jpg)
Executando código específico para uma
Plataforma
import { Platform } from 'react-native';
if (Platform.OS === 'ios') { ... } else { ... }
![Page 36: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/36.jpg)
Executando código específico para uma
Plataforma
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });
![Page 37: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/37.jpg)
Executando código específico para uma
Plataforma
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({ container: { flex: 1, ...Platform.select({ ios: { backgroundColor: 'red', }, android: { backgroundColor: 'blue', }, }), }, });
![Page 38: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/38.jpg)
Executando código específico para uma
Plataforma
const message = Platform.select({ ios: 'Hello iOS', android: 'Hello Android', });
![Page 39: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/39.jpg)
Executando código específico para uma
Plataforma
const Component = Platform.select({ ios: () => require('ComponentIOS'), android: () => require('ComponentAndroid'), })();
<Component />;
![Page 40: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/40.jpg)
Executando código específico para uma
Plataforma
BigButton.ios.js
BigButton.android.js
const BigButton = require('./BigButton');
![Page 41: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/41.jpg)
Executando código específico para uma
Plataforma
spellCheck={true} clearTextOnFocus={false} underlineColorAndroid="transparent" numberOfLines={2} keyboardType="numeric"
![Page 42: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/42.jpg)
Navigation Libs
• wix/react-native-navigation (nativo)
• airbnb/native-navigation (nativo)
• react-community/react-navigation (JS)
• aksonov/react-native-router-flux (JS - baseado no react-navigation)
![Page 43: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/43.jpg)
Debug
• Chrome Developer Tools
• facebook/react-devtools
• jhen0409/react-native-debugger
• infinitered/reactotron
• VS Code
![Page 44: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/44.jpg)
Como começar?
➡ react-native-cli
➡ create-react-native-app
![Page 45: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/45.jpg)
react-native-cli
![Page 46: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/46.jpg)
Ambiente de Desenvolvimento
Mac OS pode desenvolver
• iOS
• Android
Windows e Linux podem desenvolver
• somente Android
![Page 47: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/47.jpg)
Instalação MAC
HOMEBREW/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
NODEbrew install node
WATCHMANbrew install watchman
REACT NATIVEnpm install -g react-native-cli
![Page 48: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/48.jpg)
Instalação WINDOWS
CHOCOLATEYhttps://chocolatey.org/
NODEchoco install nodejs.install
PYTHON 2choco install python2
JDK 8choco install jdk8
REACT NATIVEnpm install -g react-native-cli
![Page 50: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/50.jpg)
create-react-native-app
![Page 51: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/51.jpg)
create-react-native-app
![Page 52: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/52.jpg)
Expo XDE
![Page 53: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/53.jpg)
Qual editor?
• Qualquer editor de código
• Atom
• Sublime
• Visual Studio Code ❤
![Page 54: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/54.jpg)
https://snack.expo.io/
![Page 55: React Native - JSday](https://reader036.vdocuments.mx/reader036/viewer/2022081503/5a652d817f8b9af50b8b4675/html5/thumbnails/55.jpg)
Exemplo