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

BootstrapをWebpackでロードしてReactで自然に使う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には慣れていない。

参考:

参考

Pocket
LINEで送る

You may also like...