新手学习 react 迷惑的点(一)

在写 React 的时候，你可能会写类似这样的代码：

import React from ‘react’
function A() {
// …other code
return

前端桃园

}
复制代码
你肯定疑惑过，上面的代码都没有用到 React，为什么要引入 React 呢？

如果你把 import React from ‘react’ 删掉，还会报下面这样的错误：

新手学习 react 迷惑的点(一)

那么究竟是哪里用到了这个 React，导致我们引入 React 会报错呢，不懂这个原因，那么就是 JSX 没有搞得太明白。

你可以讲上面的代码(忽略导入语句)放到在线 babel 里进行转化一下，发现 babel 会把上面的代码转化成:

function A() {
// …other code
return React.createElement(“h1”, null, “前端桃园”);
}
复制代码
因为从本质上讲，JSX 只是为 React.createElement(component, props, …children) 函数提供的语法糖。

为什么要用 className 而不用 class

React 一开始的理念是想与浏览器的 DOM API 保持一直而不是 HTML，因为 JSX 是 JS 的扩展，而不是用来代替 HTML 的，这样会和元素的创建更为接近。在元素上设置 class 需要使用 className 这个 API：

const element = document.createElement(“div”)
element.classNa