Reactを書く環境作り（僕）

March 20, 2016

React を書く環境作りのメモをしておきます。これ、ほぼ React 素人の僕が書くのであまり参考にしないほうが良いかもしれないです。

React のチュートリアルをもう一回やってみた（ESLint & Webpack） – Morizotter Blog を参考にしてみたのだが、情報が古くなっているところもあるのでメモしておく。

React

とりあえず React を入れる。

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

Eslint

Eslint も入れて設定する。

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

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

Use a popular style guide
AirBnB
JSON

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

.eslintrc.json

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

とりあえずこれでよし。

Webpack

このやり方が今も有効かわからないけどとりあえず動いた。

$ npm install --save-dev webpack babel-loader babel-core babel-preset-react babel-preset-es2015

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'\]
        }
      }
    \]
  },
  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 "./Main"

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

Main.js

import React from "react"

export default function Main() {
  return (
    <div className="main">
      <p>header</p>
    </div>
  )
}

npm startすると main という文字が画面に表示される。