JSX语法

简介

• 全称：JavaScript XML
• React 定义的类似于 XML 的 JS 扩展语法；本质是 React.createElement() 方法的语法糖
• 作用：简化创建虚拟 DOM

jsx 语法规则

// 定义虚拟dom时，不要写引号
// 标签中引入js表达式时需要用 { }
// 样式的类名不要用class，要用className
// 内联样式，要用style={{key : value}}的形式去写。
// 只有一个根标签
// 标签必须闭合
// 标签首字母
// // (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
// // (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
// 注意区分JS表达式和JS语句(代码)：
// 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，下面这些都是表达式:

JSX 例子

a;
a + b;
demo(1);
arr.map();
function test() {}

语句：下面这些都是语句：

if(){}
for(){}
switch{ case 1:xxx }

<script type="text/babel">
  const myId = 'hOwCoDe' const myData = 'HellO,hoWCodE' const VDOM = (
  <div>
    <h1 className="title" id={myId.toLowerCase()}>
      <span style={{ color: "white", fontSize: "29px" }}>
        {myData.toLowerCase()}
      </span>
    </h1>
    <h1 className="title" id={myId.toLowerCase()}>
      <span style={{ color: "white", fontSize: "29px" }}>
        {myData.toLowerCase()}
      </span>
    </h1>
  </div>
  ) ReactDOM.render(VDOM,document.getElementById('test'))
</script>