[JS]Reactのインストールと周辺ツール(Babel, Webpack)の導入方法

そろそろ React について知っておきたいと思ったのでいろいろな導入方法を見て回ったのですが、古い情報が多くサイトの説明どおりにやっても動かなかったので React とその関連ツールのインストール方法について自分なりにまとめてみることにします。

React とは？

React とは Facebook がメンテナンスをしている Javascript のライブラリで、ウェブアプリ、ウェブサイト向けの UI パーツ構築のための機能を提供します。似た機能を持つ Google の Angular とはライバルのような関係です。

インストール

Node.js

今回 React のインストールは Node.js の npm(Node Package Manager) を使って行います。まずは公式サイトからのインストーラーをダウンロードし、インストールを済ませて下さい。

プロジェクトフォルダと package.json の用意

まずは好きな名前のフォルダを作り、ターミナル（コマンドプロンプト）でそのフォルダをカレントディレクトリにします。
npm では package.json ファイルによってインストールするコンポーネントを関するので、まずはそちらのファイルをコマンドで作成します。

npm init

細かい設定について尋ねられますがデフォルトで良ければそのまま進めて下さい。後から変更もできます。今回は「react-tutorial」という名前に設定しました。（「react」等のインストールするパッケージ名と同じにしてしまうとエラーになります。）

React のインストール

React 本体と、HTML タグを生成するパッケージをインストールします。

npm install --save react react-dom

Webpack, Babel のインストール

古いブラウザでもスクリプトが動作できるようにするため、Babel を使ってトランスパイルできるようにします。
Webpack を使うとなにかコードを書き換えた時に自動的に変換されるようになるので便利です。
Webpack 本体と Babel、Babel のプリセットのインストールは次のようにします。

npm install --save-dev webpack
npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-react babel-preset-env

Webpack の設定

Webpack がどのような動作をするかはプロジェクトのルートフォルダに webpack.config.js ファイルを用意し、その中に記述します。

const path = require('path');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/app.jsx'),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devtool: 'inline-source-map',
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader'
            }]
        }]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    }
};

例として js または jsx ファイルに書き換えがあった時、dist/bundle.js にまとめて変換されるように設定してあります。

あとは package.json ファイルの scripts の箇所を次のように書き換え、コマンドでスクリプトを実行できるようにします。

  "scripts": {
    "watch": "webpack --watch --progress"
  },

Babel の設定

Babel の設定方法は１つではないのですが、今回は .babelrc ファイルを作成する方法で進めていきます。ファイルの中身は次のようにしました。

{
    "presets": [
        "react",
        ["env", {
            "targets": {
                "browsers": ["last 2 versions"]
            },
            "modules": false
        }]
    ]
}

ターゲットとなるブラウザは２つ前までとしました。

サンプルプログラム

React を使う準備が整ったので簡単なプログラムを作ってみます。まずは index.html ファイルを用意して下さい。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React Tutorial</title>
</head>
<body>
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
</body>
</html>

そして src フォルダに app.jsx ファイルを作ります。

src/app.jsx

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

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

次のコマンドでファイルの監視を始めます。何か変更があると自動的に変換が行われます。

npm run watch

app.jsx を書き換えた時、dist/bundle.js が作られていれば成功です。うまく行っていれば index.html をブラウザで見ると画面に「Hello, World!」と表示されているはずです。

PHP Archive

Webサイト開発初心者の備忘録