Zenn
💻

webpack+React+material-uiの環境を最小手順で作成

2021/01/31に公開
JavaScript
React
webpack
yarn
Material-UI
tech

create-react-app(https://github.com/facebook/create-react-app) を使って下さい。

$ yarn global add create-react-app
$ npx create-react-app project_name

で雛形ができます。

あとは

$ cd project_name
$ yarn add react @material-ui/core

などをやってください。

以下の内容は古くなりました。

表題通りでReactとmatrial-uiを使ったウェブページをwebpackを使って最小手順で作るための手順をまとめた。

準備

まずはディレクトリを作成してnpmの準備をする。

$ mkdir webpack-exe
$ cd webpack-exe
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (webpack-exe) 
version: (0.0.0) 
description: 
entry point: (index.js) entry.js
test command: 
git repository: 
keywords: 
author: 
license: (ISC) Public Domain
About to write to /home/takaki/src/webpack-exe/package.json:

{
  "name": "webpack-exe",
  "version": "0.0.0",
  "description": "",
  "main": "entry.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "Public Domain"
}


Is this ok? (yes)

webpackがインストールされてない場合はインストールする。

$ npm install -g webpack

Reactを動かす

次にReactのインストール。

$ npm install --save react react-dom babel-preset-react babel-loader babel-core
$ npm install --save babel-preset-es2015

Reactで使うJSXはそのままではJavaScriptとして理解できないので変換するツールがbabel。
ES2015も使いたいのでbabelの対応パッケージもインストール。

次にHTMLとJavaScriptの準備。

index.html
<!DOCTYPE html>
<html>

<head>
  <title>Webpack Excercise</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
  <div id="content"> Content </div>
  <script src="bundle.js" charset="utf-8"></script>
</body>

</html>

ちなみに scriptタグを入れる場所が重要で後ろのほうにしないとDOMの解釈のタイミングとかでエラーになるので注意。

entry.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world</h1>,
  document.getElementById('content')
);

とする。

次にwebpackでビルドするための準備。
babelの設定ファイルを準備。

.babelrc
{ "presets": ["react", "es2015"] }

これで React と ES2015 が使えるようになる。
次にwebpackの設定。

webpack.config.js
module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js$/,  loader: "babel-loader", exclude: /node_modules/ }
    ]
  }
}

entry.jsをコンパイルしてbundle.jsを生成する。jsファイルはbabelで扱う設定。

あとは webpack を動かすだけ

$ webpack --progress --color

と実行して index.html を見れば良い…ということなんだがwebpackの開発用webサーバーを使う。webサーバーが用意されてて便利というのもあるが差分コンパイルをしてくれるので早くなるという利点が大きい。

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --color

ここで http://localhost:8080/webpack-dev-server/ にアクセスすれば良い。

material-ui のインストール

Reactが動くところを確認したらmaterial-uiのインストール。

$ npm install material-ui --save

次に entry.js を書き換える。

entry.js
var React = require('react');
var ReactDOM = require('react-dom');

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

ReactDOM.render(
  <div>
    <h1>Hello, world</h1>
    <MuiThemeProvider>
      <RaisedButton label="Default" />
    </MuiThemeProvider>
  </div>,
  document.getElementById('content')
);

webpack-dev-server を使っていると勝手にリロードされて画面が書き変わっているはず。

なおまとめたコードは https://github.com/takaki/webpack-exe を参照。

以上。

参考リンク

GitHubで編集を提案

Discussion