React学习 ==> 03JSX语法

JSX语法

什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）

报错:You may need an appropriate loader to handle this file type.

1. 如何启用 jsx 语法？

2. jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement 形式，再渲染的；

3. 在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中

   • 渲染数字

   • 渲染字符串

   • 渲染布尔值

   • 为属性绑定值

   • 渲染jsx元素

   • 渲染jsx元素数组

   • 将普通字符串数组，转为jsx数组并渲染到页面上【两种方案】

     • forEach()

       let knarr = ['小兰','柯南','小五郎']
       let nameArr = []
       knarr.forEach(item=>{
           var myh5 = <h5>{item}</h5>
           nameArr.push(myh5)
       })
       

     • map

       let knarr = ['小兰','柯南','小五郎']
       {knarr.map(item=> <h5>{item}</h5>)}
       

       ​

4. 在 jsx 中 写注释：推荐使用{ /* 这是注释 */ }

5. 为 jsx 中的元素添加class类名：需要使用className 来替代 class；htmlFor替换label的for属性

6. 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；

7. 在 jsx 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！

当 编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译；

import React from 'react'
import ReactDOM from 'react-dom'

// 创建虚拟dom
// const mydiv = React.createElement('div',{title:'div_title',id:1},'你好啊')

//jsx语法
// const mydiv = <div id='1'>
//     <h1>你好啊div</h1>
// </div>
// // 渲染
// ReactDOM.render(mydiv,document.getElementById('app'))

let a = '113'
let b = 113
let str = "我爱你中国"
let boo = true
let title = "999"
// 什么情况下需用{} ？ 当我们想要在jsx区域内写js表达式就用{}
let h1 = <h1>这是h1标签</h1>
let arr = [<h2>这是h2标签</h2>,<h3>这是h3标签</h3>]
let knarr = ['小兰','柯南','小五郎']
let nameArr = []
knarr.forEach(item=>{
    var myh5 = <h5>{item}</h5>
    nameArr.push(myh5)
})
let mydiv = <div>
    {a+3}
    {b+3}
    {str}
    {boo ? '真':'假'}
    <p title={title}>这是p</p>
    {h1}
    {arr}
    <hr/>
    {nameArr}
    {knarr.map(item=> <h5>{item}</h5>)}
</div>
               
ReactDOM.render(mydiv,document.getElementById('app'))