建立 React 環境

筆記僅以個人理解的方式記錄

環境準備 - CDN

// 通過 CDN 載入 React 和 React DOM。
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

// 以上的版本只適用於開發環境，並不適合用於線上環境。
// 你可以在以下找到已壓縮和最佳化的 React 線上版本：
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

//設定引用 JSX 
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

請更改版本號碼 18 來載入指定版本的 react 和 react-dom。

為什麼要使用 crossorigin Attribute?

如果你通過 CDN 載入 React，我們建議你保留 crossorigin 的設定：

<script crossorigin src="..."></script>

檢查是否成功引用資源

<script type="text/babel">
	console.log(React, ReactDOM);
</script>

加入 root 元素

<div id="root"></div>

<script type="text/babel">
	console.log(React, ReactDOM);
	
	// 建立元件
	function App(){
		return <h1>React Index</h1>
	}
</script>

渲染畫面

// 第五 渲染 React 元件
const dom = document.getElementById('root');
const root = ReactDOM.createRoot(dom);

root.render(<App />);

那麼本篇的紀錄就告一段落了哦

筆者會慢慢更新的(不要被懶惰打敗的話 Q_Q

祝各位學習愉快 ~

-joker

-2024/10/18