BootstrapをWebpackでロードしてReactで自然に使う

March 26, 2016

React の CSS について考えて見る。と言っても、ウェブサイトをたくさん書いた経験もない初心者目線です。

Bootstrap について

とりあえず、Bootstrap をベースにしたい。あまり慣れていないのでクセがないのがいい。ライブラリは慣れてから使う。webpack で取り込んでおきたい。

参考:

基本的に上記二つの組み合わせで書いた。

今回追加した構成

ベースの構成（ React を書く環境作り（僕） – Morizotter Blog ）に下記の処理を追加することで Bootstrap をベースに CSS を組み立てることができるようにした。

$ npm install --save bootstrap
$ npm install --save-dev url-loader css-loader style-loader file-loader

webpack の部分は細切れだとわかりにくいので全部貼る。

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'\],
  },
};

利用時は require する。大元に App.js があって、別のファイルにある Main.js を読み込んでいる。Main.js には require は書いていない。

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

Main.js にテストのために書いたボタンに bootstrap の CSS が適用できた！

スクリーンショット 2016 03 26 20 11 57

個別の CSS 適用は inline で書く

基本的には inline がいい。でも全体に当てる CSS（H1 とか body とかに最初から付いている CSS を除外するのとか）とかどういう風に考えてやればいいのかなとか考えながらメモとして書いておきます。

せっかく Components 単位なので CSS はコンポーネントで inline で書きたい。グローバルな CSS には慣れていない。

参考: