Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Native

6,219 views

Published on

How to write JavaScript native iOS (and later android) apps? React Native, basics, components and infrastructure.

Published in: Technology
  • Préstamo de dinero rápido para unas buenas vacaciones . Hola Señora y Señor. Este mensaje va dirigido a aquellos que están en necesidad financiera. Usted es especial, honesta y de buen carácter. Usted cansado de ser rechazado por los Bancos y usted piensa que no hay más de de para usted. Usted tiene un ingreso que puede permitir que usted para ocurrir a sus pagos mensuales? Pongo a su disposición un préstamo incluyendo 5.000€ y 5.000.000€ a condiciones muy simple a todas las personas que pueden pagar tiene una tasa de interés del 3%. Yo no el desgaste sobre préstamo, también prohibido por la ley.Ofrezco créditos en el corto, mediano y largo plazo, y un plazo de amortización asequible. A continuación, la solución está aquí. Ahora, por favor póngase en Contacto conmigo por e-mail para más info: fernandezlucas.sebastian@gmail.com fernandezlucas.sebastian@gmail.com Gracias y a la espera de su correo electrónico para ayudarte
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

React Native

  1. 1. React Native Artyom Trityak
  2. 2. NATIVE mobile apps Separated thread Native UI Events bridge
  3. 3. How to start • Buy Mac, install Xcode • Install node.js, npm • npm install -g react-native-cli • react-native init LvivJSProject • Open LvivJSProject.xcodeproj and hit run in Xcode • Open index.ios.js in text editor and edit some lines
  4. 4. React Native Webpack app/*.js(x) -> index.ios.js 1 2 3
  5. 5. React Native Webpack Fix React Native imports
  6. 6. React Native Webpack ESLint 1 2
  7. 7. React Native Webpack ESLint 1
  8. 8. RN base concepts • *.js -> index.ios.js • RN pre-defined tags instead of html • Inline styles (CSS in JS) • RN components (like using components library)
  9. 9. RN pre-defined tags
  10. 10. JSS and StyleSheet • CSS StyleSheets abstraction -> iOS layout • Flexbox from Web to Native • Immutable • Optimized (cached in table, using reference)
  11. 11. JSS and StyleSheet
  12. 12. JSS and StyleSheet
  13. 13. JSS and StyleSheet
  14. 14. Basic NATIVE components TabBarIOS AlertIOS
  15. 15. Basic NATIVE components NavigatorIOS (title, swipes, back, etc) ActivityIndicatorIOS
  16. 16. Basic NATIVE components TouchableHighlight SwitchIOS
  17. 17. Basic NATIVE components PickerIOS SliderIOS
  18. 18. Basic NATIVE components • AsyncStorage (key-value pairs) • TextInput • View • TouchableHighlight
  19. 19. Network requests XMLHttpRequest on top of iOS networking APIs
  20. 20. Network requests
  21. 21. Network requests Fetch working specification implementation top of iOS
  22. 22. Network requests
  23. 23. Debugging Just a browser: console.log, breakpoint
  24. 24. Debugging
  25. 25. Infrastructure Just
  26. 26. Infrastructure: JS
  27. 27. Infrastructure: JS
  28. 28. Infrastructure: JS
  29. 29. Infrastructure: JS
  30. 30. Infrastructure: JS
  31. 31. Integrating with existing app • // ReactView.h • #import <UIKit/UIKit.h> • @interface ReactView : UIView • @end

×