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が画面に表示される。