- Slides
- This project was bootstrapped with Create React App
- Original project video_browser
References
Install Flow:
$ yarn add --dev flow-bin
$ yarn run flow init
Run Flow:
$ yarn flow
Add type to props:
type Props = {
onSearchTermChange: string => void
};
Add type to state:
type State = {
term: string
};
Add DefaultValue to state:
state = {
term: ''
};
Create Video Type:
type Video = {
snippet: {
title: string,
thumbnails: {
default: {
url: string
}
}
}
};
Add Video Type to props:
type Porps = {
video: Video,
onVideoSelect: Video => void
};
Ref props types in a function:
const VideoListItem = ({ video, onVideoSelect }: Porps) => {...
Create Video Type:
type Video = {
etag: string,
snippet: {
title: string,
thumbnails: {
default: {
url: string
}
}
}
};
type Props = {
videos: Array<Video>,
onVideoSelect: Video => void
};
Export shared types:
//@flow
export type Video = {
etag: string,
snippet: {
title: string,
thumbnails: {
default: {
url: string
}
}
}
};
Import shared types:
import type { Video } from '../model'
To Clicks:
const videoSelected = (e: SyntheticEvent<EventTarget>) => {
e.preventDefault();
props.onVideoSelect(props.video);
};
};
To Inputs:
videoSelected = (e: SyntheticInputEvent<EventTarget>) => {
e.preventDefault();
this.onInputChange(e.target.value);
};