React 環境構築方法
はじめに
React の環境構築はなにかと面倒ですね。Qiit○とかの記事を参考にしてみたら動かなかったり、create-react-app コマンドだと後で面倒なことになりそうですし。
なのでここでは、Node.js と npm のインストールが終わっていることを前提に、簡単に React 環境構築方法を掲載しておきます。
構築する環境は、WebPack, Babel を使用したものになります。
WebPack は複数のツールを使いビルドを行うもので、Babel は最新のJS記述を既存のブラウザでも動作するようにJSを変換するツールになります。
では、構築方法を見ていきましょう。
環境構築
まずはターミナルからディレクトリを作成して、package.json ファイルを生成します。
$ mkdir react_sample
$ cd react_sample
$ npm init -y
そうしたら、以下の２ファイルを作成します。
ディレクトリ構成はこんな感じで。
react_sample/
├── app.js
├── dist
├── index.html
├── package.json
└── webpack.config.js
・app.js
import React from 'react'
import ReactDOM from 'react-dom'class App extends React.Component{
render(){
return(
<h1>Hello World</h1>
);
}
}ReactDOM.render(<App />, document.getElementById("root"))
・index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./dist/app.js"></script>
</body>
react と react-dom のインストール
下記コマンドを実行して、react と react-dom をインストールします。
$ npm install react react-dom
WebPack のインストール
下記コマンドを実行して、WebPack 関連のツールをインストールします。
$ npm install webpack webpack-dev-server --save-dev
Babel のインストール
下記コマンドを実行して、Babel 関連のツールをインストールします。
$ npm install babel-cli babel-loader babel-preset-env babel-preset-react babel-preset-es2015 --save-dev
その後、.babelrc ファイルを作成します。
{"presets": ["react", “es2015"]}
引き続き、WebPack が Babel を使用できるように、webpack.config.js ファイルを作成します。
module.exports = {
entry: './app.js',
output: {
path: __dirname + ‘/dist',
filename: 'app.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
}
次に、package.json に以下の行を追加します。カンマで構文が崩れないよう注意してください。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --hot --inline"
}
これで、npm run build でビルドができ、npm run start で Webサーバーが起動します。サーバーは http://localhost:8080 でアクセスします。
より細かい設定は書籍を参照してみてください。
スポンサーリンク
Twitter ではブログにはない、いろんな情報を発信しています。
@fnyaさんをフォロー
コメント