Intro to react native
- 1. moduscreate.com @ModusCreate Intro to React 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 •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. 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. moduscreate.com @ModusCreate • React Native wraps Existing native UI controls • Implementation of UI via JSX Many UI components to choose from
- 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. moduscreate.com @ModusCreate Device APIs & PolyFills AppState AsyncStorage Interaction Manager LinkingIOS NetInfo Vibration Flexbox GeoLocation Timers Network
- 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. 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. 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. 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. 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. 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. 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. 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. 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 ● 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. 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. 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. 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. 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. Quick Tour
- 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. moduscreate.com @ModusCreate Thank you! Jay Garcia @ModusJesus @ModusCreate