はじめに
Reactの環境を１から構築していく。
アプリディレクトリの作成
まずはmkdirコマンドでアプリのディレクトリを作成する。
作成したらアプリディレクトリに移動する。
whitecat:~/environment $ mkdir whitecat-app
whitecat:~/environment $ ls
README.md whitecat-app
whitecat:~/environment $ cd whitecat-app/
whitecat:~/environment/whitecat-app $
必要npmパッケージのインストール
package.jsonの作成
npmモジュールをインストールするために、最初に空のpackage.jsonを作成する。
whitecat:~/environment/whitecat-app $ echo "{}" > package.json
whitecat:~/environment/whitecat-app $ ls
package.json
babel
babelとは
reactのJSXで記述されたコードは、ブラウザでは解釈できない。そこでブラウザ解釈できるように変換する必要がある。この変換を行ってくれるのがbabelである。
babelのインストール
インストールはnpm install --save-dev babel-core babel-preset-reactコマンドで実施する。babel-coreはbabelの本体である一方、babel-preset-reactはreactアプリケーションに必要なbabelのプラグインをまとめたものだ。
babel-preset-hogehogeは、特定の目的のためにbabelで必要なプラグインをまとめてくれているもの。自分でひとつひとつインストールしてもよいが、特に理由なければpresetを使うべき。
webpack
webpackはモジュールバンドラーであり、モジュール（機能ごとにファイルを分割したソースコードやnpmパッケージ）をバンドルして（依存関係を解決したうえで１ファイルにまとめて）くれる。
webpackのインストール
インストールはnpm install --save-dev webpack babel-loader@7 webpack-cliコマンドで実施する。
モジュールをバンドルするだけならwebpakだけでよいが、reactではモジュールをバンドルする前にbabelでソースコードのJSX記述を変換する必要があるため、babel-loaderを併せてインストールする。なお、babel-coreのバージョン関係から@7のバージョンをインストールしないといけない。
webpackでバンドルする際にはcliでコマンド実行させる必要があるので、webpack-cliもインストールする。
react
reactのインストール
最低限必要な2つのreactパッケージをnpm install --save react react-domでインストールする。
package.json
インストール後のpackage.jsonは以下のようになる。
{
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4"
}
}
アプリケーションソースコードの作成
srcディレクトリを作成し、サンプルとして以下ファイルを作成する。
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
import React from 'react';
export default function Hello(){
return <h1> Hello world!! </h1>;
}
webpack設定ファイルの作成
webpack.config.jsを作成し、バンドルの設定を記述する。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['react']
}
}
}
]
}
};
バンドル実施
./node_modules/.bin/webpack --config webpack.config.js --mode developmentを実行し、バンドルファイルを作成する。モードについては、とりあえずdevとしておく。
実行するとwebpackは自動的に/src/index.jsを起点として、バンドルする。実行後は、/dist/main.jsがアウトプットとして出力される。
index.htmlの作成
publicフォルダを作成し、index.htmlを作成する。index.htmlでは、バンドルされたmain.jsを読み込むようにする。
<body>
<div id="root"></div>
<script src=".././dist/main.js"></script>
</body>
index.htmlを読み込む
htmlをブラウザで開くと、reactが実行されhello world!!が表示される。
最終的なディレクトリの構成
.
├── dist
│ └── main.js
├── node_modules
├── package.json
├── package-lock.json
├── public
│ └── index.html
├── src
│ ├── Hello.js
│ └── index.js
└── webpack.config.js
webサーバーの作成と自動ビルド
このままだと、ソースを書き換えるたびにwebpackコマンドを実行し、htmlファイルを再読み込みしないといけない。webpack-dev-serverをインストールすると、ソースコードの書き換えにより勝手に再ビルドしてくれるようになる。
インストール
npm install webpack-dev-server --save-devコマンドを実行する。
設定
webpack-dev-serverもwebpack.config.jsを設定ファイルとして利用する。なお、まずは設定として[disableHostCheck: true]とする。
※今回は開発環境にcloud9を利用しているためlocal環境ではない。よって、どこからでもアクセスできるようにしないといけない。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['react']
}
}
}
]
},
devServer: {
disableHostCheck: true
}
};
アクセス
./node_modules/.bin/webpacdev-serverコマンドでwebサーバーを起動する。起動後、https://hogehoge.hoge.cloud9.us-east-1.amazonaws.com/public/index.htmlにアクセスすると、hello world!!が表示される。
distフォルダ削除
webpack-dev-serverではバンドルしたファイルはインメモリ上に保存される。よって、distフォルダは必要ないため削除する。
おわりに
とりあえず、最低限のreact環境は作成できた。