ReactJS实战之JSX详解

React. createElement

• 参数1

创建的元素的类型， 字符串，表示元素的名称

• 参数2

一个对象或 null,表示当前这个DOM元素的属性

• 参数3

子节点(包括其它虚拟DOM获取文本子节点)

• 参数

其它子节点

// 导包

import React from ‘react’

import ReactDOM from ‘react-dom’

// 创建虚拟 DOM 元素

const mydiv = React.createElement(‘div’,{id:‘mydiv’, title: ‘div aaa’}, ‘这是一个 div’)

// 调用 render 函数渲染

ReactDOM.render(mydiv, document.getElementById(‘app’))

但如果元素很多，这样写就很不好呢，每次都要创建元素的 API。

毕竟页面上本质都是各种 html 标签，还是直接手写各种标签最简单暴力。

babel

但是HTML是标记语言。JS文件默认不能写这种HTML标记，打包会失败，使用 babel 来转换这些JS中的标签即可！

这种在JS中，混合写入类似于HTML的语法，叫做JSX。

符合 XML规范的JS。JSX 语法的本质，还是在运行的时候，被转换成了React. createElement形式执行。

引入JSX

====================================================================

• 添加支持

• 插件支持

• 引入依赖

React提供的环境搭建工具演示