Minicurso de React-Native

Slide 1

Slide 1 text

Minicurso de React-Native @felipemfp e @chicobentojr Célula Acadêmica de Desenvolvimento de Software

Slide 2

Slide 2 text

Agenda ● Introdução ao React ● Introdução ao React-Native ● Componentes Inclusos ● Componentes Open-Source ● Expo ● Prática

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, testáveis e reutilizáveis”

Slide 7

Slide 7 text

Ciclo de vida simplificado

Slide 8

Slide 8 text

Ciclo de vida

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

JSX

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

props

Slide 13

Slide 13 text

state

Slide 14

Slide 14 text

Componentes stateless

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Virtual DOM

Slide 17

Slide 17 text

Introdução ao React-Native

Slide 18

Slide 18 text

React-Native é React

Slide 19

Slide 19 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 20

Slide 20 text

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

Slide 21

Slide 21 text

CSS não é o mesmo

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

StyleSheet

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Componentes inclusos

Slide 26

Slide 26 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 27

Slide 27 text

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

Slide 28

Slide 28 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 29

Slide 29 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 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Expo

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Expo para desenvolvedores e clientes

Slide 38

Slide 38 text

Prática https://github.com/cades-ifrn/minicurso-react-native

Slide 39

Slide 39 text

Casa do Código TADS

Slide 40

Slide 40 text

Passo 0 - Iniciar o projeto ● create-react-native-app wtads-2017 ● cd wtads-2017 ● yarn add react-navigation ● yarn start

Slide 41

Slide 41 text

Passo 1 - Criar tela de ínicio ● Utilizar componente Image ● Utilizar componente Button ● Estilizar componentes

Slide 42

Slide 42 text

Passo 2 - Adicionar React-Nativation ● Separar componente HomeScreen ● Utilizar componente StackNavigator

Slide 43

Slide 43 text

Passo 3 - Navegar entre telas ● Criar componente ProgramacaoScreen ● Adicionar ProgramacaoScreen no navegador raiz ● Adicionar evento para realizar navegação ● Corrigir barra de status do Android

Slide 44

Slide 44 text

Passo 4 - Apresentar programação ● Utilizar componente SectionList ○ Criar componentes Header e Item ● Carregar programação da internet

Slide 45

Slide 45 text

Passo 5.1 - Melhorar UX ● Utilizar componente TouchableOpacity ● Utilizar componente RefreshControl

Slide 46

Slide 46 text

Passo 5.2 - Melhorar UI ● Atualizar componente Header ● Atualizar componente Item

Slide 47

Slide 47 text

Passo 6 - Desafio ● Melhorar UX/UI ○ Sugestão: utilizar componente ActivityIndicator no ProgramacaoScreen ● Refatorar componentes ● Criar tela para listar minicursos ● Adicionar funcionalidade de compartilhar item da programação ○ Dica: utilizar Share API ● Adicionar persistência no primeiro acesso ○ Dica: utilizar AsyncStorage API