Reactを書く環境作りのメモをしておきます。これ、ほぼReact素人の僕が書くのであまり参考にしないほうが良いかもしれないです。
Reactのチュートリアルをもう一回やってみた（ESLint & Webpack） – Morizotter Blog を参考にしてみたのだが、情報が古くなっているところもあるのでメモしておく。
React
とりあえずReactを入れる。
$ npm init $ npm install --save react react-dom
Eslint
Eslintも入れて設定する。
$ npm install eslint --save-dev $ eslint --init
aslant --initで対話形式で設定を聞かれる。僕が選んだのは下記の選択肢。
- Use a popular style guide
- AirBnB
- JSON
すると、下記のファイルが生成される。
.eslintrc.json
{
"extends": "airbnb",
"plugins": [
"react"
]
}
とりあえずこれでよし。
Webpack
このやり方が今も有効かわからないけどとりあえず動いた。
$ npm install --save-dev webpack babel-loader babel-core babel-preset-react babel-preset-es2015
webpack.config.jsは前回試行錯誤してできたものをそのまま使う。
module.exports = {
entry: __dirname + "/src/app.js",
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: "babel",
query:{
presets: ['react', 'es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};
簡易サーバーと変更監視
$ npm install lite-server concurrently --save-dev
lite-serverとconcurrentlyをインストールする。webpackでjsの変更を監視しつつ、変更があったら簡易サーバーで立ち上げたページが自動更新するというようにするために、package.jsonのscriptを編集する。
"scripts": {
"webpack": "webpack -w",
"lite": "lite-server --verbose --open dist",
"start": "concurrent \"npm run webpack\" \"npm run lite\""
},
とりあえず準備はこれでよし。
表示してみる
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
ReactDOM.render(
<Main />,
document.getElementById('app')
);
Main.js
import React from 'react';
export default function Main() {
return (
<div className="main">
<p>header</p>
</div>
);
}
npm startするとmainという文字が画面に表示される。
