by Nader Dabit, Developer Advocate, AWS We want to complement our awesome web site with an equally awesome mobile application for both iOS and Android that can be deployed from the mobile app stores. In this session, Nader Dabit will take you from Hello World to building a beautiful responsive mobile application using React Native.

1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Introduction to React Native
Nader Dabit
Developer Advocate, AWS Mobile
Pop-up Loft

2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Prerequisites
• JavaScript, preferably ES6 / ES2015
• Knowledge of how to use the command line
• Basic understanding of npm & how it works

3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Environment
• Node – version >= 4
• Watchman (if using React Native CLI)
• Xcode (to run iOS simulator)
• Genymotion or Android Studio (to run on Android Emulator)

4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What is React Native?
• Built using React
• Build cross platform applications using JavaScript
• Target not only iOS & Android, but also Apple TV, VR, AR, Windows, &
Desktop
• Released March 2015
• Rapidly gaining in popularity & adoption
• Learn once write anywhere
• Real world projects typically see 80% – 95% code reuse

5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Who’s using React Native
• Facebook
• Instagram
• Walmart
• Airbnb
• Skype
• Baidu
• Tesla
• Adidas
• Discord
• Wix
• Bloomberg
• JD.com

6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Why React Native
• Faster speed of development
• Lower cost of development
• Code reuse
• Easier to find developers
• Ship across multiple platforms
• Possible to ship over the air updates bypassing App Store / Play Store

7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
How does React Native Work?
• JavaScript is bundled & minified using Babel (built in)
• Separate threads for UI, layout, and JavaScript
• Threads communicate asynchronously through the native bridge

8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
How does React Native Work?

9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native API
View
Text
ScrollView
Image
TextInput
Switch
Over 30 UI Primitives

10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native API
View == div
Text == span / p / h*
ScrollView == div + styling
Image == img
TextInput == input
Mapping to Web UI primitives

11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native API
import {
View
Text
ScrollView
Image
TextInput
Switch
} from ‘react-native’
Primitives not globally in scope, must be imported

12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native API
CameraRoll
Keyboard
NetInfo
Vibration
PanResponder
Device APIs

13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native vs Web
• Different primitives
• Styling
• Most browser APIs do not exist
• Some browser APIs polyfilled (geolocation, fetch, timers,
console)
• Navigation
• Mobile UI / UX
• Native IDEs / configuration
• Deployment

14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native vs Web
• Unlike web, not every component has every interaction
• Handful of “touchable” components
• Button, TouchableHighlight, TouchableOpacity,
TouchableWithoutFeedback
• Create custom touchable components with PanResponder API
Event handling

15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native vs Web
• Based on CSS styles
• Layout is done with FlexBox
• Style prop can be one or an array of styles
• Use StyleSheet API for perf optimization
• Makes it possible to refer to styles by ID instead of creating a new style
object every time.
• Allows to send the style only once through the bridge. All subsequent uses
are going to refer an id (not implemented yet).
Styling

16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native vs Web
JS Objects or inline styles
Styling
const styles = {
container: {
margin: 20,
backgroundColor: ‘red’
}
}
<View
style={styles.container}
/>

17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native vs Web
Styling - StyleSheet
import { StyleSheet } from ‘react-native’
const styles = StyleSheet.create({
container: {
margin: 20,
backgroundColor: ‘red’
}
})
<View style={styles.container} />

18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Creating a new React Native Project
2 Main Options
React Native CLI
Create React Native App CLI

19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Creating a new React Native Project
Create React Native App CLI
• Builds without native projects & code
• Native code not configurable
• Will run without all SDKs & IDEs installed
• Great for newer developers
• Includes features like Camera, Location, Push Notifications, Social
Authentication, Accelerometer, File System, & Image Picker
configured out of the box

20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Creating a new React Native Project
React Native CLI
• Builds with native projects & code
• Native code configurable
• Needs proper environment setup in order to run
• Does not include some important APIs without additional
configuration

21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Creating a new React Native Project
Creating a new project
react-native init MyProjectName
or
create-react-native-app MyProjectName
cd MyProjectName
react-native run-ios / run-android

22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Main Ideas Behind React
Components, Rendering & Lifecycles

23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
1. Stateless (function)
2. Stateful (class)
• Return a node
• Represent a piece of UI
• Can be created in one of two ways:

24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
Stateless Components
• Don’t need state or lifecycle methods
• Any update in the props will trigger a rerender

25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
Stateless Components
const MyComponent = () => (
<Text>Hello World</Text>
)
<MyComponent />

26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
Class / Stateful Components
class MyComponent extends React.Component {
render() {
return (
<Text>Hello World</Text>
)
}
}

27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
3 types of component lifecycles
Creation / Mounting
Updating
Unmounting

28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
Creation / Mounting
constructor
static getDerivedStateFromProps(nextProps, prevState)
render
componentDidMount

29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
Updating
static getDerivedStateFromProps(nextProps, prevState)
shouldComponentUpdate(nextProps, nextState)
render
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate

30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
Unmounting
componentWillUnmount

31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Components
Lifecycle
class MyComponent extends React.Component {
constructor() { // 1
super()
this.name = 'My Cool Component’
}
static getDerivedStateFromProps(nextProps, prevState) {} // 2
componentDidMount() {} // 4
render() { // 3
return (
<Text>Hello World</Text>
)
}
}

32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Data
State
class MyComponent extends React.Component {
state = { name: 'Nader’ }
changeName = () => {
this.setState({ name: 'Dennis' })
}
render() {
return (
<Text>Hello {this.state.name}</Text>
)
}
}

33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Data
Props
class MyComponent extends React.Component {
render() {
return (
<Text>Hello {this.props.name}</Text>
)
}
}
<MyComponent name=‘Nader’ />

34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Thank you
Introduction to React Native
aws.amazon.com/mobile
@AWSforMobile