Reactを書く環境づくり(春)

Reactを書く環境づくり(春)先日書いた「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-serverconcurrentlyをインストールする。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が画面に表示される。

スタイルガイド

javascript/react at master · airbnb/javascript

Pocket
LINEで送る

You may also like...