React Native por onde começar

Quer desenvolver aplicativos usando Javascript? Enquanto os PWA's ainda não são uma realidade o React-Native vem se mostrando uma ótima alternativa para quem quer desenvolver de forma rápida e eficiente para mobile.

Transcript

1. React-Native, por onde Começar?
4. O que é?
5. Framework Javascript para desenvolvimento de aplicações mobile.
6. Então quer dizer que…
7. É igual Cordova, Phonegap, Ionic o/ #SQN
8. Qual a diferença então?
10. São frameworks que utilizam HTML, Javascript e Webview.
12. Framework Javascript para desenvolvimento de aplicações mobile gerando código nativo.
14. E o React?
15. === React-Native React
16. .contains( ) React-Native React
18. Qual a diferença então?
19. React é uma biblioteca para construir interfaces de usuário baseado em componentes.
21. React-native é um framework que permite construir app nativo com Javascript e React.
22. Benefícios • >90% de compartilhamento de código • Baseado em componentes • Hot Reloading • Flexbox • Javascript
23. Quem está usando?
25. O que é preciso pra começar?
27. Iniciando npm install -g react-native react-native init myHelloWorld
28. Bora cd myHelloWorld react-native run-ios / run-android
29. Inicio rápido npm install -g create-react-native-app create-react-native-app myHelloWorld
30. • Funciona sem Xcode e Android Studio https://snack.expo.io/ • Fácil pra testar direto no aparelho • Dizem que da pra desenvolver pra iOS no Windows
31. React web vs React native <div>
 <span>
 <image>
 <input>
 <View>
 <Text>
 <Image>
 <TextInput>
 

32. .class { display: flex; justify-content: center; align-items: center; width: 100%; font-size: 3rem; color: #fafafa; font-weight: 900; } .class { display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1, fontSize: 3, color: '#fafafa', } CSS vs StyleSheet
33. JSX <div className="sidebar" /> React.createElement( 'div', {className: 'sidebar'}, null )
34. HTML vs JSX <div> <p style="height: 40;">Primeiro parágrafo do texto.<p/> <input type="text" placeholder="Digite aqui"> </div> <View> <Text style={{height: 40}}>Primeiro parágrafo do texto.</Text> <TextInput placeholder="Digite aqui"/> </View>
35. Show me the code!
36. Obrigado! @gefymarcos http://gefymarcos.com.br/talks