React 六角學院-學習筆記(認識React)

#react #六角學院

willy718066 2023-09-09 20:52:40 ‧ 628 瀏覽

分享至

以下為個人學習筆記如有錯誤還請不吝指教感謝您的閱讀

為什麼要學習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"> //這裡寫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 取代

將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="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>

陳述式與表達式(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>