Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

前提条件

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 圧倒的に便利

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away