reactJS - 01初识

最新推荐文章于 2026-06-16 08:52:42 发布

原创最新推荐文章于 2026-06-16 08:52:42 发布 · 474 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML5 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一个简单的ReactJS应用实例，展示了如何使用Babel在浏览器环境中直接运行React代码，包括引入必要的库文件、设置HTML结构及JavaScript脚本部分。

reactJS文件包：
这里写图片描述

写个示例：

<!DOCTYPE html>
<html>
<head>
    <title>初始</title>
    <meta charset="utf-8">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
    <div id="demo"></div>

    <script type="text/babel"> 
        ReactDOM.render(
            <h1>Hello,world</h1>,
            document.getElementById('demo')
        );
    </script>
</body>
</html>

浏览器效果：
这里写图片描述

看代码，我们用 <script type="text/babel"> 标签，然后通过Babel转换成在浏览器中真正执行的内容。
上例是用 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 来进行”翻译”的。