react学习第二天（一）

1、react jsx语法优点

• jsx执行更快，编译为javascript代码时进行优化
• 类型更安全，编译过程如果出错，就不能编译，及时发现错误
• jsx编写模板更加简单快速（不要跟vue比）

2、react jsx语法注意：

• jsx必须要有根节点
• 正常普通html 元素要小写，如果是大写，默认是组件

3、jsx表达式

//例一：
let str = '当前的时间是：'
let time = new Date().toLocaleTimeString()
let element = (
  <div>
    <h1>helloworld</h1>
    <h2>{str+time}</h2>  //表达式
  </div>
)
ReactDOM.render(
  element,
  document.querySelector('#root')
)

//例二
let man = "发热"
let element2 = (
  <div>
    <h1>今天是否隔离</h1>
    <h2>{man === "发热" ? "隔离": "躺床上"}</h2>  //三元运算符
    //表达式中也可以是jsx对象：
    //<h2>{man === "发热" ? <button>隔离</button>: <button>躺床上</button>}</h2>
  </div>
)
ReactDOM.render(
  element2,
  document.querySelector('#root')
)

效果如下：

jsx对象就是普通js对象：
console.log(element2)输出如下对象：

4、react中的外部css文件直接import导入即可
html样式类名要写className,因为class在js当中是关键词

import React from 'react';
import ReactDOM from 'react-dom';
import'./App.css';

let color = 'bgpink';
let logo = 'http://www.baidu.com/img/dhuhsnnsnjskksdl.jpg';
let element = (
  <div className={color}> 
  	<img src={logo} />
    红的的背景颜色
  </div>
)

ReactDOM.render(
  element,
  document.querySelector('#root')
)

效果如下：

5、jsx语法总结：

• jsx由html 元素构成
• 中间如果需要插入变量要用 { }
• { } 中间可以使用表达式
• { } 中间表达式可以使用jsx对象
• 属性和html内容一样，都是用 { } 来插入内容