Material-UI チュートリアル + マウス移動可能な webアプリを作成する

はじめに

Reactを勉強中に、Material-UIで作成した要素をマウスで移動するようなUIを実現したく、
react-draggableというモジュールを使用してみました。

できること

1. Material-UIの公式サンプルのボタン要素をマウス移動可能にする
2. Reactのアプリを０から作成して移動可能なコンポーネントを作成する

環境

• MacBook Pro (2.7 GHz Intel Core i5,16 GB 1867 MHz DDR3)
• macOS Sierra

手順

1. Material-UIの公式サンプルをマウス移動可能にする

まずはMaterial-UIのレポジトリをもってきます。

$ git clone https://github.com/mui-org/material-ui.git

examples/create-react-app に npxのcreate-react-appコマンドで作成したサンプルがあります。
サンプルを実行してみましょう。

$ cd examples/create-react-app
$ npm install
$ npm start

ブラウザが立ち上がり、ボタンが表示されます。

こちらにreact-draggbleを導入していきます。

$ npm install react-draggable
$ vim src/pages/index.js

src/pages/index.js

import { withStyles } from '@material-ui/core/styles';
import withRoot from '../withRoot';
import Draggable from 'react-draggable';//<-- 追加

...

<Draggable>//<-- 追加 Draggableタグで挟む
<Button variant="contained" color="secondary" onClick={this.handleClick}>
    Super Secret Password
</Button>
</Draggable>//<-- 追加 Draggableタグで挟む

再度実行してみます。

$ npm start

これでボタンをマウスで移動できるようになりました。

2. Reactのアプリを０から作成して移動可能なコンポーネントを作成する

Reactのアプリを作成するのには、nodeをインストールするとついてくるnpxに標準装備されている
create-react-appコマンドが便利なようです。

インストール方法はこちらに書いてある通りに進めます。

$ npx create-react-app react-material-ui
$ cd react-material-ui
$ npm install @material-ui/core
$ npm install contentful

ここでは、Material-UIのAppBarを追加してみます。
src/index.js と同じ場所に、NavBar.jsというファイルを作成します。

src/NavBar.js

import React from 'react'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
const NavBar = () => {
    return(
        <div>
        <AppBar position="static">
            <Toolbar>
                <Typography variant="title" color="inherit">
                React & Material-UI Sample Application
                </Typography>
            </Toolbar>
        </AppBar>
        </div>
    )
}
export default NavBar;

このコンポーネントをsrc/App.jsの方から呼び出しましょう。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NavBar from './NavBar' //<-- 追加
import Draggable from 'react-draggable'; //<-- 追加

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          test: To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Draggable>  //<-- 追加
        <div>        //<-- 追加
          <NavBar /> //<-- 追加
        </div>       //<-- 追加
        </Draggable> //<-- 追加
      </div>
    );
  }
}

実行してみます。

$ npm start

無事に、追加した一番下の青いバーだけマウスで移動可能になりました。