windows 環境で Create-React-app + material-uiの環境を作成

前提条件

node.js をインストール

https://nodejs.org/en/
よりダウンロードしてインストール
ここでは8.9.1LTSをインストールした。

Quick Overview

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm install material-ui --save
src/App.js の編集
npm start

Create React App のインストール

npm install -g create-react-app

雛形アプリケーションの作成

以下のコマンドを実行して作成

create-react-app my-app

実行結果

react 16.2 がインストールされた

PS C:\Users\masan\dev> create-react-app my-app

Creating a new React app in C:\Users\masan\dev\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\masan\dev\my-app\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-dom@16.2.0
+ react-scripts@1.0.17
+ react@16.2.0
added 1267 packages in 119.412s

Success! Created my-app at C:\Users\masan\dev\my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

material-ui のインストール

cd my-app
npm install material-ui --save

PS C:\Users\masan\dev\my-app> npm install material-ui --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\react-scripts\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ material-ui@0.19.4
added 248 packages in 42.261s

warning がでるが、windows 環境はサポートしないオプションのようなので、無視する。

App.js の修正

src/App.js を修正

import React, { Component } from 'react';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, world</h1>
        <MuiThemeProvider>
          <RaisedButton label="ボタン" primary={true} />
        </MuiThemeProvider>
      </div>
    );
  }
}

export default App;

実行

npm start

実行結果

Compiled successfully!

You can now view my-app in the browser.

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

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

環境があっていればブラウザも自動的に起動される。起動されない環境では、http://localhost:3000/にアクセスすれば確認できる。
windows 環境でもホットローダが有効になっている。
ソース修正して保存すれば自動的に反映される。

以前は自分で gulpfile を書いていて、yeoman なども試したが Create React App 圧倒的に便利