以下將透過
codepen並使用cdn來在線上直接創建出React環境，步驟非常簡單，那我們直接開始吧
![]()
進入codepen後點擊setting
接著會跳出設定頁面選取左側JS，在JavaScript Preprocessor選取Babel
在Search CDNjs的地方鍵入react等關鍵字就會自動搜尋
點擊匯入react和react-dom，畫面應該會如下圖，確認無誤後即可關閉設定
以上成功引入了React進專案，就只差正確的操作了!
在HTML欄位建立id為root的div tag (有內建Emmet可以直接#root再按tab快速創建喔!!)
是不是很簡單呀!
透過創建出來的簡易環境就可以盡情測試React的各種功能，就會越來越熟悉這個框架和其理念囉
![]()
![]()
ps. 若要使用Hook等功能記得要使用相對應library名稱，如:React.useState
懶人包如下:
HTML:
<div id="root"></div>
JS:
function Root() {
return (
<>
</>
)
}
ReactDOM.render(<Root />, document.getElementById('root'));
創作內容
快速創建React測試環境 (已無效)
未分類 (20)