SlideShare a Scribd company logo
Introduction to React-Native
Waqqas Jabbar
16th May 2018
My Introduction
2000
NUST
2008
Right Hand Soft
Pvt. Ltd.
2012
Vadion (formally
Softrove)
2010
2016
20172004
2018
C C++ C# Web Mobile (RN)
Agenda
● Concepts
● FAQs
● Demos
○ Production app
○ Make Hello World App
○ ...
Clarify the ecosystem
● React.js
● React-Native
● Redux
● Flow
● JSX
● Babel
● Node
React.js: Basics
● Declarative Components
● Virtual DOM (Speed)
● One-way data binding ( VS angular)
A JavaScript library for building user
interfaces
React.js: Components
● Components
○ Types
■ Stateless (props only)
■ Stateful (state)
○ render() function
○ Life-cycle
● Props
○ Allow arbitrary input to be passed to a component
○ User for parent-child communication
● State
○ Store data of component
React-Native
● Learn once, write anywhere (previous: write once, run anywhere)
○ Provide native experience
● Built on React.js
● Available for
○ Android: 4.1+
○ iOS: 8+
Why React-Native
● Faster development speed
● Lower cost of development
○ Code reuse
○ Easy to find developers
● Ship across multiple platform
● Over the Air (OTA) updates
React-Native: Architecture
● JS code running in Virtual
Machine (VM)
Who is using React-Native
Showcase
Prerequisites to React-Native Development
● JavaScript (Preferably ES6)
● Basic XCode/Android Studio usage
● Basic understanding on npm
Development Environment
● Any JavaScript Editor ( WebStorm, Atom)
● XCode
● Android Studio
● React-Native CLI
● Genymotion
● nvm ( Node version manager)
● node/npm
Development Experience
● Close to web
● Code changes instantaneously updated on mobile
● Use chrome for debugging
Complimentary Libraries
● React Navigation (https://reactnavigation.org/)
● React Redux (https://redux.js.org/)
● Redux Sagas (https://redux-saga.js.org/)
● Mobx (https://mobx.js.org/)
Search at https://js.coach/?collection=React+Native
UI Libraries
● React-native-elements (https://react-native-training.github.io/react-
native-elements/)
● Nativebase (https://nativebase.io/)
● Use native components
Challenges in React-Native Development
● Frequent updates of React-Native
○ App should be updated regularly
● Third-party libraries can become outdated
react-native-git-upgrade
Debugging
● Google Chrome
● Performance Monitor
● Inspector
● Reactotron (https://infinite.red/reactotron)
JSX
● XML like syntax
● Convert JSX to JS
Styling
● Flexbox
● Styled-components for CSS
○ (https://www.styled-components.com/)
Platform Specific Code
● filename.android.js
filename.ios.js
● Platform.OS === ‘android’
Platform.OS === ‘ios’
● <Component>Android
● <Component>IOS
Starting a new app
● npm install -g react-native-cli
● react-native init MyProject
● cd MyProject
● react-native run-ios
● react-native run-android
Installing a package
● yarn add <package-name>
● react-native link <package-name>
Expo
https://expo.io/
● Wrapper on commonly used react-native libraries
● iOS and Android App
● OTA
● Avoid for production apps (for now atleast)
Ignite CLI
● CLI
● Boilerplates, Plugins
ignite new MyApp
https://github.com/waqqas/ignite-aag-boilerplate
(MIT License)
Frequently Asked Questions
FAQ: Do I need to learn XCode/Android Studio
Answer: Yes
You need to know how to link native libraries. Fortunately, it is simple and
normally you just have to do as documented and you would be fine
FAQ: Do I have to write native code
Answer: No (Normally)
You would be writing code is Javascript. If there is some native functionality
that is not available, you have to write bridging code. React-Native provide
primitives to do so
FAQ: Do I have to rewrite my native app in RN
Answer: Yes
You can reuse parts of the native code by exposing it to react-native bridge.
Writing RN bridge requires knowledge of RN internals, as well as native
(both iOS and Android) code
FAQ: What backend should I use with RN
Answer: Any backend
You can user REST APIs or Firebase
Demo app have both REST APIs and Firebase
FAQ: Can you use my favorite JS library in RN
Answer: Yes (Probably)
You can use moment, lodash, axios and other pure Javascript libraries (that
don’t have a browser-specific component)
FAQ: How does React-Native help my startup
Answer: Best for early startup
● Make MVP quickly
● Over The Air (OTA) update help you modify the app without going
through the app-store process
FAQ: React-Native VS Ionic VS NativeScript
Answer: React-Native is performance focus. Uses Native UI
● https://stackshare.io/stackups/ionic-vs-nativescript-vs-react-native
Demos
Thank you
https://www.linkedin.com/in/waqqasjabbar/
https://twitter.com/waqqasjabbar
https://www.facebook.com/waqqas.jabbar
https://medium.com/@waqqas/
https://www.upwork.com/fl/waqqasj
waqqas.jabbar@gmail.com
React-Native Workshop (Coming Soon)
Show you interest:
https://goo.gl/forms/WrmnQVm9Uz8Ldsfg1

More Related Content

PPTX
Introduction to React Native
PDF
A tour of React Native
PDF
Introduction to react native
PDF
React native
PDF
Intro To React Native
PPTX
React Native.pptx (2)
PPTX
Nativescript with angular 2
PDF
Introduction to React Native
Introduction to React Native
A tour of React Native
Introduction to react native
React native
Intro To React Native
React Native.pptx (2)
Nativescript with angular 2
Introduction to React Native

What's hot (20)

PPTX
Creating books app with react native
PDF
React-Native for multi-platform mobile applications @ Codemotion Rome 2017
PPTX
React Native for ReactJS Devs
PDF
React Native "A Bad Idea Or A Game Changer" at Code Mania 101
PPTX
Hands on react native
PDF
Going Native With React
PDF
Getting Started with React Native (and should I use it at all?)
PDF
React Native +Redux + ES6 (Updated)
PDF
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
PDF
How to React Native
PDF
React Native Workshop - React Alicante
PPTX
React Native
PDF
React Native in a nutshell
PDF
Optimizing React Native views for pre-animation
PDF
React Native
PPT
PDF
Putting the Native in React Native - React Native Boston
PDF
Experiences building apps with React Native @DomCode 2016
PDF
The Gist of React Native
PDF
What's This React Native Thing I Keep Hearing About?
Creating books app with react native
React-Native for multi-platform mobile applications @ Codemotion Rome 2017
React Native for ReactJS Devs
React Native "A Bad Idea Or A Game Changer" at Code Mania 101
Hands on react native
Going Native With React
Getting Started with React Native (and should I use it at all?)
React Native +Redux + ES6 (Updated)
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
How to React Native
React Native Workshop - React Alicante
React Native
React Native in a nutshell
Optimizing React Native views for pre-animation
React Native
Putting the Native in React Native - React Native Boston
Experiences building apps with React Native @DomCode 2016
The Gist of React Native
What's This React Native Thing I Keep Hearing About?
Ad

Similar to Introduction to React Native (20)

PPTX
Introduction to react native @ TIC NUST
PPTX
React native
PPTX
Getting Started With React Native Presntation
PPTX
Session 01_02-Introduction to React Native .pptx
PDF
Introduzione a React Native - Facebook Developer Circle Rome
PPTX
React Native Building Mobile Apps with React.pptx
PDF
An Introduction to ReactNative
PDF
Code Once; Run Everywhere - A Beginner’s Journey with React Native
PDF
Webinar - Matteo Manchi: Dal web al nativo: Introduzione a React Native
PDF
React Native
PPTX
React Native
PDF
React Native for multi-platform mobile applications
PDF
Build a real app with react native
PPTX
React native introduction (Mobile Warsaw)
PPTX
20180518 QNAP Seminar - Introduction to React Native
PDF
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
PDF
React Native App Development: A Comprehensive Guide
PDF
Introduction to React Native
PDF
Introduction to React Native
PPTX
ReactNative.pptx
Introduction to react native @ TIC NUST
React native
Getting Started With React Native Presntation
Session 01_02-Introduction to React Native .pptx
Introduzione a React Native - Facebook Developer Circle Rome
React Native Building Mobile Apps with React.pptx
An Introduction to ReactNative
Code Once; Run Everywhere - A Beginner’s Journey with React Native
Webinar - Matteo Manchi: Dal web al nativo: Introduzione a React Native
React Native
React Native
React Native for multi-platform mobile applications
Build a real app with react native
React native introduction (Mobile Warsaw)
20180518 QNAP Seminar - Introduction to React Native
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native App Development: A Comprehensive Guide
Introduction to React Native
Introduction to React Native
ReactNative.pptx
Ad

More from Waqqas Jabbar (12)

PPTX
Jump into React-Native (Class 6)
PPTX
Jump into React-Native (Class 5)
PPTX
Jump into React-Native (Class 4)
PPTX
Jump into React Native (Class 3)
PPTX
Jump into React-Native (Class 2/6)
PPTX
Jump into React-Native (Class 1)
PDF
Redux Saga - Under the hood
PPTX
Crud application using react native, redux and redux sagas
ODP
Introduction To SVN
ODP
Makefile Generation From Autotools
ODP
Introduction To Makefile
ODP
Introduction To SVN
Jump into React-Native (Class 6)
Jump into React-Native (Class 5)
Jump into React-Native (Class 4)
Jump into React Native (Class 3)
Jump into React-Native (Class 2/6)
Jump into React-Native (Class 1)
Redux Saga - Under the hood
Crud application using react native, redux and redux sagas
Introduction To SVN
Makefile Generation From Autotools
Introduction To Makefile
Introduction To SVN

Recently uploaded (20)

PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Machine learning based COVID-19 study performance prediction
PPTX
MYSQL Presentation for SQL database connectivity
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Modernizing your data center with Dell and AMD
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
Review of recent advances in non-invasive hemoglobin estimation
Diabetes mellitus diagnosis method based random forest with bat algorithm
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Machine learning based COVID-19 study performance prediction
MYSQL Presentation for SQL database connectivity
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Unlocking AI with Model Context Protocol (MCP)
Dropbox Q2 2025 Financial Results & Investor Presentation
Modernizing your data center with Dell and AMD
“AI and Expert System Decision Support & Business Intelligence Systems”
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Spectral efficient network and resource selection model in 5G networks
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
NewMind AI Weekly Chronicles - August'25 Week I
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Per capita expenditure prediction using model stacking based on satellite ima...
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Review of recent advances in non-invasive hemoglobin estimation

Introduction to React Native

Editor's Notes

  • #2: Thank you to NIC
  • #3: Link to people
  • #6: https://blog.codecentric.de/en/2017/11/developing-modern-offline-apps-reactjs-redux-electron-part-2-reactjs-basics/
  • #7: https://reactjs.org/docs/hello-world.html
  • #11: https://facebook.github.io/react-native/showcase.html
  • #13: https://facebook.github.io/react-native/docs/getting-started.html
  • #19: https://facebook.github.io/jsx/ https://reactjs.org/docs/introducing-jsx.html https://reactjs.org/docs/jsx-in-depth.html
  • #24: https://infinite.red/ignite