create-react-app で React フロントエンドの掲示板を作ってみる（リスト表示）

create-react-appはFacebookが開発したReact web アプリケーションの環境構築パッケージです。
React はそのコードを書いて動かす以前に前提となる開発環境を整備するのに苦労することから適用を断念しがちでした。このツールによって導入がしやすくなりました。

作るもの

• これまで作ってきた掲示板と同じもの
• フロントエンドが今回作るもの。前回作った掲示板APIと連携して書き込みデータをやりとりする。

サーバーAPIを立ち上げておく

前回作った「掲示板REST API」を localhost:3000で立ち上げておきます。このサーバーと 今回作るアプリが連携します。

開発環境

• MacOS High Sierra
• 詳細はこちら

1. create-react-app のインストール

$ npm install -g create-react-app 

2. プロジェクト作成

React アプリケーションのプロジェクトを生成します。

$ create-react-app kakifront

このようなファイル構成で作られます。

.
├── README.md
├── node_modules/
├── package-lock.json
├── package.json
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

でコンパイル＆httpサーバーが起動します

$ npm start　
Compiled successfully!
You can now view kakifront in the browser.

  Local: http://localhost:3000/
  On Your Network: http://192.168.11.15:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

localhost:3000にアクセスするとデフォルトのReact表示画面が表示されます。 （今回はサーバーAPI側が3000で立ち上がっていますので、3001でアプリが立ち上がります。）

3. package.jsonにサーバー情報を追加

package.json

{
    "name": "kakifront",
    "version": "0.1.0",
    "private": true,
    "homepage": "http://localhost:8080/test/react",
    "dependencies": {
        "react": "^16.0.0",
        "react-dom": "^16.0.0",
        "react-scripts": "1.0.17"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    },
    "proxy" : "http://localhost:3000"
}

"proxy" : "http://localhost:3000" を記述することによりコードの中で fetch(/api/v1/***)と書くことができます

4. App.js編集

App.js

import React, { Component } from 'react';
import './App.css';

class Post extends Component {
    render() {
        return (
            <div className="kakikomi">
                <div>{this.props.post.kakikomi}</div>
                <p className="name">{this.props.post.name}</p>
            </div>
        );
    }
}

class List extends Component {
    // 書き込み一覧
    constructor(props) {
        super(props);
        this.state = {posts:[]};
    }
    // 書き込み一覧をサーバーから取得
    componentDidMount() {
        fetch('/api/v1/Post?sort={"_id":-1}')
            .then(response => response.json())
            .then(data => this.setState({ posts: data }));
    }
    render() {
        const {posts} = this.state;
        var list = [];
        for (var i in posts) {
            list.push( <li key={i}><Post post={posts[i]} /></li> );
        }
        return (<ul>{list}</ul>);
    }
}


class Header extends Component {
    render() {
        return (
            <header>
                <h1>掲示板</h1>
                <nav>
                    <ul>
                        <li><a href="/">トップ</a></li>
                        <li><a href="#">投稿</a></li>
                    </ul>
                </nav>
            </header>
        );
    }
}

class App extends Component {
    render() {
        return (
            <div className="App">
                <Header />
                <List />
            </div>
        );
    }
}

export default App;

やったこと

• タイトルとメニュー表示のHeaderコンポーネント
• 書き込みリスト List コンポーネント
• １書き込みの Postコンポーネント
• List 表示時にサーバーから書き込み一覧を取得し state.postsに入れる

スタイルはApp.cssにまとめる

App.css

body {
  margin: 0;
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

header {
    margin-bottom:40px;
}

ul {
    list-style: none;
}

nav ul {
    display:flex;
}

nav ul li {
    margin-right: 20px;
}

.kakikomi {
    border: 1px solid #888;
    padding:20px;
    margin-bottom: 40px;
}

.kakikomi div {
}

.kakikomi .name {
    font-size:0.8em;
    color: #555;
}

ブラウザでの動作

• http://localhost:3001 にアクセスすると書き込みリストが表示されます。

5. buildして配置

$ npm run build

で build/ 以下にproductionファイルが生成されます。このフォルダを静的HTTPサーバー（今回は 別に立ち上げている apacheのlocalhost:8080/test/react/) に配置して動作確認

package.json で

   "homepage": "http://localhost:8080/test/react",

と記述するとbuild時に生成されるHTMLに適した相対パスを埋め込んでくれます。

6. まとめ

• create-react-app でプロジェクトをつくる
• package.json の homepage, proxy を設定して、配置位置とサーバーサイドのbaseURLを設定
• App.jsで必要なコンポーネントを定義
• List表示時にサーバーAPIの書き込みリストを取得して表示

トップページで書き込み一覧を表示することができました