jsx语法规则、组件与模块概念

向阳菌

已于 2022-10-21 00:58:33 修改

阅读量103

点赞数

文章标签： json

于 2022-10-21 00:53:41 首次发布

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

版权

1.早期存储和传输数据格式

XML

<student>
   <name>  </name>
</student>

后来就变为json了

{
    "name":"laozhichi",
    "age":18
}

在这里的json转化为传统的字符串可以用stringfy的方式进行转化，字符串转化为json可以用stringfy的形式转化

2.jsx语法规则

A.混入js表达式要用{ }

B.样式的类名要用className,不能用class

C.内联样式要用style={{属性：属性值}}的形式进行编写

D.只能有一个根标签

E.标签首字母：若小写字母开头，那么先检测html当中是否有同名的标签，如果没有那么就会报错

若大写字母开头，那么会显示到页面上，不会报错

<!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>
    <style>
        .title{
            color:blue;
        }
    </style>
</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 myId='laozhichi'
        const age=19
        const VDOM=(
            <div>
            <h1 id={myId}>
                <span className='title'>{age}</span>
                <span tyle={{fontSize:"10px",color:"blue"}}>
            </h1>
        </div>
        )
        ReactDOM.render(VDOM,document.getElementById('root'))
    </script>
</body>
</html>