Introductory Session on React-Native at Technology Incubation Center at NUST on 13th July 2018

1. Introduction to React-Native
Waqqas Jabbar
13th July 2018

2. My Introduction
2000
NUST
2008
Right Hand Soft
Pvt. Ltd.
2012
Vadion (formally
Softrove)
2010
2016
20172004
2018
C C++ C# Web Mobile (RN)

3. 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/

4. Agenda
● Concepts
● FAQs
● Demos
○ Expo Demo

5. Clarify the ecosystem
● React.js
● React-Native
● Redux
● Flow
● JSX
● Babel
● Node

6. React.js: Basics
● Declarative Components
● Virtual DOM (Speed)
● One-way data binding ( VS
angular)
A JavaScript library for building user
interfaces

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

8. 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+

9. 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

10. React-Native: Architecture
● JS code running in Virtual
Machine (VM)

11. Who is using React-Native
Showcase

12. Prerequisites to React-Native Development
● JavaScript (Preferably ES6)
● Basic XCode/Android Studio usage
● Basic understanding on npm

13. Development Environment
● Any JavaScript Editor ( WebStorm, Atom)
● XCode
● Android Studio
● React-Native CLI
● Genymotion
● nvm ( Node version manager)
● node/npm

14. Development Experience
● Close to web
● Code changes instantaneously updated on mobile
● Use chrome for debugging

15. 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

16. UI Libraries
● React-native-elements (https://react-native-training.github.io/react-native-
elements/)
● Nativebase (https://nativebase.io/)
● Use native components

17. 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

18. Debugging
● Google Chrome
● Performance Monitor
● Inspector
● Reactotron (https://infinite.red/reactotron)

19. JSX
● XML like syntax
● Convert JSX to JS

20. Styling
● Flexbox
● Styled-components for CSS
○ (https://www.styled-components.com/)

21. Platform Specific Code
● filename.android.js
filename.ios.js
● Platform.OS === ‘android’
Platform.OS === ‘ios’
● <Component>Android
● <Component>IOS

22. 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>

23. Expo
https://expo.io/
● Wrapper on commonly used react-native libraries
● iOS and Android App
● OTA
● Avoid for production apps (for now atleast)

24. Ignite CLI
● CLI
● Boilerplates, Plugins
ignite new MyApp
https://github.com/waqqas/ignite-aag-boilerplate
(MIT License)

25. Frequently Asked Questions

26. 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

27. 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

28. 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

29. 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

30. 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)

31. 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

32. 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

33. Demos

34. 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