终极目标：掌握和使用react

本博客目的：记录react学习的进度和心得（react JSX）

内容：通过视频学习，掌握react基础语法。

前端框架react自学之react JSX(三)

react JSX

优点：

1、JSX执行更快，编译为JavaScript代码时进行优化

2、类型更安全，编译过程如果出错就不能编译，及时发现错误（因为就是和JS差不多）

3、JSX编写模板更加简单快速。（不要跟VUE比）

注意：

1、JSX必须要有根节点。

2、正常的普通HTML元素要小写。如果是大写，默认认为是组件。

JSX表达式

1、由HTML元素构成

2、中间如果需要插入变量用{}(在vue中是使用{{}})

3、{}中间可以使用表达式(数字表达式、字符表达式、三元运算等)

4、{}中间表达式中可以使用JSX对象

5、属性和html内容一样都是用{}来插入内容（注意不是写引号，相当于是一个语法糖，少写引号）

案例（注意JSX对象里面的注释不是使用//，也不是使用<!–>，而是使用{/* 注释*/}，下面一些代码的//只是我的一些简单示意）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React from 'react';//导入react框架
import ReactDOM from 'react-dom';//导入react-dom，虚拟dom
import './App.css'//导入样式App.css

let time = new Date().toLocaleTimeString()
let str = '当前时间是：'
let element = (
    <div>
        <h1>helloworld</h1>
        <h2>{str+time}</h2>
    </div>
)

console.log(element)//打印的就是JSX对象，和JS对象差不多，里面有一些定义的原型之类的

let man = '发热';
let element2 = (
    <div>
        <h1>今天是否隔离</h1>
        <h2>{man=="发热"?<button>隔离</button>:"躺床上"}</h2>
    </div>
)

//let man = '发热';
let element4 = (
    <div>
        <span>横着躺</span>
        <span>竖着躺</span>
    </div>
)
man = '正常'
let element3 = (
    <div>
        <h1>今天是否隔离</h1>
        <h2>{man=="发热"?<button>隔离</button>:element4}</h2>
    </div>
)

let color = 'bgRed'
let logo = 'https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png'
//HTML的样式类名要写className,因为class在js当中是关键词（虽然现在写class也没报错了）
let element5 = (
    <div className={color}>
        <img src={logo} />
        红色的背景颜色
    </div>

)

ReactDOM.render(
    element5,
    document.getElementById('root')

)