以下為個人學習筆記 如有錯誤 還請不吝指教 感謝您的閱讀
為什麼要學習React?
讓JS管理資料，畫面由Jsx處理 資料跟畫面分開管理
有重複的地方可以做成元件 減少重複的程式碼(網上的參考元件也不少)
https://zh-hant.legacy.reactjs.org/docs/cdn-links.html
通過 CDN 載入 React 和 React DOM。(head or body都可生效)
這邊放在head
willy718066
<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>
https://zh-hant.legacy.reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx
載入Jsx cdn<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<body>
要在html中運行Jsx 需在script中加入 type="text/babel"
ex:
<script type="text/babel"> //這裡寫Jsx
console.log(React, ReactDOM) //檢查是否正確載入
</script>
但這個方法會影響效能 線上版一般會使用 npm 設定JSX preprocessor
接著在 <script type="text/babel">上方加入<div id="root"></div>
//放入元件
<script type="text/babel">
function App() {
return (
<div>
<h1>Hi, React</h1>
</div>
);
}
//渲染至root上
const el = document.getElementById("root");
const root = ReactDOM.createRoot(el);
root.render(<App />);
以上可在terminal npm create vite@latest 取代
https://bootstrap5.hexschool.com/docs/5.1/components/card/
將bs的元件card 貼到App元件的 <div> </div> 中 (替換 <h1>Hi, React</h1>) src可至unsplash找圖
<div class="card" style="width: 18rem">
<img
src="https://cdn.ftvnews.com.tw/manasystem/FileData/News/657a0874-5773-4926-85bc-bd3005714d46.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">
Go somewhere
</a>
</div>
</div>
記得將class改為className 刪除style 即可成功渲染
可替換的部分抽出來變成資料 ex:
const data = {
imgSrc:
"https://plus.unsplash.com/premium_photo-1693155671457-e97a909b5fc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
title: "Card title",
content:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
link: "https://google.com",
};
(以{}將資料放入結構中即可渲染畫面)
<div className="card">
<img src={data.imgSrc} 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">
Go somewhere
</a>
</div>
</div>
不可用if...else 以三元運算子代替
let b;
if ((a = 1)) {
b = 1;
} else if ((a = 2)) {
b = 2;
} else {
b = 0;
}
須改為a = 1 ? (b = 1) : (a = 2 ? (b = 2) : (b = 0));
才能用於React中
實際應用 若使data.title = ""
可用 {data.title === "" ? (data.title = "123") : data.title} 改寫標題
1.呈上，直接用{data}無法渲染出畫面 //Jsx無法呈現物件
但{data.title} 可以 => 可用{JSON.stringify(data)}
2.{[1,2,3] <div>test</div>} 畫面直接出現123(無逗號且下一行有test)
https://bootstrap5.hexschool.com/docs/5.1/components/list-group/
使用ul li範例 可將li改為陣列 方便儲存資料
const list = [
<li className="list-group-item">An item</li>,
<li className="list-group-item">A second item</li>,
<li className="list-group-item">A third item</li>,
<li className="list-group-item">A fourth item</li>,
<li className="list-group-item">And a fifth one</li>,
];
return <ul className="list-group">{list}</ul>
class => className
checked => defaultChecked
value => defaultValue
(label) for => htmlFor
selected => 父層defaultValue
需寫成物件(; => ,)style = { {color: red}, {background-color: yellow} }
並且屬性要去除dash符號(改成小駝峰命名)background-color => backgroundColor
iThome鐵人賽
看影片追技術