React学习第一天JSX语法

一，什么是JSX语法

1.JSX是扩展的javascript语法，JSX 可以生成 React元素。

二，JSX形式

1.JSX语法类似于一个字符串和HTML元素，但又都不是。

const element = <h1>好好学React</h1>

三，JSX模板语法

1.JSX有类似Vue的模板语法

（1）使用大括号绑定HTML元素内容：

const element = <h1> call me {maybe} </h1>

（2）使用大括号绑定属性：

const element = <h1 id={num}> hello world</h1>

2.同vue,JSX模板语法中可以使用表达式

const element = <h1 id={1+1}> hello world</h1>

3.符合语法的JSX可以包含子元素，但只能有一个根元素。

四，JSX编译

1.JSX的编译过程如下图所示

1.JSX编译成的React元素是一个对象。如下图所示。