This document introduces React Native, a framework for building mobile apps using React. It allows building Android and iOS apps with shared code. React Native uses a virtual DOM for fast rendering. Components manage state and receive data through props. Lifecycle methods handle mounting, updating, and unmounting. Setting up requires Node.js, React Native CLI, and Android Studio or Xcode. Hot reloading, Flexbox layouts, and libraries like Lottie and React Navigation make development easier.

1. Introduction to React Native
Dani Akash S

2. What is a React Native App?

3. Advantages
● Android and iOS apps with Single
Codebase
● Native Performance
● Increased Developer Productivity
● Use Native Code when needed
● Can be integrated into existing
Native App

4. The Reactive World

5. There is too much to display
● Text
● Images
● Forms
● Ads
● Animation
● Static Content
● Dynamic Content
● Responsive Designing
There are too many events to Handle
● Clicks
● Form Submissions
● Real Time Updates
● Ajax Calls
● Analytics
● Navigation
Modern Single Page Applications are complex

11. Managing the State of all the
components is difficult.

12. Changes to the DOM
Every Event Triggers a change.
● Changes to Visual Styles is
called repaint
● Changes to layout of DOM
elements is called reflow
● Repaint and Reflow are
blocking events

13. Repaints and Reflows are
Expensive

14. React
A library for building User Interfaces.

15. React organizes the UI into separate components and renders them.
● State and Props are used to pass data to the React’s view layer.
● React does not make any assumptions based on the rest of the technology stack.
● It simply re-renders the UI whenever state or props changes.
● Before rendering the HTML it compares the changes using Virtual DOM.
● It then renders the part of HTML that is different from the computed Virtual DOM.
● React has several lifecycle methods that are called at different phases of the
component.
How React Works

16. UnMounting
● componentWillUnmount()
Updating
● componentWillReceiveProps()
● shouldComponentUpdate()
● componentWillUpdate()
● render()
● componentDidUpdate()
Lifecycle Methods
Mounting
● constructor()
● componentWillMount()
● render()
● componentDidMount()

17. Advantages
● Rendering is fast due to Virtual DOM.
● Since each part of the application is
organized into components, the code
becomes more maintainable and
scalable.
● Lifecycle methods make it easy to
update View layer based on Events.
● Managing component states for large
applications can be made simple
using a state management library.

18. Getting Started with React Native

19. Development Environment
1. Node.js
2. React Native Cli
3. Android Studio
4. XCode (only on Mac)
5. JS Friendly Text Editor of your choice
https://facebook.github.io/react-native/doc
s/getting-started.html

20. Let’s code!

21. Developer Friendly Tools
Exclusive on React Native!!
● Hot Reloading
● Layouts using Flexbox
● Wireless Debugging
● UI frameworks
● Blueprints to kick start your
project
● Community powered libraries

22. Checkout the following libraries!

23. Easily add High Quality animations directly from After Effects
Lottie
By Airbnb - https://airbnb.design/lottie/

24. Display Maps in your React Native app
React Native Maps
By Airbnb - https://github.com/airbnb/react-native-maps

25. Essential UI Components for building an App
Native Base
By GeekyAnts - https://nativebase.io/

26. Easy to use Navigators
React Navigation
By React Community - https://reactnavigation.org/

27. Build React Native app on any OS.
No Android Studio or XCode needed!
Create React Native App
By React Community - https://github.com/react-community/create-react-native-app

28. And much more to make
development simpler…
Feel Free to Explore!

29. Thank You!
Connect with me on:
● @DaniAkashS
● linkedin.com/in/daniakash