此筆記僅以個人理解方式記錄
環境準備
我們這邊以 Bootstrap 5 的卡片元件來展示，要準備的有：
- Bootstrap 5 CDN
- Card(卡片) template
- React CDN
React
React 起手式，引用 CDN、綁定 root、指定渲染 dom。
<!-- 第一 載入 React / babel -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 第二 設定 text/babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
// 建立 React App 元件
function App(params) {
return <h1>React 哈囉 ~</h1>
}
// 渲染 React 元件
const dom = document.getElementById('root');
const root = ReactDOM.createRoot(dom);
root.render(<App />);
</script>
Bootstrap 5
引用 CDN、獲取 Card 模板、
// CSS
// 將樣式表 <link> 複製-貼上到 <head> 中其他所有的樣式表之前，以便載入 Bootstrap 的CSS
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
// JS
// 我們的許多元件需要使用 JavaScript 才能運行。具體來說，他們需要我們自己的 JavaScript 插件和 Popper。在 </body> 結尾標籤前、頁面的末尾放置 以下 <script> 以啟用它們。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
// Bundle
// 使用我們兩個 bundle 中的其中一個來嵌入所有的 Bootstrap JavaScript 插件。
// bootstrap.bundle.js 和 bootstrap.bundle.min.js 都包含了 Popper 以使用我們的工具提示 (Tooltips) 和彈出提示框 (Popovers)。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
// 分離 (Separate)
// 如果決定使用分離的腳本作為解決方案，則需要先放入 Popper (如果你使用工具提示或是彈出提示框)，
// 然後再放入我們的 JavaScript 插件。
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ" crossorigin="anonymous"></script>
<div className="card" style={{ width: '18rem' }}>
<img src={data.imageUrl} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{data.title}</h5>
<p className="card-text">{data.content}</p>
<a href={data.link} className="btn btn-primary">卡片連結</a>
</div>
</div>
其餘更詳細介紹飲用及元件，可至 六角學院翻譯 查閱
組合起來
<!-- 🔥🔥練習開始🔥🔥 -->
<div id="root"></div>
<!-- template：https://getbootstrap.com/docs/5.2/components/card/ -->
<script type="text/babel">
function App(params) {
const data = {
imageUrl: "https://plus.unsplash.com/premium_photo-1714051661301-860c930a2c85?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
title: "card title",
content: "卡片內容",
link: "https://www.google.com.tw/"
};
return (
<div className="card" style={{ width: '500px' }}>
<img src={data.imageUrl} style={{ width: '100%' }} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{data.title}</h5>
<p className="card-text">{data.content}</p>
<a href={data.link} className="btn btn-primary">卡片連結</a>
</div>
</div>)
}
const el = document.getElementById('root');
const root = ReactDOM.createRoot(el);
root.render(<App />);
由於被 React 監控了，當然黨照著它的規矩走，我們得佐以下更改
- root.render(<App />); 要有 / 結尾
- class -> className
- style -> { 屬性 } 包裹住
結尾
這樣就從環境引用 -> 版型建立 -> 組合，有成功渲染就表示成功了哦，如果失敗就要注意上面所提到的 React 規則、檢查資源、語法結構等等...。本篇就到此結束，祝各位學習順利 ~~~
-joker
-2024/10/19
