jsx语法

JSX 是 javascript 的语法扩展。它就像一个拥有 javascript 全部功能的模板语言。它生成 React 元素，这些元素将在 DOM 中呈现。

React 建议在组件使用 JSX。在 JSX 中，我们结合了 javascript 和 HTML，并生成了可以在 DOM 中呈现的 react 元素。

1. 定义虚拟 dom 时不要用引号

2.标签中引入 js 表达式要用 {}

3.如果在 jsx 要写行内样式需要使用 style={{coler：red}} 形式

4.样式的类名指定不能写 class，要写 className;

5.只有一个根标签

6.标签必须闭合

7.标签首字母

①若小写字母开头，则会将该标签转为 html 同名标签，如果没找到，则会报错；

②若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误；

实质：JSX 通过 babel 编译，而 babel 实际上把 JSX 编译给 React.createElement() 调用

React.createElement()即 h 函数，返回 vnode第一个参数可能是组件也可能是

html —tag ，如果是组件，首字母必须大写

const imgElem = <div>

// 经过 babel 编译后

var imgElem = React. createElement ("div",null,React.createElement("p",null,"some text"),React.createElement("img",{src:imgUrl}));