Slide 1

Slide 1 text

Minicurso de React-Native com @felipemfp e @chicobentojr

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 métodos: ○ 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 é um pouco diferente

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 github.com/cades-ifrn/minicurso-react-native-gdg-natal

Slide 39

Slide 39 text

Passo 0 - Iniciar o projeto ● create-react-native-app pitaco-de-musica ● cd pitaco-de-musica Com npm: ● npm install --save react-navigation axios ● npm run start Com yarn: ● yarn add react-navigation axios ● yarn start

Slide 40

Slide 40 text

Passo 1 - Adicionar React-Navigation ● Criar componente HomeScreen ● Utilizar componente StackNavigator

Slide 41

Slide 41 text

Passo 2 - Criar tela de início ● Utilizar componente Image ● Utilizar componente ScrollView ● Utilizar componente Button ● Estilizar componentes

Slide 42

Slide 42 text

Passo 3 - Navegar entre telas ● Criar componente SearchScreen ● Adicionar SearchScreen no navegador raiz ● Adicionar evento para realizar navegação

Slide 43

Slide 43 text

Passo 4 - Pesquisar e Apresentar Resultados ● Utilizar componente FlatList ● Criar componente Header ● Criar componente Item ● Carregar resultados

Slide 44

Slide 44 text

Passo 5 - Melhorar UI e utilizar APIs ● Utilizar Alert API ● Criar componente ResultItem

Slide 45

Slide 45 text

Passo 6 - Adicionar exploração ● Adicionar evento ao clicar num resultado

Slide 46

Slide 46 text

Próximos passos

Slide 47

Slide 47 text

The Complete React Native and Redux Course https://goo.gl/2NYB6H

Slide 48

Slide 48 text

How to Become a React Native Developer in 2018 https://goo.gl/ggdZJE

Slide 49

Slide 49 text

Obrigado! Felipe Pontes Francisco Bento @felipemfp @chicobentojr