CS47SI: Cross-Platform Mobile Development

Lecture 2B: Creating and Controlling Components

James Landay
Santiago Gutierrez
Abdallah AbuHashem
https://cs47si.stanford.edu

cs47si.slack.com Winter 2018

Notes
- This is where I thought the lecture moved a little quickly. A screen recording
would have been great. I found this one of the most important lectures, and
the live demo was great.
- I think more attention should be given to making sure everyone understands
setting state. Maybe simpler examples? Changing the color of a component
with state or something?
- Add points about life-cycle functions
OH Today (3PM-5PM @
Lathrop)
https://cs47si.stanford.edu
Overview for today
● Live demo
○ Putting basic components to use.
○ Styling layouts using Flexbox.
● State and Props
● Creating a component
● Introducing fetch API (networking)
Overview for today
● Live demo
○ Putting basic components to use.
○ Styling layouts using Flexbox.
● State and Props
● Creating a component
● Introducing fetch API (networking)
Live Demo
Jedi ID Card
 Live Demo
Jedi ID Card

1) Run npm install

2) Open with Expo
 Live Demo
Jedi ID Card

Create an application that shows the following

details about a Jedi:

● Name
● Gender
● Height
● Weight
● Hair Color
● Eye Color
● Picture?

...
How do I make my app respond to changes?
(e.g. a button click, network request fetch, etc)
Component API
State and Props
 Component API
State and Props

Props
The properties passed to the constructor of a component are called props.
<Image
source={{uri: "https://facebook.github.io/react-native/docs/assets/favicon.png"}}
/>

Component API
Props
<Image
source={{uri: "https://facebook.github.io/react-native/docs/assets/favicon.png"}}
/>

<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>

Component API
Props
render() {

return (

<Image
source={{uri: "
https://facebook.github.io/react-native/docs/assets/favicon.png"}}
/>

<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>

);

Parents can pass props down to children. Not the other way around.

Component API
Props
constructor(props) {
super(props);

//nothing has been rendered yet

//-- you can change what is rendered based on these parameters
console.log(`constructor ${JSON.stringify(props)}`);
}

Component API
Props
 Component API
State and Props

Props
The properties passed to the constructor of a component are called props.

State
An object with details about how a Component should render.
 Component API
State and Props

Props
The properties passed to the constructor of a component are called props.

State
An object with details about how a Component should render.

This literally is an object named state

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {

render() {
return (
<View style={styles.container}>
<Text>Hello World!</Text>
</View>
);
}
}
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {

state = {
headline: 'Welcome to my app!'
}

render() {
return (
<View style={styles.container}>
<Text>Hello World!</Text>
</View>
);
}
}
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {

state = {
headline: 'Welcome to my app!'
}

render() {
return (
<View style={styles.container}>
<Text>{this.state.headline}</Text>
</View>
);
}
}
Live Demo
Jedi ID Card
OH Today (3PM-5PM @
Lathrop)
CS47SI: Cross-Platform Mobile Development
Lecture 2B: Creating and Controlling Components

James Landay
Santiago Gutierrez
Abdallah AbuHashem
https://cs47si.stanford.edu

cs47si.slack.com Winter 2018