The session is geared toward CTOs who want to evaluate React-Native for their existing and future apps. It will also be helpful for web/mobile developers who want to jump into React-Native.

1. Introduction to React-Native
Waqqas Jabbar
16th May 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. Agenda
● Concepts
● FAQs
● Demos
○ Production app
○ Make Hello World App
○ ...

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

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

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

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

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

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

10. Who is using React-Native
Showcase

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

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

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

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

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

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

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

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

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

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

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

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

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

24. Frequently Asked Questions

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

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

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

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

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

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

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

32. Demos

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