React 的 JavaScript 檔案為什麼要放在 HTML 的 body 裡?
Published in
2 min readJul 7, 2017
在 HTML 的世界，有 head 與 body，大概會長得像這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
</head>
<body></body>
</html>
以前的 Web 設計
剛開始學 Web 的時候，總是會說把 CSS、JavaScript 的檔案放在 head 裡面，這有甚麼好處？
- 在 HTML 渲染之前，我們就已經拿到 CSS 與 JavaScript 檔案，避免使用者看到沒有被 CSS 美化過的頁面
- 但如果我們是用 jQuery，要做一些 DOM 操作，我們會使用 document.ready 來避免「HTML 還沒渲染完畢，但 JavaScript 就要操作 DOM 元件」的錯誤
- 看起來很舒服？(可能是 CSS 與 JavaScript 檔案都在 head，HTML 都在 body 的關係吧…)
React 的世界
在 React 的世界，我們會把「打包(bundle)過的 JavaScript 檔案」放在 body 的最後一個元素，大概會像這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
</head>
<body>
<div id='app'></div>
<script src="./assets/app.js"></script>
</body>
</html>原因
主要是，ReactDOM 會去拿 id=’app’ 這個元素來 render 畫面，如果在這個元素產生前，ReactDOM 就去拿這個元素，那麼就有錯誤發生拉！
