Front7 React Native
0 gostou233 visualizações
Este documento fornece uma introdução ao React Native, incluindo: (1) O que é React Native e como ele difere de outras abordagens híbridas como Ionic, (2) Como iniciar um projeto React Native usando o modo fácil ou difícil, (3) Um exemplo simples de código para uma lista de tarefas em React Native.
Front7 React Native
- 1. React Native Desenvolvendo seu primeiro app nativo para Android/iOS com React Native
- 2. Quem sou eu? ● Engenheiro de Software no Elo7 ● Instrutor na Caelum ● Comedor de Camemburger (o melhor hambúrger do Brasil) ● Back-end developer que está se aventurando no mundo mobile
- 3. Um pouco de teoria
- 4. O que é React Native? Um framework para construir apps nativas usando React (https://facebook.github.io/react-native/)
- 5. O que diferencia o React Native do Ionic, por exemplo? ● Com Ionic você desenvolve seu app usando HTML, CSS e JS. Um componente de WebView (browser embarcado) é o responsável por exibir o app ● Com React Native você desenvolve seu app usando JS. ● Cada componente usado no JS tem uma implementação para Android e iOS nativos.
- 6. Exemplo do campo de texto ● Código JS: https://github.com/facebook/react-native/blob/master/Libraries/Components/T extInput/TextInput.js ● Código Objective-C: https://github.com/facebook/react-native/blob/master/Libraries/Text/TextInput/ Singleline/RCTUITextField.h ● Código Java: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/j ava/com/facebook/react/views/textinput/ReactEditText.java
- 7. Vamos criar nosso projeto
- 8. Começando um projeto do “modo fácil” ● nodejs ● npm 4.x ● watchman (https://facebook.github.io/watchman/) ● create-react-native-app (https://facebook.github.io/react-native/docs/getting-started.html) ● App expo para Android (https://play.google.com/store/apps/details?id=host.exp.exponent&hl=pt_BR) ● App expo para iOS (https://itunes.apple.com/us/app/expo-client/id982107779?mt=8)
- 9. Começando um projeto do “modo difícil” ● nodejs ● npm 4 ou 5 ● watchman (https://facebook.github.io/watchman/) ● react-native init (https://facebook.github.io/react-native/docs/getting-started.html) ● Android Studio (https://developer.android.com/studio/index.html?hl=pt-br) ● Xcode (https://developer.apple.com/xcode/)
- 10. Por qual começar? ● Você pode começar seu projeto pelo “modo fácil” pela facilidade de desenvolvimento ● No momento de enviar seus apps para as lojas da Google e da Apple você precisará trocar para o “modo difícil”. Isso pode ser feito através do eject (https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-rea ct-native-app.html)
- 11. Vamos ver um pouco de código
- 12. Um app simples de lista de tarefas ● Vamos desenvolver um app simples de lista de tarefas. ● O código do app está no Github (https://github.com/newtonbeck/palestra-front7-react-native)
- 13. Perguntas? :)