Introduction to React Native & Rendering Charts / Graphs

Introduction to React Native & Rendering Charts / Graphs

• 1.
  React Native Introduction toReact Native & Analytics Apps using RN 1 Mobile Meetup - Citrix R&D
• 2.
  MOBILE MEETUP ReactNative Little about Myself 2 Rahat Khanna @mappmechanic Bangalore Front End Dev Blogger Author blog.pusher.com airpair.com packtpub.com/blog pluralsight.org
• 3.
  MOBILE MEETUP ReactNative 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.
  MOBILE MEETUP ReactNative Evolution of Mobile Apps 4
• 5.
  MOBILE MEETUP ReactNative 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.
  MOBILE MEETUP ReactNative 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.
  MOBILE MEETUP ReactNative 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.
  MOBILE MEETUP ReactNative Adopters & Users Both Microsoft and Samsung committed to bringing React Native to Windows and Tizen
• 9.
  MOBILE MEETUP ReactNative React Native Architecture 9
• 10.
  MOBILE MEETUP ReactNative React Native Components 10
• 11.
  MOBILE MEETUP ReactNative APIs for Device Interaction 11 • Camera Roll • AsyncStorage • Geolocation • ImageEditor • PushNotifications • Vibration • Share / Messages
• 12.
  MOBILE MEETUP ReactNative Development Environment
• 13.
  MOBILE MEETUP ReactNative Install RN CLI 13 npm install -g react-native-cli or yarn add -g react-native-cli
• 14.
  MOBILE MEETUP ReactNative 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.
  MOBILE MEETUP ReactNative 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.
  MOBILE MEETUP ReactNative JSX 16 • Merging ES and HTML • Enhances Javascript semantics • Forward leaning ES6 syntax • Requires a transpiler
• 17.
  MOBILE MEETUP ReactNative 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.
  MOBILE MEETUP ReactNative Supporting Tools/Libraries 18
• 19.
  MOBILE MEETUP ReactNative Analytics/Charts Components 19 https://github.com/tomauty/react-native-chart
• 20.
  React Native 20 Thanks mAppMechanic twitter.com/mAppMechanic linkedin.com/in/rahatkh yehtechnologies@gmail.com 20