03 react体验jsx语法

最新推荐文章于 2024-05-30 17:45:31 发布

Mrs彬

最新推荐文章于 2024-05-30 17:45:31 发布

阅读量126

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/bin_2659017380/article/details/110742079

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <!-- 引入react 用来创建虚拟dom的 -->
    <script src="./js/react.production.min.js"></script>
    <!-- 引入react-dom 用来渲染虚拟dom的 -->
    <script src="./js/react-dom.production.min.js"></script>
    <!-- 引入一个js库babel 将jsx可以转换成js的-->
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">

        // 1、获取根节点
        var root = document.getElementById('root')
        // 2、创建虚拟DOM 
        var obj = (
            <div>
                <h2>jsx语法</h2>
                <p>
                    这是一个段落<span>这个p里面的span</span>  
                </p>
                {/*这是jsx中的注释*/}
                <h3>随机数：{Math.random()*10}</h3>
                <h3>当前的时间：{new Date().toLocaleTimeString()}</h3>
            </div>
        )
        // 3、js没有办法解析jsx 因此我们需要在引入一个js库 babel.min.js 将jsx可以转换成js的
        ReactDOM.render(obj,root)


        /* 
        1、jsx如果只有一个标签，() 可以省略,如果有() 建议不要省略
        2、非表单元素绑定数据使用 {}
        3、属性绑定 {}
        4、单标签要关闭 <img src='./1.jpg' />
        5、() 按照html解析，{}里哪找json解析
        6、html写类名 要用className
        7、动态class   className={变量}
        8、{} 可以写三目运算符
        9、动态行间样式 style={json}
        10、注释  {/*这是jsx中的注释
        11、随机数：{Math.random()*10}
 */
    </script>
</body>

</html>

</html>

Mrs彬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
03 react体验jsx语法

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Do
复制链接

扫一扫

专栏目录