React native
Download as PPTX, PDF0 likes629 views
React Native is an open source framework for building mobile apps using React and JavaScript. It uses native components and allows building real mobile apps for Android and iOS. It works by using a virtual DOM layer that maps React components to native mobile components using Objective-C and Java APIs. Developers can get started using Expo or React Native CLI. Expo is easier for beginners while CLI allows more customization and third party libraries. Core concepts include components, JSX, state, props, and unidirectional data flow. React Native also includes tools like live reloading and hot reloading for faster development.
Ad
More Related Content
What's hot (20)
Similar to React native (20)
Ad
Recently uploaded (20)
Ad
React native
- 1. A Hybrid App Development Framework
- 3. Introduction ❏ Open source cross-platform framework. ❏ Developed by Facebook and first public preview was released in March 2015. ❏ Build mobile apps using React and JavaScript. ❏ Currently supports Android and iOS platform. ❏ Creates “Real App”.
- 4. How does it work? In React Native, virtual DOM acts as a layer between the developer’s description of how things look and work done to render the application. React Native invokes Objective-C APIs and Java APIs to render native components.
- 5. <Text> Objective-C API Java API UILabel <TextView> Converts Converts RN Component Native Views RCT Bridge
- 6. How to get started? We can start building our Application either by Expo or React Native CLI. ❏ Expo is the easiest way to get started with react native as it doesn’t require setting up Android Studio and Xcode. ❏ React Native CLI needs both SDKs to be installed for running react native applications.
- 7. To create and run react native app using CRNA use below commands npm install -g create-react- native-app create-react-native-app ExampleApp npm run android or npm run ios Expo ❏ Build a project using Expo (CRNA) ❏ Install Expo app on phone and connect it to the same network as our computer. ❏ Has tons of inbuilt libraries. ❏ Doesn’t allow third party libraries that requires native code linking. ❏ We can eject our Expo project to RN- CLI project if required.
- 8. React Native CLI ❏ Creates app template with native iOS and Android projects that can be modified. ❏ Allow us to add third party libraries with native code linking. ❏ Allow us to modify native code. To create and run react native app using CLI use below commands - npm install -g react-native-cli react-native init ExampleApp react-native run-android/run-ios
- 9. Core Concepts ❏ Components ❏ Functional/Stateless Component ❏ Class/Stateful Component ❏ JSX ❏ Unidirectional Data Flow ❏ Virtual DOM
- 11. STATE
- 12. Core features ❏ React Native is like React, but it uses native components instead of web components as building blocks. ❏ React Native handles layout with Yoga, a cross-platform C library that handles layout calculations via the flexbox API. ❏ React native supports State/Props to control component. Props are set by parent and State is the data that is going to change. ❏ React Native Animated library, provides jank-free animations and even interaction-driven animations such as scrolling parallax.
- 14. Lifecycle
- 15. Inbuilt Tools React Native has its own inbuilt tooling such as - 1. Reload 2. Debug JS Remotely 3. Show Perf Monitor 1. Enable Live Reload 2. Enable Hot Reloading
- 16. Live Reloading Hot Reloading 1... 2... 3... 4... 5... 6... 6... 7.. 8... 9... Reloads the whole application Reloads the screen with updated changes
- 17. Why Use it? ● Cross Platform Usage ● Open Source - Possible to leverage the extremely vast array of javascript projects such as redux, reselect, jest, etc. ● Increase in Developer Velocity ● Backed by Native Platforms ( iOS and Android ) ● Based on React ● Iteration Speed - Hot reloading enables to test changes on Android and iOS in just a second or two.
- 19. Limitations ❏ React Native Immaturity - React Native is less mature than Android or iOS. Some trivial things in Native can be complex to implement in react native. ❏ Gestures - The touch subsystem for Android and iOS are different enough that coming up with a unified API has been challenging for the entire React Native community. ❏ Javascript Untyped nature - Lack of type safety is both difficult to scale and can became a point of contention for mobile engineers used to typed languages. ❏ Refactoring - A side-effect of JavaScript being untyped is that refactoring was extremely difficult and error-prone.
- 20. React Native - who’s using it? Note: Please find a complete list of apps built using react native on facebook showcase.
- 21. Questions?
- 22. Thank you
- 23. Sources & Helpful links ➢ React Native Documentation ➢ Expo Documentation ➢ Navigation ➢ Redux ➢ Vector icons ➢ React Native at Airbnb: The Technology ➢ Supporting React Native at Pinterest