Downloaded 10 times
Uploaded byCodemotion
Webinar - Matteo Manchi: Dal web al nativo: Introduzione a React Native
The document is an introduction to React Native presented by Matteo Manchi, focusing on mobile development challenges and the advantages of using React Native to build native apps with JavaScript. It covers topics such as setting up the environment, the React Native ecosystem, and community resources. The presentation includes practical examples, tools, and references to relevant workshops and events in Milan, November 2017.
More Related Content
Similar to Webinar - Matteo Manchi: Dal web al nativo: Introduzione a React Native
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Webinar - Matteo Manchi: Dal web al nativo: Introduzione a React Native
- 1. Dal web alnativo: Introduzione a React Native Matteo Manchi Milano 10-11 Novembre 2017
- 2.
- 3.
- 4. @matteomanchi 4 Alternative fromweb world
- 5. @matteomanchi 5 Mobile Development Nativeis hard… … but necessary.
- 7. @matteomanchi Matteo Manchi } Fullstack developer } React enthusiast } Co-founder of RomaJS } CEO at ImprontaAdvance } @matteomanchi } https://github.com/takeno 7 About me
- 8.
- 9. @matteomanchi A framework forbuilding native apps using React. 9 React Native Yeah, the same React of web developers. Learn once, write anywhere.
- 10. @matteomanchi ■ Everybody knowsJavaScript Easy to Learn. ■ Native Build Real native mobile apps. ■ JS Reloading No time wasted in recompiling. ■ UI Components React Native wraps existing native UI controls 10 Why React Native
- 11.
- 12. @matteomanchi ■ npm install-g create-react-native-app ■ create-react-native-app AwesomeProject ■ npm run ios ■ npm run android ■ npm start ■ npm test 12 Getting started - The modern way
- 13.
- 14. @matteomanchi 14 How itworks Native Bridge Your code JavaScript Core bundle.js Native View render
- 15. @matteomanchi 15 About multi-platform Businesslogic in JavaScript means same codebase between platforms.
- 16. @matteomanchi JSCore allows youto use your favorite JavaScript modules and tools! 16 JS Ecosystem
- 17. @matteomanchi Style 17 ■ CSS-like declarationswith camel-case properties ■ style props defined for all native components ■ It can be an array of styles ■ StyleSheet module to create multiple classes in one place and cache them It supports Flexbox!
- 18. @matteomanchi ■ React-native-based companyin Palo Alto ■ Huge contribution to React Native ■ Mantainers of create-react-native-app ■ Expo SDK ■ XDE ■ snack.expo.io 18 Expo.io
- 19.
- 20.
- 21. @matteomanchi React Native wrapsnative UI components 21 Out-of-the-box ■ TabBar ■ Text ■ TextInput ■ Touchable ■ TouchableOpacity ■ Touchable Highlight ■ Touchable WithoutFeedback ■ View WebView ■ Activity Indicator ■ Date Picker ■ Image ■ ListView ■ MapView ■ Navigator ■ Picker ■ ScrollView ■ Slider
- 22. @matteomanchi 22 Out-of-the-box ■ InteractionManager ■Keyboard ■ LayoutAnimation ■ Linking ■ NetInfo ■ PanResponder ■ PixelRatio ■ Settings ■ Share ■ StatusBarIOS ■ TimePickerAndroid ■ ToastAndroid ■ Vibration ■ ActionSheetIOS ■ Alert ■ Animated ■ AppState ■ AsyncStorage ■ BackAndroid ■ CameraRoll ■ Clipboard ■ DatePickerAndroid ■ Dimensions ■ Easing ■ Geolocation ■ ImageEditor React Native wraps native API
- 23. @matteomanchi 23 Out-of-the-box ■ GeoLocation ■Timers ● setTimeout ● setInterval ■ Flexbox ■ Network ● XMLHttpRequest ● Fetch React Native injects polyfills in JS Core
- 24.
- 25. @matteomanchi ■ Like increate-react-app, eject is the process of setting up your own custom build for your app. ■ When I need to do it? ■ I want to include external native libraries ■ I want to write my custom native module ■ I want to publish my app to Stores. 25 npm run eject
- 26. @matteomanchi ■ brew installnode ■ brew install watchman ■ npm install -g react-native-cli ■ Install X-Code and/or Android SDK ■ react-native init SampleApp ■ cd SampleApp ■ react-native run-ios ■ react-native run-android 26 Getting started - The native way
- 27. @matteomanchi React Native’s communityis very active ■ 53k+ stars on Github ■ 9300+ issue solved ■ React Native Community on Github 27 React Native Ecosystem
- 28. @matteomanchi React Native community 28http://githubstats.com/facebook/react-native StarsForks Pull Requests Issues React Native’s community is very active
- 29. @matteomanchi Facebook Ads Manager 29 Whereis React Native now? 85% shared code between platforms https://code.facebook.com/.../react-native-how-we-built-the-first-cross-platform
- 30. @matteomanchi 30 Where isReact Native now? Facebook App FB event section is in RN http://goo.gl/ziBzOl
- 31. @matteomanchi “We use the exactsame version internally” Tadeu Zagallo Software Engineer at Facebook What’s next? 31http://goo.gl/ziBzOl
- 32. @matteomanchi ■ facebook.github.io/react-native ■ ReactNative Newsletter ■ medium.com/@AlaouiSolaimani/react-native-why-you-sh ould-care-b30e5f960399 ■ reactnative.com/why-react-native-is-better-than-native- for-your-mobile-application ■ slideshare.net/TadeuZagallo/react-native-internals 32 Resources
- 33.
- 34. Potete venire atrovarmi a Codemotion Milano! Workshop: React Native: build and optimize multi-platform mobile applications Il 9 novembre 2017, 09:00-18:00 Talk: React Native for multi-platform mobile applications Il 10 novembre, 16:10-16.50
- 35. Controlla l’email! C'è unaspeciale promozione per te!
- 36. CODEMOTION MILANO 10-11 NOVEMBRE2017 http://milan2017.codemotionworld.com/ Ci vediamo a Ricordati di controllare l’email!☺