创建一个React入门hello-react案例

最新推荐文章于 2024-07-16 14:30:20 发布

向阳菌

最新推荐文章于 2024-07-16 14:30:20 发布

阅读量88

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_68997646/article/details/127419221

版权

1.首先来分析一下以下这几个依赖包的相关功能

A.babel文件：有两个重要的功能，一个是ES6==>ES5,一个是isx==>js. 就是起着一个转化代码的功能

B.react.development ：这个是react的核心库

C.react-dom.development: 这个是react帮你操作DOM的库

2.代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <!-- 引入核心库，记得要放在react-dom前面，因为先有核心库，才能创建好环境引入其他依赖包 -->
    <script src="./react.development.js"></script>
    <!-- 引入react帮你操作DOM的库 -->
    <script src="./react-dom.development.js"></script>
    <!-- 将jsx转化为js -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">   //在这里一定要写成是babel
        const VDOM=<h1>hello-react</h1>
        ReactDOM.render(VDOM,document.getElementById('root'))
    </script>
</body>
</html>