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.
React Native
Introduction to React
Native & Analytics Apps
using RN
1
Mobile Meetup - Citrix R&D
MOBILE MEETUP React Native
Little about Myself
2
Rahat Khanna
@mappmechanic
Bangalore
Front End Dev Blogger Author
blog.pu...
MOBILE MEETUP React Native
Agenda
3
1. Discuss about Mobile Apps &
evolution of Mobiles
2. Introduction to React Native & ...
MOBILE MEETUP React Native
Evolution of Mobile Apps
4
MOBILE MEETUP React Native
Hybrid Mobile Apps
5
2 Major Categories
Specific
Programming
Language
like C#, Javascript,
Coff...
MOBILE MEETUP React Native 6
What is ReactJS ?
• Library for building User Interfaces
• V part of MVC ( Model View Control...
MOBILE MEETUP React Native
History of React Native
7
• Started as internal project in a Hackathon
after React was open sou...
MOBILE MEETUP React Native
Adopters & Users
Both Microsoft and Samsung committed to bringing React
Native to Windows and T...
MOBILE MEETUP React Native
React Native Architecture
9
MOBILE MEETUP React Native
React Native Components
10
MOBILE MEETUP React Native
APIs for Device Interaction
11
• Camera Roll
• AsyncStorage
• Geolocation
• ImageEditor
• PushN...
MOBILE MEETUP React Native
Development Environment
MOBILE MEETUP React Native
Install RN CLI
13
npm install -g react-native-cli
or
yarn add -g react-native-cli
MOBILE MEETUP React Native
Running your Application
14
• Application Init
• $ react-native init <project_name>
• IOS
• $ r...
MOBILE MEETUP React Native
Platform Specific Code
15
• You can choose your method for keeping platform
specific code organis...
MOBILE MEETUP React Native
JSX
16
• Merging ES and
HTML
• Enhances Javascript
semantics
• Forward leaning ES6
syntax
• Req...
MOBILE MEETUP React Native
Styling or CSS in Javascript
17
• All React Native core
components accept
a style attribute
• B...
MOBILE MEETUP React Native
Supporting Tools/Libraries
18
MOBILE MEETUP React Native
Analytics/Charts Components
19
https://github.com/tomauty/react-native-chart
React Native 20
Thanks
mAppMechanic
twitter.com/mAppMechanic
linkedin.com/in/rahatkh
yehtechnologies@gmail.com
20
Upcoming SlideShare
Loading in …5
×

Introduction to React Native & Rendering Charts / Graphs

909 views

Published on

A brief introduction to React Native and also best way to render analytics charts & graphs in React Native. Making cross platform ios and android apps.

Published in: Technology
  • Login to see the comments

Introduction to React Native & Rendering Charts / Graphs

  1. 1. React Native Introduction to React Native & Analytics Apps using RN 1 Mobile Meetup - Citrix R&D
  2. 2. MOBILE MEETUP React Native Little about Myself 2 Rahat Khanna @mappmechanic Bangalore Front End Dev Blogger Author blog.pusher.com airpair.com packtpub.com/blog pluralsight.org
  3. 3. MOBILE MEETUP React Native Agenda 3 1. Discuss about Mobile Apps & evolution of Mobiles 2. Introduction to React Native & its Features Some Cool Demos & Show off for React Native
  4. 4. MOBILE MEETUP React Native Evolution of Mobile Apps 4
  5. 5. MOBILE MEETUP React Native Hybrid Mobile Apps 5 2 Major Categories Specific Programming Language like C#, Javascript, CoffeeScript Webview Based Hybrid Apps Cross Compiled Hybrid Apps • Cross Platforms - iOS, Android, Windows • Minimal Go To Market Time • Rapid Iterations • Availability of Skills like HTML5, CSS & Javascript • Support for Multiple Screen Size using CSS3 • Support for OTA Update Pushes
  6. 6. MOBILE MEETUP React Native 6 What is ReactJS ? • Library for building User Interfaces • V part of MVC ( Model View Controller ) • Not a front end framework • Built by Facebook for internal usage first • Full Virtual DOM • Can be used in any other framework as the View component • Separation of Concerns Motivation for React Nowadays JS is very fast and new ES6 recommendation introduces powerful OOP principles Main drawback is DOM, till now no complete standardisation has been made in DOM APIs DOM updates are slow Applications are growing ever complex and data intensive
  7. 7. MOBILE MEETUP React Native History of React Native 7 • Started as internal project in a Hackathon after React was open sources in 2013 • The first public preview was in January of 2015 at React.js Conference • In March of 2015, Facebook announced at F8 that React Native is open and available on GitHub • Its 14th most starred repository on GitHub.
  8. 8. MOBILE MEETUP React Native Adopters & Users Both Microsoft and Samsung committed to bringing React Native to Windows and Tizen
  9. 9. MOBILE MEETUP React Native React Native Architecture 9
  10. 10. MOBILE MEETUP React Native React Native Components 10
  11. 11. MOBILE MEETUP React Native APIs for Device Interaction 11 • Camera Roll • AsyncStorage • Geolocation • ImageEditor • PushNotifications • Vibration • Share / Messages
  12. 12. MOBILE MEETUP React Native Development Environment
  13. 13. MOBILE MEETUP React Native Install RN CLI 13 npm install -g react-native-cli or yarn add -g react-native-cli
  14. 14. MOBILE MEETUP React Native Running your Application 14 • Application Init • $ react-native init <project_name> • IOS • $ react-native run-ios • edit index.ios.js • Android • $ react-native run-android • edit index.android.js
  15. 15. MOBILE MEETUP React Native Platform Specific Code 15 • You can choose your method for keeping platform specific code organised • /common/components • /android/components • /ios/components React Native provides a cleaner way to do that using platform specific extensions - .ios.js & .android.js MyCustomButton.ios.js & MyCustomButton.android.js import MyCustomButton from ‘./components/MyCustomButton’; • MyCustomButtonIOS.js • MyCustomButtonAndroid.js
  16. 16. MOBILE MEETUP React Native JSX 16 • Merging ES and HTML • Enhances Javascript semantics • Forward leaning ES6 syntax • Requires a transpiler
  17. 17. MOBILE MEETUP React Native Styling or CSS in Javascript 17 • All React Native core components accept a style attribute • Both a single value or an array of values
  18. 18. MOBILE MEETUP React Native Supporting Tools/Libraries 18
  19. 19. MOBILE MEETUP React Native Analytics/Charts Components 19 https://github.com/tomauty/react-native-chart
  20. 20. React Native 20 Thanks mAppMechanic twitter.com/mAppMechanic linkedin.com/in/rahatkh yehtechnologies@gmail.com 20

×