react——JSX语法

     

react JSX

react是使用JSX来代替常规的JavaScript;JSX看起来是一个很像XML的JavaScript语法拓展;我们不需要一定使用JSX, 但它有以下优点:JSX执行更快,因为在编译为JavaScript代码后进行了优化;他是类型安全的,在编译过程中就能发现错误; 使用JSX编写模块更加简单快速 。

我们可以在上一代码中嵌套多个HTML标签,需要使用一个div元素包裹他,实例中的p元素添加了自定义data-myattribute, 添加自定义属性需要使用data-前缀。

当然也可以将以上代码放到一个独立的js中,不过type="text/babel"

我们可以再JSX中使用JavaScript表达式,表达式写在花括号中

在JSX中不能使用if else语句,但可以使用conditional(三元运算)表达式来代替。

react推荐使用内联样式。我们可以使用camelCase语法来设置内联样式,react会在指定 元素数字后面自动添加px

注释:注释需要写在花括号中

JSX中允许在模板中插入数组,数组会自动展开所有成员

HTML标签与React组件(组件下章节)


你可能感兴趣的:(react——JSX语法)