01 jsx初体验

1、定义组件的时候，return 后面只能有一个根标签，不能有多个，但这个标签内部可以有其他多个标签

2、使用组件的时候，首字母必须大写

3、如果最外层实在不想放置一层div根目录，可以使用 <></> 空标签代替

// JSX expressions must have one parent element.ts(2657)

#当你写了2个标签,可以外层加div解决,但是官方推荐 空标签

02 jsx的注意点

1、JSX的特点

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。

2、JSX几个注意的格式：

1、React的JSX是使用大写和小写字母来区分本地组件和HTML组件

（如：html就用 div p h1 ， 组件就用 MyButton App Home List等 ）

2、JSX和html的标签属性的区别

HTML标签属性JSX原因forhtmlForfor在JS中为for循环关键字classclassNameclass在JS中为声明类关键字style需使用JS对象(使用双花括号--{{}}) 
import React, { Component } from 'react'
var MyImg = require('./assets/01.jpg')

export default class App2 extends Component {
    render() {
        return (
            <>
                <label htmlFor="ipt">label</label>
                <input type="text" id="ipt" className="ipt" style={{background: 'pink', color: 'green'}} />
                <hr/>
                <img src={MyImg} alt=""/>
            </>
        )
    }
}

注意：图片查找路径在src目录，所以引入的时候从src目录触发查找文件

3、React的JSX创建出来的是虚拟DOM，而不是HTML

在index.js中：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App3'

ReactDOM.render(
    <App />, 
    document.getElementById('root')
);

const virtualDOM = React.createElement('div')
const realDOM = document.createElement('div')

let virtualNum = 0;
for(var key in virtualDOM){
    virtualNum++;
}

let realNum = 0;
for(var key in realDOM){
    realNum++;
}

console.log('虚拟DOM的属性个数：'+virtualNum)	// 7
console.log('真实DOM的属性个数：'+realNum)		// 298

4、JSX变量引用、三目运算符、for循环

在JSX中，想要调用变量，需要在return中直接使用单花括号--**{}**调用

index.js中：

JSX中变量引用、三目运算符、for循环的使用

import App3 from './App3'

//2、通过JSX语法将标签/组件渲染到指定标签上
ReactDOM.render(
    <App3 />
    , document.getElementById('root'));
App3.js中

import React, { Component } from 'react'

let name = "小明", num1=20, num2=30, arr=[1, 2, 3, 4, 5]

export default class App3 extends Component {
  render() {
    return (
      <div>
        {/* 这是注释的格式 */}
        {/* JSX中引用变量需要加单花括号 */}
        <p>{name}</p>

        {/* 三目运算符的使用 */}
        <p>num1和num2中比较大的是：{num1>num2? num1: num2}</p>
        <p>{gender === 0 ? '男' : (gender === 1 ? '女' : '保密')}</p>

        {/* for循环的使用 */}
        <ul>
          {/* 数组名.map(函数) */}
          {
            //格式1：
            arr.map((v,k)=>(
              <li key={k}>{v}</li>
            ))
          }
          {
            //格式2：可以把下面的大括号和return换成小括号
            arr.map((v,k)=>{    
              return <li key={k}>{v}</li>
            })
          }
        </ul>

      </div>
    )
  }
}

总结：在jsx语法中，需要书写js代码的时候，请先加上{ } 再书写js语法