Help us understand the problem. What is going on with this article?

Babelとwebpackを使ってES6でReactを動かすまでのチュートリアル

ES6(ES2015)でReactのコードを書こうと思い、現時点で最も良さそうな環境を構築してみました。

  • モジュールの依存関係解決には多機能かつ設定が簡単なwebpack(v4)を使用しています。
  • ES6->ES5のトランスパイラはbabelです。(追記:Babel7に対応しました)
  • npmが使えることが前提です。

開発環境の確認

node.jsとnpmのバージョンは以下を想定しています。異なる場合はうまくいかないかもしれませんのでご注意ください。

$ node -v
v10.15.0

$ npm -v
6.11.3

作業場所の確保と下準備

作業ディレクトリを作成して移動します。

mkdir react-es6 && cd $_

gitでソースコードを管理する場合は git init しておきましょう。

git init

package.jsonを生成します。初期設定をスキップするため -y オプションを付けています。

npm init -y

以下のpackage.jsonが生成されます。

package.json
{
  "name": "react-es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

ソースコードを配置するディレクトリとコンパイルしたコードを生成するディレクトリを作成します。

mkdir src dist

ここまでが下準備。

babelとwebpackのインストール

babelの必要なパッケージをインストールします。
-D--save-devと同義でpackage.jsondevDependenciesに自動的に記録するためのオプションです。

$ npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/register

babelの設定ファイルを作成します。

touch .babelrc

.babelrcにはES6を利用するため以下のように記述します。

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}

次にwebpackとwebpack-cliをインストールします。

$ npm i -D webpack webpack-cli

webpackのコンフィグファイルを作成します。
ここでは、親ファイルをwebpack.config.jsとし、詳細はdevelopment.jsを読ませることにします。

touch webpack.config.js development.js

設定ファイルには以下のように記述します。

webpack.config.js
require('@babel/register'); // development.jsでES6を使えるようにする
module.exports = require('./development');
development.js
import path from 'path'

const src  = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'dist')

export default {
  mode: 'development',
  entry: src + '/index.jsx',

  output: {
    path: dist,
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.jsx']
  },

  plugins: []
}

Reactパッケージのインストール

Reactのパッケージをインストールします。
-Sをつけておくとpackage.jsonのdependenciesに反映してくれます。

npm i -S react react-dom

さていよいよReactのコードを書いていきます。
とりあえずシンプルに、ブラウザ上に"Hello React!"と表示させてみましょう。

touch src/index.jsx
index.jsx
import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('app'));

なおここまででWebpackを使って上記のコードをビルドすることが可能です。
成功すれば、dist/bundle.jsが生成されますので確認の意味で実行してみましょう。(やらなくてもいいです)

./node_modules/.bin/webpack

webpack-dev-serverのインストール

webpackにはwebpack-dev-serverというモジュールが用意されていて、これを使うとwebサーバーを通して動作確認しながら開発することができます。
またwatchifyなどと同様にソースコードの変更を検知して自動的にビルドしてくれるので便利です。

$ npm i -D webpack-dev-server html-webpack-plugin

development.jsに必要な設定を追記します。

development.js
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin' //この行を追記
// 中略
export default {
  // 中略
  plugins: [
    //以下追記
    new HtmlWebpackPlugin({
      template: src + '/index.html',
      filename: 'index.html'
    })
  ]

}

index.htmlを用意しておきます。

touch src/index.html
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Test</title>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

webpack-dev-serverを起動してみましょう。

$ ./node_modules/.bin/webpack-dev-server

以下のようなビルド結果が出力され、ブラウザからlocalhost:8080にアクセスして、以下のように表示されれば成功です!

$ ./node_modules/.bin/webpack-dev-server
ℹ 「wds」: Project is running at http://localhost:8080/

// 中略

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 351 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
ℹ 「wdm」: Compiled successfully.

次回からnpm startコマンドでwebサーバーを起動できるようにpackage.jsonに登録しておきましょう。

package.json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1", //カンマを足す
  "start": "webpack-dev-server" // 追記する
}

さて、ただ"Hello React!"と表示しただけではつまらないので、
少しインタラクティブなアプリケーションにしてみましょう。

まずはwebサーバーを起動しておきます。

$ npm start

index.jsxを以下のように変更してください。

index.jsx
import React from 'react'
import { render } from 'react-dom'

class App extends React.Component {
  constructor(props) { 
    super(props)
    this.state = { message: 'something' }
  }

  onChange(e) {
     this.setState( {message: e.target.value} )
  }

  render() {
    return (
      <div>
        <input type="text" onChange = { this.onChange.bind(this) } />
        <p>{ this.state.message }</p>
      </div>
    )
  }
}

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

変更して保存すると自動的にビルドされます。
ブラウザをリロードすると以下のようにテキストエリアに入力した文字列をリアルタイム表示するアプリケーションが動作します。

react-es6.gif

以上です。あとはガシガシReactのコードを書いていくのみ!!

(追記)
最終的なコードはこちらに置きました。
https://github.com/akirakudo/react-es6-tutorial

akirakudo
en-japan,inc developer/ Director Ruby, javascript.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした