Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
91 views

Lecture # 14 - ReactNative

React Native allows building mobile apps using JavaScript and React. It works by bundling JS, separating UI and logic threads, and communicating between them asynchronously through a bridge. Key differences from web are base components, style using JS objects instead of CSS, and no browser APIs. Core components like View and Text replace div and span. Style is defined with objects and Flexbox is used for layout. Events are handled differently than web. Components can be stateless functions or class components with lifecycles. Expo provides tools to accelerate React Native development.

Uploaded by

Danial Ahmad
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
91 views

Lecture # 14 - ReactNative

React Native allows building mobile apps using JavaScript and React. It works by bundling JS, separating UI and logic threads, and communicating between them asynchronously through a bridge. Key differences from web are base components, style using JS objects instead of CSS, and no browser APIs. Core components like View and Text replace div and span. Style is defined with objects and Flexbox is used for layout. Events are handled differently than web. Components can be stateless functions or class components with lifecycles. Expo provides tools to accelerate React Native development.

Uploaded by

Danial Ahmad
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Lecture 14: Introduction of React Native

By Dr. Sidra Sultana


Previous Lecture
● Classes
● React
● Imperative vs Declarative Programming
● Props
● State
React Native
● A framework that relies on React core
● Allows us build mobile apps using only JavaScript
○ “Learn once, write anywhere”
● Supports iOS and Android
How does React Native work?
● JavaScript is bundled
○ Transpiled and minified
● Separate threads for UI, layout and JavaScript
● Communicate asynchronously through a “bridge”
○ JS thread will request UI elements to be shown
○ JS thread can be blocked and UI will still work
Differences between RN and Web
● Base components
● Style
● No browser APIs
○ CSS animations, Canvas, SVG, etc.
○ Some have been polyfilled (fetch, timers, console, etc.)
● Navigation
React Native Components
● Not globally in scope like React web components
○ Import from ' r e a c t - n a t i v e '
● div → View
● span → Text
○ All text must be wrapped by a <Text / > tag
● button → Button
● ScrollView
https://facebook.github.io/react-native/docs/components-and-apis.html
Style
● React Native uses JS objects for styling
● Object keys are based on CSS properties
● Flexbox layout
○ Default to column layout
● Lengths are in unitless numbers
● s t y l e prop can take an array of styles
● StyleSheet.create()
○ Functionally the same as creating objects for style
○ Additional optimization: only sends IDs over the bridge
Event Handling
● Unlike web, not every component has every interaction
● Only a few “touchable” components
○ Button
○ TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback
○ TouchableNativeFeedback (Android only)
● Web handlers will receive the event as an argument, but
React Native handlers often receive different arguments
○ Consult the docs
Components
● Return a node (something that can be rendered)
● Represent a discrete piece of the UI
● “All React components must act like pure functions with
respect to their props.”
● Two types:
○ Stateless Functional Component (SFC) a.k.a. Pure Functional
Component
○ React.Component
Stateless Functional Component (SFC)
● Simplest component: use when you don’t need state
● A function that takes props and returns a node
○ Should be “pure” (it should not have any side effects like setting values,
updating arrays, etc.)
● Any change in props will cause the function to be
re-invoked
React.Component
● An abstract class that can be extended to behave
however you want
● These have additional features that SFCs don’t
○ Have instances
○ Maintain their own state
○ Have lifecycle methods (similar to hooks or event handlers) that are
automatically invoked
● Rendering now becomes a function of props and class
properties
Component Lifecycle

Mount Update Unmount


Mount
● const ructor(props)
○ Initialize state or other class properties (bound methods, etc.)
● r e nd er ( )
○ The core of a component
○ Return a node
● componentDidMount()
○ Do anything that isn’t needed for UI (async actions, timers, etc.)
○ Setting state here will cause a re-render before updating the UI
Update
● componentWillReceiveProps(nextProps)
○ Update any state fields that rely on props
● shouldComponentUpdate(nextProps, nextState)
○ Compare changed values, return true if the component should rerender
■ If returned false, the update cycle terminates
○ Almost always a premature optimization
● r e nd er ( )
● componentDidUpdate(prevProps, prevState)
○ Do anything that isn’t needed for UI (network requests, etc.)
Unmount
● componentWillUnmount()
○ Clean up
■ Remove event listeners
■ Invalidate network requests
■ Clear timeouts/intervals
Writing React Native
Expo
● “The fastest way to build an app”
● Suite of tools to accelerate the React Native development
process
○ Snack - runs React Native in the browser
○ XDE - a GUI to serve, share, and publish your Expo projects
○ CLI - a command-line interface to serve, share, and publish projects
○ Client - runs your projects on your phone while developing
○ SDK - bundles and exposes cross-platform libraries and APIs
Import/Export
● Components are great for simplifying code
● We can split components into their own files
○ Helps organize project
○ Export the component from the file
● Import the component before using it in a file
● Default vs named import/export
PropTypes
● React can validate the types of component props at
runtime
● Development tool that allows developers to ensure they’re
passing correct props
● Helps document your components’ APIs
● Only runs in development mode
How to Read Docs
● Have a goal in mind
● See what the library/framework/API offers
● Find something that solves your problem
● Configure using the exposed API

You might also like