React native
Download as PPTX, PDF0 likes113 views
Next generation of React is a JavaScript code library developed by Facebook and Instagram called React Native. It allows developers to write once and deploy their code to both Android and iOS platforms, providing native experiences on each. Some key advantages include being open source and free to use, providing a single code base for both platforms, and enabling hot reloading and over-the-air app updates.
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/
- 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/
- 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