Con la stessa potenza con cui React ha conquistato lo sviluppo front-end, React Native sta esplodendo nel mondo dello sviluppo mobile. In questo webinar vedremo le basi di questo framework, che ha avvicinato sia sviluppatori mobile che web, e come iniziare subito a sviluppare un'applicazione nativa in JavaScript.

1. Dal web al nativo:
Introduzione a React Native
Matteo Manchi
Milano 10-11 Novembre 2017

2. @matteomanchi
Mobile Development
2

3. @matteomanchi 3
Mobile Development
Native is hard…

4. @matteomanchi 4
Alternative from web world

5. @matteomanchi 5
Mobile Development
Native is hard…
… but necessary.

7. @matteomanchi
Matteo Manchi
} Full stack developer
} React enthusiast
} Co-founder of RomaJS
} CEO at ImprontaAdvance
} @matteomanchi
} https://github.com/takeno
7
About me

8. @matteomanchi
Front-end experience
8

9. @matteomanchi
A framework for building native apps using React.
9
React Native
Yeah, the same React of web developers.
Learn once, write anywhere.

10. @matteomanchi
■ Everybody knows JavaScript
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. @matteomanchi
Component definition
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. @matteomanchi
Demo time!
13

14. @matteomanchi 14
How it works
Native Bridge
Your code
JavaScript Core
bundle.js
Native View
render

15. @matteomanchi 15
About multi-platform
Business logic in JavaScript
means same codebase
between platforms.

16. @matteomanchi
JSCore allows you to use your favorite
JavaScript modules and tools!
16
JS Ecosystem

17. @matteomanchi
Style
17
■ CSS-like declarations with 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 company in Palo Alto
■ Huge contribution to React Native
■ Mantainers of create-react-native-app
■ Expo SDK
■ XDE
■ snack.expo.io
18
Expo.io

19. @matteomanchi
snack.expo.io

20. @matteomanchi
Demo time!
20

21. @matteomanchi
React Native wraps native 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. @matteomanchi
Demo time!
24

25. @matteomanchi
■ Like in create-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 install node
■ 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 community is 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
Stars Forks
Pull Requests Issues
React Native’s community is very active

29. @matteomanchi
Facebook Ads Manager
29
Where is 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 is React Native now?
Facebook App
FB event section is in RN
http://goo.gl/ziBzOl

31. @matteomanchi
“We use the
exact same version
internally”
Tadeu Zagallo
Software Engineer at Facebook
What’s next?
31http://goo.gl/ziBzOl

32. @matteomanchi
■ facebook.github.io/react-native
■ React Native 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. @matteomanchi
Woah! Woah!
33
Questions?

34. Potete venire a trovarmi 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'è una speciale promozione
per te!

36. CODEMOTION MILANO
10-11 NOVEMBRE 2017
http://milan2017.codemotionworld.com/
Ci vediamo a
Ricordati di controllare l’email!☺