Reactのプロジェクト作成

vue-cliによるプロジェクト作成

reactを始める時は最初のプロジェクト作成が障壁になりそうでreact-cliという公式が出しているツールを使えば開発環境を素早く構築することができますが、内部で利用しているwebpackの設定がどうなっているかなど良く分からなさそうで、使ってみると不便そうな気がしたので自分は試したことがありません。
そこで今回はvueでの開発に使用しているvue-cliを使用してプロジェクトを作成後、reactを利用できるようにしたいと思います。vue-cliの方が開発環境や、ビルドの設定の確認、編集が行いやすくなっておりますので、個人的にはこちらの方が扱いやすいのでこっちで試してみたいと思います。

vue-cliのインストール

npm install -g vue-cli

プロジェクト作成

vue init webpack my_project
cd my-project
npm install

一旦起動してみる

プロジェクト作成直後はvueのプロジェクトになっておりますが、とりあえず以下のコマンドでwebpackを起動して動作を確認してみたいと思います。

npm run dev

上記コマンド実行後にブラウザが開いてvue-jsのアイコンが表示された画面が表示されたかと思います。

vue-cliで作成したプロジェクトをreact化する

それではreactで開発できるようにしていきたいと思います。まずは必要なモジュールをインストールします

npm install –save react react-dom redux react-redux npm install –save-dev babel-loader babel-core babel-preset-react babel-preset-es2015
npm install –save-dev eslint@3.x babel-eslint@6
npm install –save-dev file-loader
npm install –save-dev glob-loader
npm install –save-dev eslint-plugin-react

それから以下の".babelrc"をプロジェクトのルートディレクトリに作成します。

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

次にeslintでreactのプラグインを使うように以下の内容にします。

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'react'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    'react/jsx-uses-vars': 1,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

あとは"src/main.js"を以下のないように変更したらReactでのコンポーネント初期化が確認できると思います。コンポーネントの初期化についてはes2015の機能であるconstで値の再代入をできないようにしております。es2015を使う場合は変数を定義する場合できるだけlet, constでスコープを制限したり再代入を禁止することで想定外の副作用を防げるようにしておいた方がよさそうです。

import React from 'React'
import { render } from 'react-dom'

const element = (
  <div>
    <h1>Hello, React!</h1>
  </div>
)

render(
  element
  , document.getElementById('app')
);

それから"npm run dev"で起動すると思うのですがたくさん警告が表示されると思います。これについてインポートするフモジュール名が実際はreactなのにReactでしているのが原因で、モジュール名はケバブケースを用いるのが標準のようですhttps://github.com/AngularClass/angular2-webpack-starter/issues/926。 それでは以下のようにimport先のモジュール名を変更して再度"npm run dev"を実行してみると警告もなく動くのが確認できると思います。

import React from 'React'
↓
import React from 'react'

ビルドをする場合は"npm run build"を実行すればよく、設定などを変更したい場合はbuildディレクトリの中身を確認して変更していけばどうにかなりそうです。