筆記僅以個人理解的方式記錄
環境準備 - 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
