ReactのCSSについて考えて見る。と言っても、ウェブサイトをたくさん書いた経験もない初心者目線です。
Bootstrapについて
とりあえず、Bootstrapをベースにしたい。あまり慣れていないのでクセがないのがいい。ライブラリは慣れてから使う。webpackで取り込んでおきたい。
参考:
- Webpack+React+BootstrapでWebアプリ – くらげになりたい。
- The Ody Brothers: How to Use Bootstrap (CSS only) and 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が適用できた！
個別のCSS適用はinlineで書く
基本的にはinlineがいい。でも全体に当てるCSS（H1とかbodyとかに最初から付いているCSSを除外するのとか）とかどういう風に考えてやればいいのかなとか考えながらメモとして書いておきます。
せっかくComponents単位なのでCSSはコンポーネントでinlineで書きたい。グローバルなCSSには慣れていない。
参考:
