Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
CDNを使ってHTMlの<head>内にBtootstapのファイルを読み込むことで使うことができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>ReactエレメントでBootstrapを使う
エレメント作成における第二引数にタグの属性を指定しています。
React.createElement(
'h4', {className:'alert alert-primary'},
"React sample page."
),コードの中に<div className=””>と書かれていますがこれはclass属性のことです。
let dom = document.querySelector('#root')
let element = React.createElement(
'div', {}, [
React.createElement(
'h2', {}, "Hello!"
),
React.createElement(
'h4', {className:'alert alert-primary'},
"React sample page."
),
React.createElement(
'ul', {className:'list-group'}, [
React.createElement(
'li', {className:'list-group-item'},
"First item."
),
React.createElement(
'li', {className:'list-group-item'},
"Second item."
),
React.createElement(
'li', {className:'list-group-item'},
"Third item."
),
]
),
])
ReactDOM.render(element, dom) npm install react-bootstrap bootstrap@5.1.3
