NEW ARTICLE
Rubyのメタプログラミングを極める：コードを自在に操る技術
  1. HOME
  2. React
  3. React.js reactstrapを使ってbootstrap4を導入する

React.js reactstrapを使ってbootstrap4を導入する

React.js reactstrapを使ってbootstrap4を導入する

reactstrapをインストールして、bootstrap4を利用するまでの簡単な手順と使い方を記述してます。

目次

環境

  • OS  Ubuntu19.10
  • node v12.13.0
  • npm 6.13.7
  • React 16.12.0

React環境構築

下記のコマンドで構築。今回は、reactappという名前でプロジェクトを作成してます。 

create-react-app reactapp

reactstrapインストール

下記の手順でインストールします。

 npm i -S bootstrap reactstrap react react-dom

reactstrap使い方

今回はbuttonを利用してみます。

srcディレクトリ配下のApp.jsを下記のように編集します。

import React from 'react';
import { Button } from 'reactstrap';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>        
        <Button color="info">Learn React</Button>
      </header>
    </div>
  );
}
export default App;

起動する

yarn start

ブラウザから http://プライベートIP:3000 に アクセスするとbuttonが利用できていることが確認できます。