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