Introduction to react native @ TIC NUST

Introduction to React-Native
Waqqas Jabbar
13th July 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)

PK10K - Training 10,000 Mobile App Developers
● Meetup
https://www.meetup.com/PK10-
React-Native-Mobile-App-
Development-Workship/
● Facebook Group
https://www.facebook.com/groups/1
0k.dev.pk/

Agenda
● Concepts
● FAQs
● Demos
○ Expo Demo

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)

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

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

Introduction to react native @ TIC NUST

More Related Content

What's hot (20)

Similar to Introduction to react native @ TIC NUST (20)

More from Waqqas Jabbar (11)

Recently uploaded (20)

Introduction to react native @ TIC NUST

Editor's Notes