Professional Documents
Culture Documents
Lecture 2A
Lecture 2A
James Landay
Santiago Gutierrez
Abdallah AbuHashem
https://cs47si.stanford.edu
Email or Slack us
the screenshot
https://cs47si.stanford.edu
ES6 + JSX
ECMAScript 6 Extension
Vanilla React Native uses
Babel as a preprocessor
ES6 + JSX
ECMAScript 6 Extension
ES6 (ECMAScript 6)
Cleaner (fat arrow) functions.
var _this = this;
return x + 1 return x + 1;
} };
ES6 + JSX
ECMAScript 6 Extension
let textLayer = CATextLayer()
...
self.view.layer.addSublayer(textLayer)
const ourNestedView = (
<View
foo='bar'>
<Text>42</Text>
</View>
)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Importance: renderable!
Components
Different classes that inherit from the React Component class
Importance: renderable!
Common Components:
- View
- Text
- Image
- Lists
- Scrollviews
- Touchables
Components
Different classes that inherit from the React Component class
Importance: renderable!
Common Components:
- View
- Text
- Image
- Lists
- Scrollviews
- Touchables
View
Most common visual styles
backgroundColor: “black”
Text
Text allows nesting
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
Text
Has an onPress and onLongPress handlers
<Image source={require('/react-native/img/favicon.png')}/>
Image
You can specify the resize mode of the image
Importance: renderable!
Common Components:
- View
- Text
- Image
- Lists
- Scrollviews
- Touchables
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts
Container: {
position: ‘absolute’,
start: 0,
top: 0,
width: 50,
height: 50
.
.
.
}
Coordinates
Coordinates
Relative, percentages
Container: {
start: ‘10%’,
top: ‘10%’,
width: ‘5%’,
height: ‘5%’
.
.
.
}
Relative, percentages
Relative, percentages
Relative, percentages
Appropriate margins?
Screen ratio change?
Safe area around?
Flexboxes
Container: {
justifyContent: ‘space-around’,
alignItems: ‘center’,
.
.
.
}
Flexboxes
Flexboxes
Flexboxes
http://www.reactnativeexpress.com/flexbox
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts
James Landay
Santiago Gutierrez
Abdallah AbuHashem
https://cs47si.stanford.edu