React NativeでFetch

# はじめに
新卒エンジニア2ヶ月目。
React NativeでFetchの練習をしたかったのでFetchについて軽く調べて<https://qiita.com/Ikeponias/private/e14c11699a2b2884a200>サンプルと似たような物を書いた。
流れとしてはFetchしてFlatListで表示する。これだけ。

# コードについて
GitHubにも上げてある<https://github.com/Ikeponias/MoviesFetch>。

## MoviesListContainer.js
``` container/MoviesListContainer.js
import React, { Component } from 'react';
import MoviesListComponent from '../component/MoviesListComponent';

export default class MoviesListContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {data: null};
    }

    componentDidMount() {
        this._fetch();
    }

    _fetch = () => {
        fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((jsonData) => this.setState({ data: jsonData['movies'] }))
            .catch((error) => console.error(error));
    }

    render() {
        return (
            <MoviesListComponent data={ this.state.data } />
        );
    }
}
```
fetchしたjsonデータから"Movies"のものだけをstateにセットしている。
setState後はrender()が走るはずなので、自動的に更新される。
dataが初期状態でnullなのにケアしていないのは直したい。

## MoviesListComponent.js
``` component/MoviesListComponent.js
import React, { Component } from 'react';
import { FlatList, View } from 'react-native';
import MovieComponent from './MovieComponent';

export default class MoviesListComponent extends Component {
    constructor (props) {
        super(props);
    }
    
    _keyExtractor = (item, index) => item.releaseYear;
    render() {
        return (
            <View>
                <FlatList
                    data={ this.props.data }
                    extraData={ this.props.data }
                    keyExtractor={ this._keyExtractor }
                    renderItem={({ item }) => <MovieComponent item={ item } />}
                />
            </View>
        );
    }
}
```
渡されたデータをFlatList形式で表示するコンポーネント。
data内にはitemとindexがあってそのうちのitemがrenderItemに渡されるって解釈で良いのだろうか…

## MovieComponent.js
``` component/MovieComponent.js
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class MovieComponent extends Component {
    constructor (props) {
        super(props);
    }
    
    render() {
        return (
            <View style={ styles.item }>
                <Text style={ styles.itemText }>
                    { this.props.item.title }
                </Text>
                <Text style={ styles.itemText }>
                    { this.props.item.releaseYear }
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    item: {
        margin: 10,
        height: 44,
        borderBottomWidth: 1,
    },
    itemText: {
        fontSize: 18,
    }
});
```
FlatListの一つ一つのアイテムを表現する部分がこれ。

## App.js
``` App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MoviesListContainer from './container/MoviesListContainer';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MoviesListContainer />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 22,
  },
});
```

MoviesListContainerでFetchしたjsonのデータをMoviesListComponentへ送り、その中でFlatListを用いて各Itemを表示する要素をMovieComponentで作成している。そのMoviesListContainerをApp.jsで呼んでいる。

# まとめ
結果はこうなる。
![スクリーンショット 2018-05-27 13.18.56.png](https://qiita-image-store.s3.amazonaws.com/0/212284/11e0730f-118e-0638-5bed-c3dd733e9268.png)


コンテナとコンポーネントの分け方がいまいち上手にできないところは勉強したい。