Introdução ao React-Native

Slide 1

Slide 1 text

Introdução ao React-Native @felipemfp Pesquisador LAIS-HUOL

Slide 2

Slide 2 text

Agenda ● Introdução ao React ● Introdução ao React-Native ● Componentes Inclusos ● Componentes Open-Source ● Expo ● Demostração

Slide 3

Slide 3 text

Introdução ao React

Slide 4

Slide 4 text

Apenas uma biblioteca

Slide 5

Slide 5 text

Tudo são componentes

Slide 6

Slide 6 text

“Componentes interativos, stateful e reutilizáveis”

Slide 7

Slide 7 text

Ciclo de vida simplificado

Slide 8

Slide 8 text

Como escrevemos componentes em React? ● Componentes são classes ● render() e JSX

Slide 9

Slide 9 text

JSX

Slide 10

Slide 10 text

Como escrevemos componentes em React? ● Possuem props e state ● Possuem funções: ○ setState() ○ getInitialState() ○ getDefaultProps() ○ [...]

Slide 11

Slide 11 text

props

Slide 12

Slide 12 text

state

Slide 13

Slide 13 text

Como escrevemos componentes em React? ● Dados fluem numa única direção ● Renderização conforme necessário (Virtual DOM)

Slide 14

Slide 14 text

Virtual DOM

Slide 15

Slide 15 text

Introdução ao React-Native

Slide 16

Slide 16 text

React-Native é React

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Introdução ao React-Native ● Ciclo de vida (props, state...) do componentes são o mesmo ● Continuamos usando JSX

Slide 19

Slide 19 text

CSS não é o mesmo

Slide 20

Slide 20 text

Adicionando estilo aos componentes nativos ● “CSS” como prop ● StyleSheet é quase CSS

Slide 21

Slide 21 text

StyleSheet

Slide 22

Slide 22 text

Construindo layout com React-Native ● O mesmo Flexbox da web ● Com diferentes defaults: ○ flexDirection: column ○ alignItems: stretch

Slide 23

Slide 23 text

Componentes inclusos

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Componentes inclusos ● Switch ● TabBarIOS ● TabBarIOS.Item ● Text ● TextInput ● ToolbarAndroid ● TouchableHighlight ● TouchableNativeFeedback ● TouchableOpacity ● TouchableWithoutFeedback ● View ● ViewPagerAndroid ● VirtualizedList ● WebView

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

API inclusas ● Linking ● NetInfo ● PanResponder ● PermissionsAndroid ● PixelRatio ● PushNotificationIOS ● Settings ● Share ● StatusBarIOS ● StyleSheet ● Systrace ● TimePickerAndroid ● ToastAndroid ● Vibration ● VibrationIOS ● Layout Props ● Picker Style Props ● Shadow Props

Slide 28

Slide 28 text

Componentes Open-Source http://www.awesome-react-native.com/

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Expo

Slide 34

Slide 34 text

Expo é React-Native ● Apenas JavaScript ● Fácil prototipagem ● Rápido desenvolvimento

Slide 35

Slide 35 text

Demostração

Slide 36

Slide 36 text

Demostração ● yarn global add create-react-native-app ● create-react-native-app dojo ● cd dojo ● yarn start

Slide 37

Slide 37 text

Obrigado! Questionamentos? gh: @felipemfp tw: @felipemfp