Build a real app with react native
1 like280 views
The document discusses React Native, a framework for building mobile apps using React. It begins with an agenda for discussing what React Native is, challenges of building niche mobile apps, and a demo of a sample market app built with React Native. It then covers React Native's capabilities like cross-platform support, live reload, and Code Push for OTA updates. It addresses common misconceptions about how React Native works and compiles to native code. Examples of popular React Native libraries and apps are provided. In the demo section, a marketplace app built with React Native, Redux and other libraries is shown as an example project. Human: Thank you for the summary. Can you provide a shorter summary in 2 sentences or less?
Build a real app with react native
- 1. Build mobile app with React Native john@mingle
- 2. Agenda What is React Native Challenges when build niche apps Demo: Market App Q&A
- 3. React Native
- 4. React Native Challenges when build niche apps ● Dynamic UI without lose performances ● App size ● Complicated code-base
- 5. TRIED OUT A LOT (Navtive vs Hybrid) React Native Android 2012 iOS 2013 IONIC 1 2015 IONIC 2 2016 React Native 2016
- 6. React Native IONIC 1 (2015–2016) ● Missing piece of Cordova ● Super fast for prototyping ● UI elements are not native ● Problems with native components ● Performance on Android ● Angula
- 7. React Native IONIC 2 (2016) ● Component oriented (like RN) ● Add Electron support, Android Material, Windows UI ● Improved structure and Navigation ● Long waiting for stable version, breaking changes ● Painful debugging ● Performance limitations
- 8. React Native REACT NATIVE (2016 and later) ● Native experience ● Multi-platform ○ iOS, Android (WUP, Desktop, web) ● Used by AirBNB, Facebook, Instagram, Vogue ● Functional programming ● Easy to debug ● Huge community (+/-) https://goo.gl/QMh3jK
- 10. React Native CODE PUSH ● OTA updates ● Hot fixes ● Experimentation ● Continuous Deployment
- 12. React Native DOES THE JS COMPILE TO NATIVE CODE? NO
- 13. React Native DOES THE JS RUNS IN A WEB VIEW? NO
- 14. React Native What if i want to use the platform’s latest API’s? Just do it
- 15. React Native How does it work
- 16. React Native How does it work Main JSC Shadow Gesture/ Interaction React Render Diff Layout Render 16 ms
- 17. React Native REACT JS ● Just is View (Library) ● Declarative ● Component-Based ● Learn Once, Write Anywhere A Simple Component
- 18. React Native Redux ● Evolves the ideas of Flux ● Redux is a predictable state container for JavaScript apps. ● It is tiny (2kB, including dependencies). ● Reactjs, AngularJS, Swift
- 19. React Native HUGE COMMUNITY ● You have to choose components wisely ● Find components on JS.coach ● Choose by stars, issues, docs, demos, PR ● No complete UI framework like Ionic: ○ Native Base ○ Material Kit ● Lot of interesting libraries: ○ Lottie, Airbnb Maps
- 20. React Native EXAMPLES: AirBnB Map Lottie
- 21. React Native MORE SOURCES TO SEE ● Articles: ○ ReactJS x React Native http://bit.ly/2oywqGg ○ RN @ Instagram (http://bit.ly/2oVmkf4) ○ iOS dev toolset (http://bit.ly/2oEOc86) ● Newsletter: React Native Newsletter (http://reactnative.cc) ● Platform: Expo (https://expo.io) ● Stack: Ignite (https://github.com/infinitered/ignite) ● Presentation: RN @ Airbnb (http://bit.ly/2oxEzek)
- 23. React Native Market RN ● Marketplace ● Stack: ES6,Redux, Native-base, Eslint Reactotron ● CI/CD: Fastlane, Bitrise, Hockeyapp
- 24. React Native PROPBLEM: ● First time explores ● 20* screens ● Redux is hard ● Android build ● Performance