先日書いた「Reactを書く環境作り（僕） – Morizotter Blog」に新たに今日書いた「BootstrapをWebpackでロードしてReactで自然に使う – Morizotter Blog」を加えてまとめたものとして書いておきます。
React
とりあえずReactを入れる。
$ npm init $ npm install --save react react-dom
Eslint
Eslintも入れて設定する。
$ npm install eslint --save-dev $ eslint --init
eslint --initで対話形式で設定を聞かれる。僕が選んだのは下記の選択肢。
- Use a popular style guide
- AirBnB
- JSON
すると、下記のファイルが生成される。
.eslintrc.json
{
"extends": "airbnb",
"plugins": [
"react"
]
}
とりあえずこれでよし。
Webpack
BabelとWebpackとBootstrapを入れる
$ npm install --save bootstrap $ npm install --save-dev babel-core babel-preset-react babel-preset-es2015 $ npm install --save-dev webpack babel-loader url-loader css-loader style-loader file-loader
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'],
},
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
{ test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000' },
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream',
},
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
],
},
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 './Components/Main/Main';
require('../node_modules/bootstrap/dist/css/bootstrap.css');
function App() {
return <Main />;
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
Main.js
import React from 'react';
class Main extends React.Component {
static methodsAreOk() {
return true;
}
render() {
return (
<div>
<button
type="button"
data-loading-text="Loading..."
className="btn btn-primary"
autoComplete="off"
>
Button
</button>
</div>
);
}
}
export default Main;
npm startするとBootstrapで装飾されたButtonが画面に表示される。
