在 JavaScript 檔案裡面，想在 ReactDOM.render 裡面引用 CSS 檔案裡的語法就跟之前學到的一樣：
ReactDOM.render(
<h1 class="heading">My Favourite Foods</h1>
);
在這個狀況下，網頁顯示不會有問題，因為 React 有在背後先幫你處理過，不過如果開啟 chrome console 看就會發現有報錯：
Warining: Invalid DOM property
class. Did you meanclassName?
在 JavaScript 裡面，可以讀取所有屬性（Property）的正確語法是 className。所以在這邊改成 className 就可以讓報錯消失了。
不過現在還有另一個報錯：
Uncaught SyntaxError: Unexpected token
<
點進去查看會發現問題出在 JavaScript 檔案裡面的第一行：
原因是瀏覽器不知道這個 JavaScript 檔案其實是一個裡面包含了 HTML 的 elements 的 JSX 檔案，而不是一個標準的 JavaScript 檔案。
如果想要把這個錯誤改掉，可以在 HTML 檔案裡面，把引用的 script 的 類型 從 Javascript 改成 JSX 就可以了：
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/JSX"></script>
</body>
同樣圖片也可以做相同的設定。
在 ReactDOM.render 插入圖片的語法會是這樣：
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-190621-air-fryer-bacon-0035-landscape-pf-1567632709.jpg?crop=0.645xw:0.967xh;0.170xw,0.0204xh&resize=480:*"/>
而我們想用 CSS 來控制圖片大小，我們要先在 CSS 檔案裡面設定好期望的圖片大小：
.food-img {
height: 100px;
width: 100px;
}
接下來再回頭到 ReactDOM.render 插入圖片的語法裡：
<img className="food-img" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-190621-air-fryer-bacon-0035-landscape-pf-1567632709.jpg?crop=0.645xw:0.967xh;0.170xw,0.0204xh&resize=480:*"/>
再來課程介紹了這個網站 https://picsum.photos/ ，他可以用特定網址來產生隨機圖片，也可以設定好圖片想要的大小。
要把上圖網址加入 ReactDOM.render ，第一步是可先用一個變數把網址放好：
const img = "https://picsum.photos/200";
然後到 ReactDOM.render 裡面，放上這個變數：
<img src={img} />
最後是在 SandBox 裡面會看到像這樣的錯誤：
img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. (jsx-a11y/alt-text)
原因是在 <img> 裡面沒有設定好 alt 的屬性（attribute）。
<img
className="food-img"
alt="jamon"
src="https://images-na.ssl-images-amazon.com/images/I/71lNrnbMXsL._SL1200_.jpg"
/>
設定好之後，就不會再報同樣的錯誤了。
iThome鐵人賽
看影片追技術