Reactを書く環境づくり（春）

March 26, 2016

先日書いた「React を書く環境作り（僕） – Morizotter Blog」に新たに今日書いた「Bootstrap を Webpack でロードして React で自然に使う – Morizotter Blog」を加えてまとめたものとして書いておきます。

React

とりあえず React を入れる。

$ npm init
$ npm install --save react react-dom

Eslint

Eslint も入れて設定する。

$ npm install eslint --save-dev
$ eslint --init

eslint --initで対話形式で設定を聞かれる。僕が選んだのは下記の選択肢。

Use a popular style guide
AirBnB
JSON

すると、下記のファイルが生成される。

.eslintrc.json

{
    "extends": "airbnb",
    "plugins": \[
        "react"
    \]
}

とりあえずこれでよし。

Webpack

Babel と Webpack と Bootstrap を入れる

$ npm install --save bootstrap
$ npm install --save-dev babel-core babel-preset-react babel-preset-es2015
$ npm install --save-dev webpack babel-loader url-loader css-loader style-loader file-loader

webpack.config.js

module.exports = {
  entry: \`${\_\_dirname}/src/App.js\`,
  output: {
    path: \`${\_\_dirname}/dist\`,
    filename: 'bundle.js',
  },
  module: {
    loaders: \[
      {
        test: /\\.js\[x\]?$/,
        exclude: /node\_modules/,
        loader: 'babel',
        query: {
          presets: \['react', 'es2015'\],
        },
      },
      { test: /\\.css$/, loader: 'style-loader!css-loader' },
      { test: /\\.eot(\\?v=\\d+\\.\\d+\\.\\d+)?$/, loader: 'file' },
      { test: /\\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000' },
      {
        test: /\\.ttf(\\?v=\\d+\\.\\d+\\.\\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream',
      },
      { test: /\\.svg(\\?v=\\d+\\.\\d+\\.\\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
    \],
  },
  resolve: {
    extensions: \['', '.js', '.jsx'\],
  },
};

簡易サーバーと変更監視

$ npm install lite-server concurrently --save-dev

lite-serverとconcurrentlyをインストールする。webpack で js の変更を監視しつつ、変更があったら簡易サーバーで立ち上げたページが自動更新するというようにするために、package.jsonの script を編集する。

"scripts": {
  "webpack": "webpack -w",
  "lite": "lite-server --verbose --open dist",
  "start": "concurrent \\"npm run webpack\\" \\"npm run lite\\""
},

とりあえず準備はこれでよし。

表示してみる

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="dist/bundle.js"></script>
  </body>
</html>

App.js

import React from "react"
import ReactDOM from "react-dom"
import Main from "./Components/Main/Main"
require("../node_modules/bootstrap/dist/css/bootstrap.css")

function App() {
  return <Main />
}

ReactDOM.render(<App />, document.getElementById("app"))

Main.js

import React from "react"

class Main extends React.Component {
  static methodsAreOk() {
    return true
  }

  render() {
    return (
      <div>
        <button
          type="button"
          data-loading-text="Loading..."
          className="btn btn-primary"
          autoComplete="off"
        >
          Button
        </button>
      </div>
    )
  }
}

export default Main

npm startすると Bootstrap で装飾された Button が画面に表示される。

スタイルガイド

javascript/react at master · airbnb/javascript