二、JSX语法 ------ 2020-03-21

1、index.js导入的各模块的作用：

// react中是React的核心：基础语法、属性、状态、生命周期、组件等
import React from "react";

// react-dom的作用是把虚拟DOM渲染成真实的DOM
import ReactDOM from "react-dom";

// ReactDOM.render(JSX语法, 容器, 渲染完触发的回调);
ReactDOM.render(<div style={{color:'red'}}>hello world!</div>, 
document.getElementById("root"));

2、什么是JSX

JSX: JavaScript And XML[HTML]

3、JSX中使用JS表达式：

// 我们可以使用 {} 在JSX语法中解析 JS表达式;
/**
* {} 的使用注意事项：
* 1、{} 不能直接放入对象（除数组和几种特殊情况除外）；
* 2、在使用style时，style的 {} 必须放置一个对象；
* 3、虚拟的DOM对象也可以直接放在 {} 中；
* 4、{} 中放置 null 、undefined 代表空元素，不会渲染在页面中
*/

4、JSX语法中给HTML元素添加属性的几种特殊情况：

// 1、样式类名：className

// 2、style：style中必须放置一个对象
 <div style={{fontSize: '20px', color: 'red'}}>Hello World!!!</div>

5、{} 中放置虚拟DOM对象：

<div style={{fontSize: '20px', color: 'red'}}>
    Hello World!!!{null}{undefined}
    {arr.map(item => {
       return <a href="" key={item}>{item}</a>
    })}
 </div>