[React] 透過CDN建立React環境
TL;DR
來透過CDN建立一個React環境吧！
參考資料
相關連結
- React & ReactDOM CDN Link Reference | CDN資源
- Babel-standalone | Babel獨立運行建置
完整範例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Create With CDN(React&ReactDOM&Babel)</title>
<!-- React CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- ReactDOM CDN -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel/standalone CDN -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!-- 創建掛載點，通常會使用root -->
<div id="root"></div>
<script type="text/babel">
// 檢查是否有透過CDN載入React&ReactDOM
console.log('React', React);
console.log('ReactDOM', ReactDOM);
function App() {
return <h1>Hello React</h1>;
}
const el = document.getElementById('root');
console.log(el);
const root = ReactDOM.createRoot(el);
root.render(<App/>);
</script>
</body>
</html>
步驟
CDN
<!-- React CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- ReactDOM CDN -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel/standalone CDN -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
需要特別注意第三個，因為我們沒有使用vite等開發環境，所以需要加入的是standalone版本的Babel。
caution
可以參考上方相關連結內的React & ReactDOM CDN Link Reference，但是該文件未來不會再更新，所以這邊只是提供當作參考。
確認CDN運作
<script>
console.log('React', React);
console.log('ReactDOM', ReactDOM);
</script>
需要兩個CDN所掛載的物件都正確顯示才可以使用
創建掛載點
通常我們會使用#root當作掛載點的元素
<div id="root"></div>
建立根元件(JSX)
<script type="text/babel">
function App() {
return <h1>Hello React</h1>;
}
</script>
這邊需要注意，我們有在CDN加入Babel。所以這邊需要在script中設定`type="text/babel"，這麼一來我們在撰寫JSX的時候才可以正確被解析。
掛載並渲染
<script type="text/babel">
const el = document.getElementById('root');
console.log(el);
const root = ReactDOM.createRoot(el);
root.render(<App/>);
</script>