Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introdução ao React-Native

Introdução ao React-Native

Felipe Pontes

December 01, 2017
Tweet

More Decks by Felipe Pontes

Other Decks in Programming

Transcript

  1. Agenda • Introdução ao React • Introdução ao React-Native •

    Componentes Inclusos • Componentes Open-Source • Expo • Demostração
  2. JSX

  3. Como escrevemos componentes em React? • Possuem props e state

    • Possuem funções: ◦ setState() ◦ getInitialState() ◦ getDefaultProps() ◦ [...]
  4. Como escrevemos componentes em React? • Dados fluem numa única

    direção • Renderização conforme necessário (Virtual DOM)
  5. 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
  6. Introdução ao React-Native • Ciclo de vida (props, state...) do

    componentes são o mesmo • Continuamos usando JSX
  7. Construindo layout com React-Native • O mesmo Flexbox da web

    • Com diferentes defaults: ◦ flexDirection: column ◦ alignItems: stretch
  8. 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
  9. Componentes inclusos • Switch • TabBarIOS • TabBarIOS.Item • Text

    • TextInput • ToolbarAndroid • TouchableHighlight • TouchableNativeFeedback • TouchableOpacity • TouchableWithoutFeedback • View • ViewPagerAndroid • VirtualizedList • WebView
  10. 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
  11. API inclusas • Linking • NetInfo • PanResponder • PermissionsAndroid

    • PixelRatio • PushNotificationIOS • Settings • Share • StatusBarIOS • StyleSheet • Systrace • TimePickerAndroid • ToastAndroid • Vibration • VibrationIOS • Layout Props • Picker Style Props • Shadow Props