如何在HTML中使用React

 

突发奇想

查了查真的可以,官方文档: 在网站中添加 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