Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
React Native Mike Grabowski @grabbou
Slide 2
Slide 2 text
is a framework for building cross-platform apps React Native
Slide 3
Slide 3 text
React
Slide 4
Slide 4 text
Learn once Write everywhere
Slide 5
Slide 5 text
Better DX
Slide 6
Slide 6 text
Fully native
Slide 7
Slide 7 text
Extensible
Slide 8
Slide 8 text
Let’s get started!
Slide 9
Slide 9 text
brew install node brew install watchman brew install flow npm install -g react-native-cli Get ready
Slide 10
Slide 10 text
react-native init DemoApp New project
Slide 11
Slide 11 text
react-native run-ios react-native run-android Run it
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
How it works what makes it a native app
Slide 14
Slide 14 text
Arch Source: https://www.smashingmagazine.com/2016/08/test-automation-frameworks-for-react-native-apps/
Slide 15
Slide 15 text
App code
Slide 16
Slide 16 text
Environment ES2015 console.log CommonJS require XMLHttpRequest, fetch setTimeout navigator.geolocation
Slide 17
Slide 17 text
Styling CSS Flexbox to the rescue
Slide 18
Slide 18 text
Autolayout
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Portable Moving code around platforms
Slide 21
Slide 21 text
Platform .OS .select({ ios, android })
Slide 22
Slide 22 text
Extensions .ios.js .android.js
Slide 23
Slide 23 text
Interactions quick look at the available components
Slide 24
Slide 24 text
A simple container
Slide 25
Slide 25 text
Renders text in the app
Slide 26
Slide 26 text
Getting info from the users
Slide 27
Slide 27 text
Let’s click all the things
Slide 28
Slide 28 text
And many more… Over 30 components and APIs
Slide 29
Slide 29 text
DX Up to speed with *tools*
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Give it a try!
Slide 32
Slide 32 text
Thank you