This presentation will help you to understand the basic concept of React Native.

1. Next generation of React.
A JavaScript code library developed by Facebook and Instagram
React Native
Learn Once, Write Anywhere
Jacob Nelson
Solution Architect

2. Advantages
Open source and free to use
Single code base for both iOS and Android platforms
Provide Native Experience.
Hot/Live Reloading
Over The Air (OTA) updates
2Jacob Nelson - https://jnelson.in/

3. Available for
• Android 4.1+
• iOS 8+
3Jacob Nelson - https://jnelson.in/

4. Core Concepts
• Components
• Functional / Stateless Component
• Class Stateful Component
• JSX
• Unidirectional Data Flow
• Virtual DOM
4Jacob Nelson - https://jnelson.in/

5. How it Works?
RN Component
<Text>
RCT Bridge
Objective-C API
JAVA API
UILabel
<TextView>
Native Views
5Jacob Nelson - https://jnelson.in/

6. (Component) Lifecycle
6
Initialization Mounting Updating Unmounting
Setup props and state
constructor
render
componentDidMount
getDerivedStateFromProps
shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate
ComponentWillUnmount
true false
x
getDerivedStateFromProps
render
Error Handling
componentDidCatch
Jacob Nelson - https://jnelson.in/

7. Starting A Project

8. Option 1: create-react-native-app (CRNA)
$ npm install –g create-react-native-app
$ create-react-native-app MyProject
8Jacob Nelson - https://jnelson.in/

9. Option 2: react-native init
$ npm install –g react-native-cli
$ react-native init MyProject
9Jacob Nelson - https://jnelson.in/

10. Running app on devices
Android
• Enable Debugging over USB
• Plug in your device via USB
• check that your device is properly
connecting to ADB
• Run your app
iOS
• Plug in your device via USB
• Configure code signing
• Register for an Apple developer
account (if you don't have one yet).
• Select your project in the Xcode
Project Navigator.
• select your main target (it should share
the same name as your project).
• Look for the "General" tab.
• Go to "Signing" and make sure your
Apple developer account or team is
selected under the Team dropdown.
• Build and Run your app
10
$ adb devices
$ react-native run-android
Jacob Nelson - https://jnelson.in/

11. Building A Project

12. Android: Generating Signed APK
Refer signed apk android for complete steps on how to generate a
signed APK.
12Jacob Nelson - https://jnelson.in/

13. iOS: Building your app for production
Refer Building your app for production section in this page for
complete steps on how to Build your iOS application for
production .
13Jacob Nelson - https://jnelson.in/

14. Metro
The JavaScript bundler for React Native

15. A React Native app is a compiled app that is running some
Javascript. Whenever you build and run your React Native
project, a packager starts up called Metro. You’ve probably seen
this output in your terminal before, letting you know the packager
is running.
15Jacob Nelson - https://jnelson.in/

16. What does packager do?
1. Combines all your Javascript code into a single file, and
translates any Javascript code that your device won’t
understand (like JSX or some of the newer JS syntax).
2. Converts assets (e.g. PNG files) into objects that can be
displayed by an Image component.
16Jacob Nelson - https://jnelson.in/

17. References

18. Live / Hot Reload
Live Reload
• Reloads the entire page
• State is lost
Hot Reload
• Updates the changed code
• State is not lost
18Jacob Nelson - https://jnelson.in/

19. State
Application State
The state or data in our
application that is core to
the functionality of the
application as a whole.
This usually includes a
list of the models and
data being manipulated
by the interface.
Local Component State
This is state that is used to
allow a component to function.
Local component state is
typically not used by other
components in the application,
and is less important to persist
if the application resets.
19Jacob Nelson - https://jnelson.in/

20. JSX
A markup syntax that very closely resembles HTML. It is more or
less like the combination of Javascript + XML. JSX makes writing
React components, the building blocks of React UI, easier by
making the syntax developers use for generating these strings of
HTML almost identical to the HTML they will inject into the web
page.
20Jacob Nelson - https://jnelson.in/

21. Unidirectional Data Flow
All data in an application flow in a single direction. In React it
flows down the tree from parent to child. This makes tracking the
source and destination easy compared to other architectures
where data may be coming from many parts of the application.
21Jacob Nelson - https://jnelson.in/

22. Virtual DOM
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”,
representation of a UI is kept in memory and synced with the “real” DOM by a
library such as ReactDOM. This process is called reconciliation.
I.e.; Whenever something is needed to be re-rendered, a virtual
representation of the updated DOM is generated. The Virtual DOM consists
of light representations of elements modeled after the component tree,
making the process of generating them much more efficient than generating
real DOM elements. Before applying the changes to the real DOM, checks
are done to determine where exactly in the component tree the changes
happened, a diff is created, and only those specific changes are applied.
22Jacob Nelson - https://jnelson.in/

23. Why React Native?
23Jacob Nelson - https://jnelson.in/
1 Reliability
React Native is developed
and owned by Facebook.
4 Performance
React Native provides the nearly
identical performance to native. Mobile
apps created using React Native
perform as well as any native app.
3 Code Sharing
1. 95% of the (Front-end) codebase is
shared between iOS and Android.
2. Business logic can be shared with
Web applications as well.
2 Open Source
React Native is an open
source framework.
5 Automation
Same automation suite can
run on both iOS and Android.
6 UX
You can have platform-specific
UI design.
7 CI / CD
Visual Studio App Center have built
in support to Automatically Build
and Distribute Your React Native App
8 Hot Reloading
Hot reloading helps to keep the app
running and to inject new versions of
the files that you edited at runtime,
without losing state which is especially
useful if you are tweaking the UI.
9 Over-the-Air (OTA)
An OTA update does pretty much
what it says. You send an update
out, the user downloads it, and
the app updates — much like the
web. Typically this happens
behind the scenes.

24. 24
React Native is a great option for creating
performant iOS and Android apps that
feel at home on their respective platforms,
all while building on any previous web
development experience.
Jacob Nelson - https://jnelson.in/

25. Happy Coding