5-cwb-react-flow-examples

• Slides
• This project was bootstrapped with Create React App
• Original project video_browser

References

• Flow site
• GitHub Flow
• Flow type cheat sheet

Tutorial

1 Install Flow

Install Flow:

$ yarn add --dev flow-bin

$ yarn run flow init

Run Flow:

$ yarn flow

2 Primitive Types

Add type to props:

type Props = {
  onSearchTermChange: string => void
};

Add type to state:

type State = {
  term: string
};

Add DefaultValue to state:

state = {
    term: ''
  };

3 Object Types

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) => {...

4 Array Types

Create Video Type:

type Video = {
  etag: string,
  snippet: {
    title: string,
    thumbnails: {
      default: {
        url: string
      }
    }
  }
};

type Props = {
  videos: Array<Video>,
  onVideoSelect: Video => void
};

5 Module Types

Export shared types:

//@flow
export type Video = {
  etag: string,
  snippet: {
    title: string,
    thumbnails: {
      default: {
        url: string
      }
    }
  }
};

Import shared types:

import type { Video } from '../model'

6 Flow in everywhere

7 Add JsEvents

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);
  };