React - 資料驅動建立版型

Chia Pin #

2024/10/18閱讀時間約 10 分鐘

此筆記僅以個人理解方式記錄

環境準備

我們這邊以 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 />);