用户投稿以下为个人学习笔记 如有错误 还请不吝指教 感谢您的阅读
为什么要学习React?
让JS管理资料，画面由Jsx处理 资料跟画面分开管理
有重複的地方可以做成元件 减少重複的程式码(网上的参考元件也不少)
认识React-载入React, Babel
https://zh-hant.legacy.reactjs.org/docs/cdn-links.html
通过 CDN 载入 React 和 React DOM。(head or body都可生效)
这边放在head
<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"> //这里写Jsxconsole.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 取代
将html结构转为React
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="http://img2.58codes.com/2024/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>陈述式与表达式(React中只能使用表达式)
不可用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} 改写标题
JS型别与JSX
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>HTML标籤转为Jsx标籤
class => className
checked => defaultChecked
value => defaultValue
(label) for => htmlFor
selected => 父层defaultValue
React中的style
需写成物件(; => ,)style = { {color: red}, {background-color: yellow} }
并且属性要去除dash符号(改成小驼峰命名)background-color => backgroundColor
微信扫一扫打赏
支付宝扫一扫打赏
