Since its 2013 release, React has brought a new way to design UI components in the world wide web. The same fundamentals have been taken to another important environment in our contemporary world: the mobile applications. We'll see the philosophy behind React Native - learn once, write anywhere - and how this new framework helps developers to build native apps using React.

1. @matteomanchi
Matteo Manchi
ROME 24-25 MARCH 2017
React Native for multi-platform
mobile applications

2. @matteomanchi
Mobile Development

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

4. @matteomanchi
Different platforms

5. @matteomanchi
Different languages

6. @matteomanchi
Different look

7. @matteomanchi
But what if we can use
technologies we know?
Mobile Development

8. @matteomanchi
■ Web developer friendly
■ Native UI (vs WebView)
■ Live Reload (vs Compile&Wait)
■ Declarative UI (vs Imperative UI)
■ Multi-platform support (vs specific support)
■ Open Source
Why React Native?

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

10. @matteomanchi
Web Developer
My journey to app development
⬇
Mobile site version
⬇
Mobile application ➡➡ WTF?

11. @matteomanchi
Phone Gap with box-shadow

12. @matteomanchi
Web Developer
My journey to app development
⬇
Mobile site version
⬇
Mobile application ➡
⬇
⬅⬅

13. @matteomanchi
Titanium - Red Screen of Death

14. @matteomanchi
Front-end experience

15. @matteomanchi
Codemotion 2015
https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html

16. @matteomanchi
Let's start from the beginning...

17. @matteomanchi
React is a JavaScript library for building user
interfaces.
■ Just the UI
■ One-way data flow
■ Virtual DOM
■ From Facebook
What is React?

18. @matteomanchi
■ Component: Everything is a component
■ Props: some data passed to child component
■ State: some internal data of a component
■ JSX: XML-like syntax helps to define component's
structure
■ Virtual DOM: tree of custom objects representing a port
of the DOM
Some keywords

19. @matteomanchi
Component definition

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

21. @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
Getting started

22. @matteomanchi
Component definition

23. @matteomanchi
Style
■ 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!

24. @matteomanchi
Demo time!

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

26. @matteomanchi
How it works
http://moduscreate.com/leverage-existing-ios-views-react-native-app/

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

28. @matteomanchi
Platform-specific code
■ if/else method
■ Platform-specific extensions

29. @matteomanchi
React Native wraps native UI components
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

30. @matteomanchi
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

31. @matteomanchi
Out-of-the-box
■ GeoLocation
■ Timers
● setTimeout
● setInterval
■ Flexbox
■ Network
● XMLHttpRequest
● Fetch
React Native injects polyfills in JS Core

32. @matteomanchi
Try it now!
■ git clone
https://github.com/facebook/
react-native.git
■ cd react-native
■ npm install
■ cd Examples/UIExplorer/
■ open UIExplorer.xcodeproj
■ Run
UIExplorer

33. @matteomanchi
Demo time!

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

35. @matteomanchi
JS Debugging

36. @matteomanchi
React Native’s community is very active
■ 46k+ stars on Github
■ 6500+ issue solved
■ React Native Community on Github
React Native Ecosystem

37. @matteomanchi
React Native Ecosystem
■ UI Components
● native-base
● react-native-elements
● react-native-material-kit
● react-native-material-design
■ Navigation
● react-native-router-flux
● react-navigation
● native-navigation by AirBnB
● wix/react-native-navigation
Hundreds of packages published:
■ Native API
● react-native-maps by AirBnB
● react-native-camera
● react-native-onesignal
● code-push by Microsoft

38. @matteomanchi
Specific tools to help your development
■ Deco IDE
https://www.decosoftware.com
■ Sketch by expo.io
codepen-like playground for React Native
https://sketch.expo.io
■ Fastlane
Continuous deployment for mobile apps
https://sketch.expo.io/
■ Create React Native App
Starter pack inspired by create-react-app
https://github.com/react-community/create-react-native-app
React Native Ecosystem

39. @matteomanchi
■ Hackatons
■ MVP
■ Web Developer teams
■ Simple apps
Where is React Native now?

40. @matteomanchi
Facebook Ads Manager
Where is React Native now?
85% shared code between platforms
https://code.facebook.com/.../react-native-how-we-built-the-first-cross-platform

41. @matteomanchi
Where is React Native now?
Facebook App
FB event section is in RN
http://goo.gl/ziBzOl

42. @matteomanchi
What’s next?
http://githubstats.com/facebook/react-native
Stars Forks
Pull Requests Issues
React Native’s community is very active

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

44. @matteomanchi
Woah! Woah!
Questions?

45. @matteomanchi
ROME 24-25 MARCH 2017
THANK YOU!
@matteomanchi

46. @matteomanchi
We’re looking for
JS enthusiast
who wants to
have fun
with this cool technologies.
Contact me @matteomanchi
We’re hiring!
goo.gl/us55X3
More open positions: PHP Dev, Front-End Designer