?

突發奇想

查了查真的可以,官方文檔:?在網站中添加 React – React

開始

引入js

    <!-- 開發環境使用  --><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><!-- Don't use this in production: --><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

這個js分開發板和生產版

• 開發環境為了能正常 debug調試, 源映射，具有熱重載功能, (提高編譯和重新編譯速度,不會配置代碼壓縮，CSS 拆分, 代碼壓縮是很耗時的)
• Babel 是一個 JavaScript 編譯器, 負責把 JavaScript 高級語法、轉換為低規范以保障能夠在低版本的環境下正常執行

生產版本如下

    <!-- 生產環境使用  --><script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

Hello, world!

<div id="root"></div>
<script type="text/babel">function MyApp() {return <h1>Hello, world!</h1>;}const container = document.getElementById('root');const root = ReactDOM.createRoot(container);root.render(<MyApp />);</script>

點擊html運行

最后

代碼已附, 也可以官網下載, 引用文件底部官方的話, 這個頁面是嘗試React的好方法，但它不適合生產, 它在瀏覽器中緩慢地用Babel編譯JSX，并使用React的大型開發構建。

閱讀此頁面，了解如何使用JSX啟動新的React項目：
https://react.dev/learn/start-a-new-react-project