More than 3 years have passed since last update.

フロント童貞がReactでBootstrapを使う

React

Posted at 2020-08-14

参考

まんまです。ありがとうございますm()m
https://qiita.com/NShimpei/items/f3962353677dff00b7e6

手順

サンプル用のReactアプリを用意

npx create-react-app bootstrap-test-project

cd bootstrap-test-project/

bootstrap用モジュールのインストール

npm install react-bootstrap bootstrap

linkタグでbootstrapの設定諸々を読み込む

public/index.html

<!DOCTYPE html>                                                                             
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"アクセス
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"      crossorigin="anonymous"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

追記する箇所アクセスアクセス

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"      crossorigin="anonymous"
    />

App.jsに利用するタグ？てきなものを書く

src/App.js

import React, { Component } from 'react';                                                   
import Button from 'react-bootstrap/Button';

class App extends Component {
    render() {
        return (
            <div>
                <Button> ボタンだよ </Button>
            </div>
        );
    }   
}
export default App;

起動

npm start

動作確認

localhost:3000へアクセス

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up