はじめに

最近マストドンのカスタマイズとかでReactを触るのでこの機会に勉強したく、まずは開発環境を作るところから。

MacでHomebrew、Node.jsはインストール済み。

手順

Yarnのインストール

$ brew install yarn

プロジェクトフォルダ作成

$ mkdir project-name
$ cd project-name

初期化

$ yarn init

入力項目はいったんデフォルトのままで。pakages.jsonが作成されます。

パッケージインストール

$ yarn add react react-dom 
$ yarn add webpack webpack-dev-server babel-loader babel-core babel-preset-react babel-preset-es2015 --dev

ファイル追加・編集

src/app.jsx

import React from 'react';
import ReactDOM from 'react-dom';

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

dist/index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello React</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/app.jsx',
  output: {
    path: path.resolve('dist'),
    filename: 'bundle.js'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve('dist'),
  },
};

packages.json

"scripts": {
  "build": "webpack --progress",
  "start": "webpack-dev-server --inline"
}

を追加。

動作確認

$ yarn start

localhost:8080 で確認できます。jsを編集すると自動でビルドとブラウザのリロードが行われます。

ビルド

$ yarn build