Academy PRO: React Native - introduction
The document provides an overview of React Native, including its history and timeline, components, styles, performance, debugging tools, and how to set up a React Native application. Some key points covered include: - React Native allows building native mobile apps using JavaScript and React by rendering UI components to native platform views. - It uses the same fundamental UI building blocks as regular iOS and Android apps like Views, Text, Image, ScrollView etc. but they are implemented using JavaScript and React. - Styles are defined using JavaScript objects with the StyleSheet.create method, allowing flexible styling similar to CSS but optimized for mobile. - Under the hood, React Native combines the fundamental native platform APIs with
![CLI
> npm install -g react-native-cli
> react-native run-android [run-ios]](https://image.slidesharecdn.com/reactnative-introduction-170620134028/85/Academy-PRO-React-Native-introduction-61-320.jpg)
Academy PRO: React Native - introduction
- 1. React Native
- 3. Why do we like native?
- 4. Native applications 1. Performance 2. Gestures 3. Animations 4. UI
- 5. Why is it difficult to develop?
- 6. I need... 1. Technology stack a. iOS b. Android 2. Code reuse 3. Development time
- 7. Instead 1. Technology stack a. iOS b. Android 2. Code reuse 3. Development time 1. JavaScript a. - b. - 2. Same shared logic 3. Ctrl+R
- 8. Do we have an alternative?
- 9. Yes! 1. Cordova (PhoneGap) + Ionic 2. JavaScript Native 3. React Native
- 10. Should we use them?
- 11. JavaScript Native (2015) 1. Simple applications 2. Performance 3. Angular JS 4. Community 5. Documentation
- 12. Ionic + PhoneGap (May 2015) 1. Angular JS 2. Native API access 3. Community 4. Performance 5. Hybrid
- 13. Isn’t Hybrid a solution?
- 14. HTML5 Application (HTML + CSS + JS) Rendering Layer (Web View) File JS Camera JS Media JS GPS JS Cordova Bridge (Abstraction Layer) File API Camera API Media API GPS API Phone Operative System (iOS, Android, Windows Phone)
- 15. Time to React Native!
- 16. History timeline
- 17. Ads manager
- 19. 1. Post Promote: 99% 2. SMS Captcha Checkpoint: 97% 3. Comment Moderation: 85% 4. Lead Gen Ads: 87% 5. Push Notification Settings: 92%
- 20. 85%
- 21. Who’s using it?
- 23. They are so cool that all job is done by…. Bots!
- 26. Available for Android 4.1+ iOS 8+
- 27. What’s with win Phone?
- 28. Nope H
- 29. What should I know before?
- 32. Code
- 33. Do we have the same components?
- 38. StyleSheet var styles = StyleSheet.create({ base: { width: 38, height: 38, }, background: { backgroundColor: '#222222', }, active: { borderWidth: 2, borderColor: '#00ff00', }, }); <Text style={styles.base} /> <View style={styles.background} />
- 39. Flex
- 41. What’s inside?
- 42. Under the hood
- 43. 1.Present in iOS 2.Absent in Android => HelloWorld app 3.5MB
- 47. Threads
- 49. Tools
- 50. React Native for Web
- 51. Profiler
- 54. Debugger
- 57. Reactotron
- 58. Ignite
- 59. > ignite new MyApplication
- 60. Setting up an application
- 61. CLI > npm install -g react-native-cli > react-native run-android [run-ios]
- 64. File structure
- 65. Questions?