React.jsでBootstrap導入する方法

React.js で Bootstrap CSS と JS をインクルードする方法

Bootstrap は、レスポンシブなウェブデザインを簡単に実装するための CSS フレームワークです。React.js アプリケーションに Bootstrap を統合するには、いくつかの方法があります。

CDN (Content Delivery Network) を利用する

最も簡単な方法は、Bootstrap の CDN を使って CSS と JS ファイルを直接リンクすることです。

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Boot   strap JS
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.ren   der(<App />);

npm パッケージを使用する

より柔軟な管理のために、npm パッケージを使用して Bootstrap をインストールすることもできます。

npm install bootstrap

その後、インポートして使用します。

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Boot   strap JS
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.ren   der(<App />);

Webpack を使用してビルドする

Webpack を使用している場合は、Webpack のローダーを使って Bootstrap のファイルを読み込むことができます。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import './styles.css'; // ここで Bootstrap の CSS ファイルをインポート

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

CSS Modules を使用する

よりモジュール化された管理のために、CSS Modules を使用することもできます。

// webpack.config.js
module.exports = {
  // ... other configurations
  module: {
    rules: [
      // ... other rules
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

// Button.module.css
.button {
  // Bootstrap ボタンのスタイル
}

// Button.jsx
import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.butt   on}>ボタン</button>;
};

export default Button;

CDN を利用する

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Boot   strap JS
import 'bootstrap/dist/   js/bootstrap.bundle.min.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• import 'bootstrap/dist/js/bootstrap.bundle.min.js';: Bootstrap の JS ファイルをインポートします。

npm install bootstrap

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Boot   strap JS
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.ren   der(<App />);

• npm install bootstrap: Bootstrap パッケージをインストールします。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import './styles.css'; // ここで Bootstrap の CSS ファイルをインポート

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• Webpack のローダーを使って CSS ファイルを読み込みます。

// webpack.config.js
module.exports = {
  // ... other configurations
  module: {
    rules: [
      // ... other rules
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

// Button.module.css
.button {
  // Bootstrap ボタンのスタイル
}

// Button.jsx
import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.butt   on}>ボタン</button>;
};

export default Button;

• CSS Modules を使用して、スタイルをモジュール化します。

Create React App の組み込み機能を利用する

Create React App を使用している場合は、組み込みの機能を使って Bootstrap を簡単にインクルードすることができます。

npx create-react-app my-app

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.re   nder(<App />);

JavaScript Module Federation を使用する

複数のアプリケーションをマイクロフロントエンドとして開発する場合、JavaScript Module Federation を使用して Bootstrap を共有することができます。

// host-app/webpack.config.js
module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        bootstrap: 'bootstrap@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

// bootstrap-app/webpack.config.js
module.exports = {
  // ... other configurations
  output: {
    publicPath: 'http://localhost:3001/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'bootstrap',
      exposes: {
        './Bootstrap': './src/Bootstrap',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// host-app/src/App.js
import React from 'react';
import { loadRemoteModule } from '@webcomponents/custom-elements/src/loader';

const Bootstrap = loadRemoteModule('bootstrap', './Bootstrap').then(
  (module) => module.default
);

const App = () => {
  return (
    <div>
      <Bootstrap />
    </div>
  );
};

export default App;

CSS-in-JS ライブラリを使用する

Styled Components や Emotion などの CSS-in-JS ライブラリを使用して、Bootstrap のスタイルをインラインで定義することができます。

import styled from 'styled-components';

const Button = styled.button`
  // Bootstrap ボタンのスタイル
`;