参考
まんまです。ありがとうございますm()m
https://qiita.com/NShimpei/items/f3962353677dff00b7e6
手順
サンプル用のReactアプリを用意
|
1 |
npx create-react-app bootstrap-test-project |
|
1 |
cd bootstrap-test-project/ |
bootstrap用モジュールのインストール
|
1 |
npm install react-bootstrap bootstrap |
linkタグでbootstrapの設定諸々を読み込む
public/index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="cp"><!DOCTYPE html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> <span class="nt"><head></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"%PUBLIC_URL%/favicon.ico"</span> <span class="nt">/></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap. min.css"</span><span class="err">アクセス</span> <span class="na">integrity=</span><span class="s">"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY /iJTQUOhcWr7x9JvoRxT2MZw1T"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span> <span class="nt">/></span> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span> <span class="nt">/></span> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"theme-color"</span> <span class="na">content=</span><span class="s">"#000000"</span> <span class="nt">/></span> |
追記する箇所アクセスアクセス
|
1 2 3 4 5 6 7 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">Button</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-bootstrap/Button</span><span class="dl">'</span><span class="p">;</span> <span class="kd">class</span> <span class="nx">App</span> <span class="kd">extends</span> <span class="nx">Component</span> <span class="p">{</span> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p">(</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span> <span class="o"><</span><span class="nx">Button</span><span class="o">></span> <span class="err">ボタンだよ</span> <span class="o"><</span><span class="sr">/Button</span><span class="err">> </span> <span class="o"><</span><span class="sr">/div</span><span class="err">> </span> <span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span> |
起動
|
1 |
npm start |
動作確認
localhost:3000へアクセス
