react 写的第一个项目

最新推荐文章于 2023-12-26 21:49:12 发布

小主早安

最新推荐文章于 2023-12-26 21:49:12 发布

阅读量118

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/xiaoxiamimm/article/details/112886039

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客展示了如何在HTML文件中引入React库，并利用React的createElement方法创建虚拟DOM节点，然后将其渲染到页面指定的div元素中。通过示例代码，解释了如何进行大小写转换操作，并对比了使用jsx语法创建虚拟DOM的方式。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript">
    const msg = "I Like You"
    const myId = "Atguigu"

    //1.创建虚拟DOM
    const vDom1 = React.createElement('h2', {id: myId.toLowerCase()}, msg.toUpperCase())
    //2.渲染虚拟DOM
    ReactDOM.render(vDom1, document.getElementById('test1'))

</script>
<script type="text/babel">
    const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
    ReactDOM.render(vDom2, document.getElementById('test2'))
</script>
</body>
</html>