嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！
未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列
如果想要快速查找其他文章請點選目錄
成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。
前一篇文章介紹了JavaScript函式概念
而這一篇總算進入了React的世界，在這篇文章中，會講解
在回答這一個問題，不妨思考一個問題，為何我們需要使用前端框架？在網頁開發領域來說，前端框架確實是現代才有的工具，而不管是哪一個技術或是工具都是為了解決某個問題而被開發出來的。在舊有的網頁，HTML、CSS甚至只需要一些些的JavaScript就可以完成一個靜態頁面。
然而隨著科技越來越發達，越來越多人使用網路後，網頁功能也越來越複雜，無論是會員註冊、登入、地圖功能、論壇發文留言功能...等等，早已不是一個簡單的網頁，就可以解決的。
因此開始有了前端工程師以及後端工程師，前端工程師負責UI \ UX、視覺化介面、資料與狀態視覺化...等等。後端工程師負責資料處理、資料庫操作、伺服器管理、API開發...等等。
也因為頁面越來越複雜，不再是使用JavaScript或是Jquery就有辦法處理各種複雜的前端狀態，因此有了框架的誕生。
React、Vue、Angular 則是為了處理複雜的前端狀態而被發展出來的。
React 可以透過其內建的函式，創建出各種HTML的DOM（Document Object Model），因此我們先來複習一下基本的HTML語法。
<body>
<h1>Hello World</h1>
<ul>
<li>dog</li>
<li>cat</li>
</ul>
</body>
由上面的HTML的結構可以知道HTML元素監視以樹狀結構相連的，且有一個根元素（root element）有兩個子元素（child element），第一個子元素為 h1，第二個子元素為ul，並且如果端看ul清單來說的話，ul本身也是一個父元素（parent element），裡面包含了兩個li 的子元素。
我們是透過這些DOM來讓瀏覽器知道我們的頁面長什麼樣子的，因此React的概念也是如此，透過React開發的函數，建立這些元素，再將這些元素組合起來變成一個大型的HTML，並且顯示頁面。
當我們在創建一個元素後，我們需要將創建完成的DOM呈現在頁面中，我們稱這個動作為渲染（Render）。我們可以使用ReactDOM內建的render將我們已創建的React元素渲染（Render）至瀏覽器中。
const dish = React.createElement("h1", "Hello World")
ReactDOM.render(dish, document.getElementById("root"))
透過以上的JavaScript程式碼，會先建立一個HTML元素如下
<div id="root">
<h1>Hello World</h1>
</div>
並且將這個元素傳入HTML裡面。
當然上面是單一比較簡單的DOM，這邊也提供一個ReactDOM中render list方式建立的的HTML範例
const hello = React.createElement("h1", "Hello")
const world = React.createElement("h1", "World")
ReactDOM.render([hello, world], document.getElementById("root"))
這一篇正式進入了React世界，講解了React運行的原理，包含是如何透過JavaScript產生HTML DOM，變成一個頁面的。
如果有任何建議與疑問也歡迎留言！
如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～
iThome鐵人賽
看影片追技術