對，就在我昨天不知所云的寫完 for ... of 之後，我順便把剩下的ES6課程讀完了（其實這個連假有空我都使用 Sololearn App 在複習）。
ES6大部分都是新增不同的寫法讓開發更容易（可能因為jS忘得很多，現在我感覺不太出來容易在哪...），但由於時間因素，我決定開始React的學習，以避免之後做不出作品，也許之後還是會不時地補充一些jS基礎喔。
學習React，絕對不止是因為學它工作機會比較多或酷炫狂霸跩，不然我也很想jQuery再戰十年（為什麼會提到jQuery，因為絕大部份的網頁設計師都是使用jQuery在切版，至少我是）。
但我們說好了要轉成前端工程師對吧！
跳出舒適圈很痛苦，但不管是否血淚都要繼續走，唯有如此才能成長。
所以我們要開始學習網路的基本概念，了解網路是如何運作的，網頁怎麼載入與呈現，這些都是當務之急喔。
關於React的背景我就不贅述了，因為隨便Google一下都有，所以跟著Sololearn的腳步開始吧。
也可以跟隨官方網站教學喔，我的選擇只是因為可以在手機上隨時方便閱讀而已
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin>
</script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('container')
)
</script>
</body>
</html>
照著上面的程式碼寫，就可以輸出一個 h1 標籤且包含“Hello, React!”等字樣在div#container中。
感覺上跟jS的寫法是不是差不多。
注意，React要安裝在head中喔
不過下一步要安裝Node.js，因為我們不是只有要單純的使用它來寫單純的網頁，而是為了比較大或複雜的專案中使用（根據我目前讀完它的介紹，理解是這樣的），所以，接著要打開終端機，對，就是好酷又好炫的那個純文字介面。
然後輸入下列指令
npx create-react-app my-app （這裡的my-app就是會新增的專案資料夾名稱喔！）
它會開始進行一連串的安裝跟下載過程，可以趁機休息一下。
等安裝完成時，再執行
cd my-app (意思是，移動到my-app這個資料夾)
再執行
npm start
然後就會在本地端看到 http://localhost:3000/ 的網址被執行（ MacBook Pro會詢問是否同意終端機可操作Chrome，請一律同意）。
接著我們的專案就會在Chrome中打開並顯示如下畫面：
接著也可以在本機中找到my-app這個資料夾（所以如果開不同的專案，要記得指定不同的命名唷），裡面已經把React專案的結構全都建立完成了 (專業的說法是部署嗎？）。
相關文章：
React 與 Vue — 有了 jQuery 為什麼要有xxx？
【React.js入門 - 01】 前言 & 環境設置(上)
iThome鐵人賽
看影片追技術