Reactノート6


##postman

- Chrome拡張を追加する

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=ja


##jsonplaceholder
テスト用のAPIを返すサービスを使ってpostmanを試用してみる

GETで以下を入力し、Sendを押す
http://jsonplaceholder.typicode.com/posts

<img width="1020" alt="スクリーンショット 2017-12-24 13.47.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/62264/1b3ca5f8-be55-a8a1-9dbe-28233a83c419.png">

- テスト用のjsonが返ってくる

---

##json-serverインストール

```
npm install -g json-server
```

#サンプル
```
create-react-app test
```

##db.jsonの追加

<img width="226" alt="スクリーンショット 2017-12-24 13.54.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/62264/1439521f-e638-effc-cd03-8ce6ed0795e9.png">


```db.json
{
  "posts": [
    {
      "id": 1,
      "title": "タイトル",
      "body": "こんにちは"
    }
  ]
}
```

##json-server起動

```
json-server --watch db.json --port 8888
```

##postmanを使ってAPIにアクセスしてみる(GETとPOST)

http://localhost:8888/posts

###GET (データ取得してみる)
<img width="939" alt="スクリーンショット 2017-12-24 13.59.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/62264/ecdf5fec-7049-75b5-e56a-0a2e33f3cacd.png">

- db.jsonのデータが取れている。


###POST (投稿してみる)

- パラメーターを入力。(以下でSendを押す)

<img width="937" alt="スクリーンショット 2017-12-24 14.00.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/62264/d1169cea-bb7d-f6b2-9cc3-432fc2eb9bfa.png">

- 入力したパラメータがテーブルに書き込まれたことが確認できる

---

#ローカルAPIをJSから使ってみる

#index.js


```index.js

import React from 'react';
import ReactDOM from 'react-dom';

const url = "http://localhost:8888/posts";

class Form extends React.Component {
    constructor(props) {
        super(props);

        this.state= {
            title: "",
            body: ""
        }
        this.handleTitleChange = this.handleTitleChange.bind(this);
        this.handleBodyChange = this.handleBodyChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleTitleChange(event) {
        console.log("state:title ", this.state.title);
        this.setState({title: event.target.value});
    }

    handleBodyChange(event) {
        console.log("state:body ", this.state.body);
        this.setState({body: event.target.value});
    }

    handleSubmit(event) {
        console.log("handleSubmit");
        //alert('送信内容:' + this.state.title + this.state.body);
        event.preventDefault();

        this.props.addPost(this.state.title, this.state.body);
    }

    render() {
        return(
            <form onSubmit={this.handleSubmit}>
                <div>
                    <label>
                        タイトル:
                        <input type="text" value={this.state.title} onChange={this.handleTitleChange} />
                    </label>
                </div>

                <div>
                    <label>
                        本文:
                        <input type="text" value={this.state.body} onChange={this.handleBodyChange} />
                    </label>
                </div>

                <div>
                    <input type="submit" value="追加" />
                </div>
            </form>
        );
    }
}


class Posts extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            posts: this.props.posts
        };

        this.add = this.add.bind(this);
    }

    add(title, body) {
        console.log("add is called");
        console.log("title", title);
        console.log("body", body);

        fetch(url, {
            method: 'post',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: "title=" + title + "&body=" + body
        }).then(function(response) {
            return response.json();
        }).then(function(json){

            console.log(json);

            let count = this.state.posts.length + 1;

            this.state.posts.push({
                title: json.title,
                body: json.body,
                id: count
            });

            this.setState(this.state);
        }.bind(this));
    }

    render (){
        return(
            <section>
                {this.state.posts.map(function(post,index){
                    return(
                        <section key={post.id}>
                            <h1>{post.title}</h1>
                            <p>{post.body}</p>
                        </section>
                    );
                }.bind(this))}
                <Form addPost={this.add} />
            </section>
        );
    }
}

fetch(url).then(function(response){
    return response.json();
}).then(function(json) {
    console.log(json);

    ReactDOM.render(
    <Posts posts={json} />,
    document.getElementById('root')
    );
});
```

#create-react-appを起動

http://localhost:3000/

```
npm start
```

#表示

<img width="394" alt="スクリーンショット 2017-12-24 14.13.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/62264/8bac9d47-3427-5187-8ece-e72682c497a1.png">