今天來到第 19 天，
預計 Codecademy 學習文系列會在這幾天結束，
先直接進入正題吧~~~
再附上一次 React 的連結：https://www.codecademy.com/learn/react-101
昨天的文章講了 JSX 的基礎後，
今天進入 JSX 的進階語法。
原來這是 JSX 的寫法XD
我之前一直以為是 React 的專屬寫法(某種層面來說可能沒有錯?)
在 Codecademy 有解釋用 className 而非 class 的原因是，
因為 JSX 會被轉譯成 JavaScript，
而 class 是 JavaScript 的保留字，
所以總之看起來意思是避免到時候重複出錯之類的?
我們常見的 Self-Closing Tags 有 <br />、<img /> 等，
而我自己之前在寫的時候有一種情況我也會使用到 Self-Closing Tags，
我用 <div> 寫了一個區塊，
可是它不包含任何內容只有 attribute 的時候我也寫過 Self-Closing Tags，
像這樣：
<div
className={...}
key={`...`}
style={...}
/>
用 {} 包起來的字串會被當成 JavaScript 進行處理，
因此如果沒有加大括號，2 + 3 只會被當成普通的字串處理，
像這樣：
<h1>2 + 3</h1>
可是加了大括號{}，它就會把{}裡面的內容當成 JavaScript 進行計算，
因此就可以回傳出 5，
像這樣：
<h1>{2 + 3}</h1>
這邊是在說例如你前面宣告了一個變數，後面就可以用 {變數} 的方式去使用它。
例如：
const name = 'Ado';
... (略)
<h1>My name is {name}.</h1>
上面是字串的情況，
當然也可以使用在屬性(Attributes)的情況囉！
例如：
const sideLength = "200px";
... (略)
<img
src="images/panda.jpg"
height={sideLength}
width={sideLength} />
如同之前我 Day14 文章有介紹到的 onClick，
原來這也是 JSX 的寫法！
而當然 onClick 之後要執行什麼函數也可以用到上面介紹的大括號{ }來做取用，
像這樣：
function myFunc() {
...(略)
}
...(略)
<img onClick={myFunc} />
這意思就是當 img 被點擊的時候，要執行 myFunc 這個函數。
JSX 可以用的滑鼠事件、鍵盤事件... 等，可以參考 → Supported Events
原來我之前文章用到 x ? y : z 的寫法也是 JSX 來的！
{!isShow ? (
<>
<div className="px-2 d-flex justify-content-between">
... (略)
</div>
<div className="px-4 d-flex justify-content-around">
... (略)
</div>
</>
) : (
<img ... (略) />
)}
關於三元運算子還想知道更多可以參考大大的這篇文章→ Ternary Operator(三元運算子)
其實這跟上面的三元運算子有點像，
只是它適合用在只有要做一個動作，
之後沒有要做任何事就很方便，
用法是
{ 條件式 && 要做的事 }
翻譯成 if else 應該會長像這樣：
if (條件式) {
要做的事
}
再翻譯成之前的三元運算子會長這樣：
{ 條件式 ? (
要做的事
): null}
你看在 if else 跟三元運算子都至少要寫三行才能完成的事，
可是用 && 只需要一行就可以完成!!!!!!!!!
例如：
...(略)
const choosePeople = (
<div>
{ judgmental && <h1>Ado</h1> }
{ !judgmental && <h1>Bot</h1> }
{ judgmental && <h1>Cat</h1> }
<h1>Dog</h1>
</div>
)
ReactDOM.render(
choosePeople,
document.getElementById('app')
);
這個是我之前看不懂的語法!!!!!!!!
現在懂了!!!!!!!!!(歡呼)
這個也是在 React (JSX) 很常使用到的方法呢，
簡單來說是可以將宣告的陣列再一個一個用變數的方式取用出來，
用法是
陣列.map((變數名稱) =>
要做的事
);
例如：
... (略)
const people = ['Rowe', 'Prevost', 'Gare'];
const peopleLis = people.map((person) =>
<li>{person}</li>
);
... (略)
)
原本我們在 if else 還要搭配 for 迴圈才寫得出來：
const people = ['Rowe', 'Prevost', 'Gare'];
for (let i=0; i<people.length; i++){
<li>people[i]</li>
}
但這邊用 陣列.map(變數) 就做到 for (let i=0; i<people.length; i++) 這樣的事了！
然後 Codecademy 開始介紹 component class 的用法，
先給大家看範例：
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponentClass extends React.Component {
render() {
return <h1>Hello world</h1>;
}
};
ReactDOM.render(
<MyComponentClass />,
document.getElementById('app')
);
這就是我之前一直看不懂的寫法!!!!!!!!
因為我之前習慣的寫法是：
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import { Spinner } from "reactstrap";
import "./styles.css";
const Report = () => {
... (略)
const [text, setText] = useState(shortText);
const [isShow, setIsShow] = useState(false);
useEffect(() => {
... (略)
});
return (
<>
<div className="container px-4 mt-2">
... (略)
</div>
<div className="m-4">
... (略)
</div>
</>
);
}
export default Report;
然後邊學的過程我就一直在想說到底 class 的寫法是怎麼來的，
除了要囉嗦的寫 class X extends React.Component 以外，
後面還要 ReactDOM.render，
這不是有點麻煩嗎(?
然後就找到有大大在之前鐵人賽的文章有分享關於 React 有 3 種 Component 的寫法：
Day 14, React components 各種寫Component的方法
原來我最常用的就是 stateless component 寫法！
除了寫法上比較簡單以外，
據說這個寫法也是 performance 比較好的寫法。
不過經過這次我終於看得懂 class 的寫法了，
以往我只要看到 React 的這種寫法範例我就會直接跳過不看XD
現在已經看懂了，所以我以後會乖乖看的XD
總之今天的學習對我來說收穫也是滿多的！
今日收穫 summary：
&& 的用法extends React.Component 的用法本來還想再寫一些 Component 的學習筆記，
但今天文章篇幅應該夠了(?
所以就先寫到這XD
到今天我好像都還沒講到 Next.js 齁XD
放心大家不要心急，
準備在收官階段時就讓它登場亮相，
前面還是要先把基礎打起來XD
祝大家中秋節快樂~~~~~
那我們明天再見啦~~~~~
iThome鐵人賽
看影片追技術