Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Intro to react native

•
•
M
ModusJesus

This document provides an overview and introduction to React Native, including: - What React Native is and the problems it solves like enabling cross-platform development using a single JavaScript codebase. - The technologies that comprise React Native like ReactJS and how it binds to native platforms. - Getting started with a basic React Native app and examples of extending it with custom modules. - An overview of the React Native component library and APIs. - Recommendations to get familiar with related technologies like JSX, Flow, and Node.js. - Thoughts on the benefits and challenges of developing with React Native.

Related slideshows

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

More Related Content

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
  • 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