Introdução ao React-Native

Transcript

1. Introdução ao React-Native @felipemfp Pesquisador LAIS-HUOL
2. Agenda • Introdução ao React • Introdução ao React-Native • Componentes Inclusos • Componentes Open-Source • Expo • Demostração
3. Introdução ao React
4. Apenas uma biblioteca
5. Tudo são componentes
6. “Componentes interativos, stateful e reutilizáveis”
7. Ciclo de vida simplificado
8. Como escrevemos componentes em React? • Componentes são classes • render() e JSX
9. JSX
10. Como escrevemos componentes em React? • Possuem props e state • Possuem funções: ◦ setState() ◦ getInitialState() ◦ getDefaultProps() ◦ [...]
11. props
12. state
13. Como escrevemos componentes em React? • Dados fluem numa única direção • Renderização conforme necessário (Virtual DOM)
14. Virtual DOM
15. Introdução ao React-Native
16. React-Native é React
17. Introdução ao React-Native • Componentes são renderizados como componentes nativos • Os mesmos conceitos são utilizados para construir aplicações • Suporte oficial para iOS e Android • Suporte ainda para Universal Windows
18. Introdução ao React-Native • Ciclo de vida (props, state...) do componentes são o mesmo • Continuamos usando JSX
19. CSS não é o mesmo
20. Adicionando estilo aos componentes nativos • “CSS” como prop • StyleSheet é quase CSS
21. StyleSheet
22. Construindo layout com React-Native • O mesmo Flexbox da web • Com diferentes defaults: ◦ flexDirection: column ◦ alignItems: stretch
23. Componentes inclusos
24. Componentes inclusos • ActivityIndicator • Button • CheckBox • DatePickerIOS • DrawerLayoutAndroid • FlatList • Image • KeyboardAvoidingView • ListView • MaskedViewIOS • Modal • NavigatorIOS • Picker • Picker.Item • PickerIOS • ProgressBarAndroid • ProgressViewIOS • RefreshControl • ScrollView • SectionList • SegmentedControlIOS • Slider • SnapshotViewIOS • StatusBar
25. Componentes inclusos • Switch • TabBarIOS • TabBarIOS.Item • Text • TextInput • ToolbarAndroid • TouchableHighlight • TouchableNativeFeedback • TouchableOpacity • TouchableWithoutFeedback • View • ViewPagerAndroid • VirtualizedList • WebView
26. API inclusas • AccessibilityInfo • ActionSheetIOS • Alert • AlertIOS • Animated • AnimatedValue • AnimatedValueXY • AppRegistry • AppState • AsyncStorage • BackAndroid • BackHandler • CameraRoll • Clipboard • DatePickerAndroid • Dimensions • Easing • Geolocation • ImageEditor • ImagePickerIOS • ImageStore • InteractionManager • Keyboard • LayoutAnimation
27. API inclusas • Linking • NetInfo • PanResponder • PermissionsAndroid • PixelRatio • PushNotificationIOS • Settings • Share • StatusBarIOS • StyleSheet • Systrace • TimePickerAndroid • ToastAndroid • Vibration • VibrationIOS • Layout Props • Picker Style Props • Shadow Props
28. Componentes Open-Source http://www.awesome-react-native.com/
33. Expo
34. Expo é React-Native • Apenas JavaScript • Fácil prototipagem • Rápido desenvolvimento
35. Demostração
36. Demostração • yarn global add create-react-native-app • create-react-native-app dojo • cd dojo • yarn start
37. Obrigado! Questionamentos? gh: @felipemfp tw: @felipemfp