React で Bootstrap を利用してみます。
React Bootstrap というものがあり、これは Bootstrap を React でJSXで使用する為のライブラリです。
今回は React Bootstrap を使用してみます。
インストール
プロジェクトディレクトリで以下のコマンドを実行します。
npm install react-bootstrap bootstrapセッティング
cssの読み込み
cssを読み込みます。どこに記載するかは以降の例を参考にして下さい。
import 'bootstrap/dist/css/bootstrap.min.css';コンポーネントの読み込み
使用したいBootstrapのコンポーネントを読み込みます。以下はボタンコンポーネントを読み込む例になります。どこに記載するかは以降の例を参考にして下さい。
import { Button } from 'react-bootstrap';例
ボタン
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';
function App() {
return (
<>
<Button variant="primary">Button</Button>
</>
);
}
export default App;
最後に
特にありません。