Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to react native

10,440 views

Published on

Intro to react native

Published in: Technology
  • Be the first to comment

Intro to react native

  1. 1. moduscreate.com @ModusCreate Intro to React Native Jay Garcia @ModusJesus @ModusCreate 04/30/2015
  2. 2. moduscreate.com @ModusCreate • Introduction • What is React Native • Problems it solves • What technologies does it comprise of? • Getting started • Example of extending React Native • Overall thoughts • Q&A Agenda
  3. 3. moduscreate.com @ModusCreate •A Library •Binds JSX to •iOS Cocoa Touch •(soon) Android UI •Custom Layout system •Comprises a suite of technologies •Applications run at near full speed* •Architecture is scalable •Library is extensible •BSD Licensed What is react Native? Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code *Business logic in JavaScript is fast, but still interpreted
  4. 4. moduscreate.com @ModusCreate • Leverage existing skill sets to write apps with native feel • Gets you out of the “HTML5 Sandbox” • Writing cross-platform high performance apps using single business logic codebase Problems React Native Solves
  5. 5. moduscreate.com @ModusCreate • React Native wraps Existing native UI controls • Implementation of UI via JSX Many UI components to choose from
  6. 6. moduscreate.com @ModusCreate UI Component Library Activity Indicator Date Picker Image ListView MapView Navigator Picker ScrollView Slider TabBar Text TextInput Touchable TouchableOpacity Touchable Highlight Touchable WithoutFeedback View WebView Alert Border StatusBarIOS StatusBarIOS ActionSheet CameraRoll
  7. 7. moduscreate.com @ModusCreate Device APIs & PolyFills AppState AsyncStorage Interaction Manager LinkingIOS NetInfo Vibration Flexbox GeoLocation Timers Network
  8. 8. moduscreate.com @ModusCreate *Github project is Experimental! Check it out for yourself • Clone the React Native Repo • *https://github.com/facebook/react-native.git • In terminal: cd react-native npm_install cd Examples/UIExplorer/ open UIExplorer.xcodeproj • Requirements: • Xcode • NodeJS • NPM
  9. 9. moduscreate.com @ModusCreate • *Creating custom modules is not difficult •Example patterns already exists in the library •Patterns are well documented! React Native is Extensible https://facebook.github.io/react-native/docs/ *Objective C or Swift experience may be required
  10. 10. moduscreate.com @ModusCreate React Native can work with existing apps Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code Your existing application
  11. 11. moduscreate.com @ModusCreate React Native can work with existing apps Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code WebView / JS Engine React JS
  12. 12. moduscreate.com @ModusCreate React Native can work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code Custom Library Must conform to the module or view specs Custom Library JS
  13. 13. moduscreate.com @ModusCreate React Native can work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code MCModPlayerInterface LibOpenMPT MCModPlayerInterface.js
  14. 14. moduscreate.com @ModusCreate React Native can work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code MCVgmPlayer LibGME MCVgmPlayer.js
  15. 15. moduscreate.com @ModusCreate React Native can work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code MCEzAudioPlot EZAudioPlot MCEzAudioPlotJS
  16. 16. moduscreate.com @ModusCreate ● JSX ● Flow ● Node JS ● NPM ● Chrome Debugger ● XCode ● React JS ● React Native Technologies to get familiar with https://facebook.github.io/react/docs/jsx-in-depth.html http://flowtype.org/ https://facebook.github.io/react/index.html https://facebook.github.io/react-native/index.html
  17. 17. moduscreate.com @ModusCreate ● Merger of ES and HTML ● Enhances JavaScript semantics ● Forward-leaning ES6 syntax ● Requires a “Transpiler” (comes packaged with React Native projects) ● Really easy to learn JSX
  18. 18. moduscreate.com @ModusCreate ● Static type checker for JavaScript ● Extremely easy to use ● Is optional for your apps ● Comes for free with React Native Flow http://flowtype.org/
  19. 19. moduscreate.com @ModusCreate •Implements JSX •Leverages the Web Component paradigm •Syntax easy to learn •Some design patterns can take getting used to •Required to use React Native React JS http://facebook.github.io/react/docs/getting-started.html
  20. 20. moduscreate.com @ModusCreate •Custom CSS implementation •Very lightweight and easy to learn •Takes some getting used to coming from the browser CSS •Only two types of layouts •Flexbox •Absolute React Native CSS https://facebook.github.io/react-native/docs/style.html#content
  21. 21. moduscreate.com @ModusCreate *Github project is Experimental! Getting started with React Native • In terminal: npm install -g react-native-cli react-native init MyProject cd MyProject open iOS/MyProject.xcodeproj • Requirements: • Xcode • NodeJS • NPM
  22. 22. Quick Tour
  23. 23. moduscreate.com @ModusCreate Thoughts on developing with React Native •Community is *vibrant* •JSX is really easy to master •Getting outside of the HTML5 sandbox is liberating •The Facebook developers are very responsive •Some exchanges have occurred nights & weekends •Technology is still new •Has some evolving to do •More UI goodness to come from the FB React Native Team
  24. 24. moduscreate.com @ModusCreate Thank you! Jay Garcia @ModusJesus @ModusCreate

×