React+MaterialUI+Expressでスケルトンプロジェクトを作る

まずはexpressプロジェクトを作る

まずはexpressプロジェクトをつくるために、express-generatorをインストールする

$ npm install -g express-generator

インストールできたらexpressアプリを作成。

$ express app_name

app_nameのところは皆さんの好きなアプリ名を入れて下さい。

$ cd app_name
$ npm install

これで必要なnode_modulesがインストールされます。

次に、app_name/routes/user.jsを以下のように編集します。

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.json([{
    id: 1,
    username: "Kiriyama"
  }, {
    id: 2,
    username: "Nikaido"
  }]);
});

module.exports = router;

さらにport:3001でexpressサーバーが起動するように、package.jsonを以下のように書き換えます。

{
  "name": "app_name",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "PORT=3001 node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
  }
}

書き換えたら、下記のコマンドを打って、expressサーバーが起動することを確認する。

$ npm start

expressサーバーが起動したら、ブラウザで

http://localhost:3001/users

にアクセスし、

[{"id":1,"username":"Kiriyama"},{"id":2,"username":"Nikaido"}]

が表示されることを確認する。

Reactプロジェクトを作る

まずはReactプロジェクトを作る便利なツールのcreate-react-appをインストールします。

$ npm install -g create-react-app

インストールできたら、app_name直下で、下記のコマンドを実行して、Reactのスケルトンプロジェクトを作ります。

$ create-react-app client

インストールが長いですが、終わったらapp_name/client/package.jsonを開き、以下のようにproxyを追加します。

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy":"http://localhost:3001"
}

これは、create-react-appでスケルトンプロジェクトを作るとデフォルトでは、create-react-appの開発サーバーが立ち上がり、前の段落で作ったExpressサーバーと通信しません。 これでは、開発がしにくいので、port:3001で立ち上がるように設定したExpressサーバーに通信するようにproxy設定をしています。

次に、create-react-appで作ったReactのコードがExpressサーバーからのデータを受け取れるか確認します。

app_name/client/App.jsを開き、以下のように編集します。

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

class App extends Component {
  state = {users: []}

  componentDidMount() {
    fetch('/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return (
      <div className="App">
        <h1>Users</h1>
        {this.state.users.map(user =>
          <div key={user.id}>{user.username}</div>
        )}
      </div>
    );
  }
}

export default App;

編集が終わったら、app_name直下npm startをして、expressサーバーを起動した後、app_name/client直下でnpm startを実行します。 実行したら、ブラウザが自動で開きますので、ユーザーの情報がブラウザに表示されて入れば完了です。

Material-UIを導入する

最後に、Reactと一緒に使われることが多いCSSフレームワークMaterial-UIを導入します。

app_name/client直下で次のコマンドを実行します。

$ npm install material-ui@next --save

次にapp_name/client/App.jsを下記のように編集します。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from 'material-ui/Button';

class App extends Component {
  state = {users: []}
  
    componentDidMount() {
      fetch('/users')
        .then(res => res.json())
        .then(users => this.setState({ users }));
    }
  
    render() {
      return (
        <div className="App">
          <h1>Users</h1>
          {this.state.users.map(user =>
            <div key={user.id}>{user.username}</div>
          )}
          <Button raised color="primary">
            Hello World
          </Button>
        </div>
      );
    }
}

export default App;

編集を終えたら、再度npm startを実行し、ユーザー名の下にボタンが出て入ればMaterial-UIの導入は完了です。