Oliver Shaw github.com/Olliepop oshaw.co/react-native/slides.pdf - - PowerPoint PPT Presentation

▶

Aug 09, 2023 600 likes •780 views

Oliver Shaw github.com/Olliepop oshaw.co/react-native/slides.pdf Learn once, write anywhere No HTML or CSS 100% JavaScript Whats behind a React Native app ES6 JSX Basic React concepts: component lifecycle, state, props

SLIDE 1

Oliver Shaw github.com/Olliepop

shaw.co/react-native/slides.pdf

SLIDE 2

“Learn once, write anywhere”

SLIDE 3

No HTML or CSS

SLIDE 4

100% JavaScript

SLIDE 5

What’s behind a React Native app

ES6
JSX
Basic React concepts: component lifecycle, state, props

SLIDE 6

“React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.”

SLIDE 7

ScrollView Text

“Component that wraps platform ScrollView while providing integration with touch locking "responder" system.”

A scrolling container. A React component for displaying text.

SLIDE 8

Layout & styles

Abstraction of CSS provided called StyleSheet
Implements Flexbox
Most components have a style property
Available styles well documented in RN docs
blador/react-native-animatable provides declarative transitions

SLIDE 9

SLIDE 10

Fonts

SLIDE 11

SLIDE 12

Navigation

JavaScript implementation of the navigation stack
Trending router aksonov/react-native-router-flux

SLIDE 13

Module: react-native-router-flux (RNRF)

BYO reducer -- you aren’t locked into flux
Comes with customisable tab bar & nav bar
Maintains a fork of the latest stable Navigator component

SLIDE 14

Storage & persistence

Native key-value storage component AsyncStorage
Android uses RocksDB or SQLite
AsyncStorage plugs into rt2zz/redux-persist
File system access provided by johanneslumpe/react-native-fs

SLIDE 15

“A library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps”

SLIDE 16