react学习笔记——3. jsx语法规则

jsx是什么?

  • jsx全称:javaScript XML
  • 是react定义的一种类似于XML的js扩展语法,是js+xml。
    • xml早期用于存储和传输数据,是标签加数据的形式。只不过后来慢慢的变成了json
  • 其本质就是React.createElement(标签,属性,内容)方法的语法糖
  • 其作用是为了简化虚拟dom

jsx语法规则

  1. 定义虚拟dom时,不写引号。
  2. 虚拟dom标签中混入js 表达式 时,需要使用大括号。这里表达式不是指js代码。下面将js语句(代码)和js表达式进行区分。
    1. 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方。例如
      1. a。一个变量名
      2. a+b。两个变量相加
      3. demo(1)。调用函数,并传递1
      4. arr.map()。对数组进行加工的方法
      5. function test(){}。定义一个函数
      6. 总结:就是在左边定义一个 const x= 然后用于接收,如果能接收到,就是表达式。
    2. 语句(代码):不能进行接收的,也就是不会产生一个值。例如
      1. for(){}
      2. if(){}
      3. switch(){case:xxx}
      4. 总结:左侧不能用一个变量去接收。
  3. 如果想用class样式,不是写class=“”,而是className=“”
  4. 内联样式,则需要两个大括号,第一个表示要写js,第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。
  5. 虚拟dom必须只有一个根标签
  6. 标签必须要闭合
  7. 标签首字母
    1. 首字母小写,则直接转为html中找同名元素,若没有该标签对应的同名元素就报错
    2. 首字母大写,则react会渲染对应的组件,如果组件没有定义,则报错
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>jsx语法规则title>
    <style>
        .title {
            background-color: orange;
            width: 400px;
        }
    style>
head>

<body>
    
    <div id="test">div>

    <script src="../js/react.development.js">script>
    <script src="../js/react-dom.development.js">script>
    <script src="../js/babel.min.js">script>
    <script type="text/babel">
        const myId = "njTech"
        const myData = "hello,React"
        // 1、创建虚拟dom
        const VDOM = (
            <div>
                <h2 className="title" id={myId}>
                    <span style={{ color: "white", fontSize: "40px" }}>
                        {myData.toLowerCase()}
                    </span>
                </h2>
                <input type="text" />
                <good>这个会找html中对应的标签,但是html中没有这个good标签,所以会给一个警告</good>
                <Good>这个会找组件,但是没有定义Good组件,所以会报错</Good>
            </div>
            // // 这样是报错的
        )
        // 2、渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("test"))
        /**
         * jsx语法规则
         *      1、定义虚拟dom时,不写引号。
         *      2、虚拟dom标签中混入js表达式时,需要使用大括号
         *      3、如果想用class样式,不是写class="",而是className=""
         *      4、内联样式写法style={{}},需要两个大括号,第一个表示要写js,第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。
         *      5、虚拟dom必须只有一个根标签
         *      6、标签必须要闭合
         *      7、标签首字母
         *          1)首字母小写,则直接转为html中找同名元素,若没有该标签对应的同名元素就报错。
         *          2)首字母大写,则react会渲染对应的组件,如果组件没有定义,则报错。
        */
    script>
body>

html>

你可能感兴趣的:(react,react.js)