Download as PDF, PPTX
Intro to react native
- 1. moduscreate.com @ModusCreate Intro toReact Native Jay Garcia @ModusJesus @ModusCreate 04/30/2015
- 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. moduscreate.com @ModusCreate •A Library •BindsJSX 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. moduscreate.com @ModusCreate • Leverageexisting 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. moduscreate.com @ModusCreate • ReactNative wraps Existing native UI controls • Implementation of UI via JSX Many UI components to choose from
- 6. moduscreate.com @ModusCreate UI ComponentLibrary 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. moduscreate.com @ModusCreate Device APIs& PolyFills AppState AsyncStorage Interaction Manager LinkingIOS NetInfo Vibration Flexbox GeoLocation Timers Network
- 8. moduscreate.com @ModusCreate *Github projectis 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. moduscreate.com @ModusCreate • *Creatingcustom 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. moduscreate.com @ModusCreate React Nativecan work with existing apps Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code Your existing application
- 11. moduscreate.com @ModusCreate React Nativecan 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. moduscreate.com @ModusCreate React Nativecan 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. moduscreate.com @ModusCreate React Nativecan 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. moduscreate.com @ModusCreate React Nativecan 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. moduscreate.com @ModusCreate React Nativecan work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code MCEzAudioPlot EZAudioPlot MCEzAudioPlotJS
- 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. moduscreate.com @ModusCreate ● Mergerof 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. moduscreate.com @ModusCreate ● Statictype checker for JavaScript ● Extremely easy to use ● Is optional for your apps ● Comes for free with React Native Flow http://flowtype.org/
- 19. moduscreate.com @ModusCreate •Implements JSX •Leveragesthe 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. moduscreate.com @ModusCreate •Custom CSSimplementation •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. moduscreate.com @ModusCreate *Github projectis 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.
- 23. moduscreate.com @ModusCreate Thoughts ondeveloping 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. moduscreate.com @ModusCreate Thank you! JayGarcia @ModusJesus @ModusCreate