An introduction to React Native

Transcript

1. React Native
3. History
4. What is React Native?
5. A framework for building native apps using React.
6. With React Native, you don't build an “HTML5 app”, or a “hybrid app”.
7. You build a real mobile app by using the iOS and Android fundamental UI building blocks.
8. You put those building blocks together using JavaScript and React.
10. Vocabulary • Component = React Component • Style ~ CSS style • Bridge • View = iOS or Android View • RN = ReactNative
12. Under the hood
14. Under the hood JavaScript in JavaScriptCore (WebKit’s JS engine) Awesome Native App Bridge
15. How to Develop it, plan A • Plain React Native app ◦ It's a 2 native applications in Native IDE with the several React Native components ◦ Native knowledge is required
16. How to Develop it, plan B • Expo ◦ It is limited, it's a general js project ◦ No native knowledge is required ◦ You can publish it as Standalone apps
17. iOS + tvOS
18. Podfile
19. The magic RCTRootView
20. Android
21. build.gradle
22. The magic ReactRootView
23. • With headless JS Run js in Android services
24. Use in existed projects
25. Toolkit • Xcode • Android Studio • Native tests • Native libraries • Native layouts • VS Code • React • Babel • Storybook! • Jest • Expo (optional, but powerful)
26. Components
27. Existed Components • https://js.coach/react-native • http://native.directory/
28. Use *.android.js and *.ios.js Platform-dependent components
29. Platform API
30. Platform-depended styles
31. Is it mature?
32. Is it mature? • Navigation • Network • Animations • Multitasking on iPad • Other platforms
33. Navigation React Native Navigation – Demo React Native Router flux Both support Tabs, Drawers, Stack
34. Network Built-in fetch
35. Animations It works - in react style. Doc and Demo
36. Native Multitasking on iPad
37. Other platforms • macOS • Windows, Windows Phone, Xbox One
38. Compilation is complex Debugging is complex Knowledge base Research Components Dark side
39. Light side Community Code base sharing, Reusable components Single language for development, for most of the projects Integrations with existed Native Apps Documentation
41. Takeaways • React Native is Native • Light and Dark sides • React Native is mature
42. Materials: • Under the hood of react native • React Native Fundamentals Components: • JS coach • http://native.directory/ • React Native Router Flux References • Integration with existing apps • Headless JS in Android • Building Expo standalone apps • React Native Navigation doc