使用 create-react-app + react-router-dom + axios + antd + react-redux 构建 React 项目(2)

当你跟着步骤（1）步走完之后，你会发现这里的项目文件类型都是js,而实际的开发过程中都是jsx文件。或许你会开始产生疑问，什么是jsx?为什么要用jsx格式而不用js格式？如何改用jsx格式？

什么是 jsx?

传送门

JSX是一个 JavaScript 的语法扩展。react官方建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

为什么要用 jsx 格式而不用 js 格式？

官网 其实已经做出了解答，或许你在学习react的时候忘记了。React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

我们不需要一定使用 JSX， 但它有以下优点：

1、JSX 执行更快，因为它编译为 javaScript 代码后进行了优化。
2、它的类型是安全的，再编译的过程中就能发现错误。
3、使用 JSX 编译模板更加简单快速。

JSX 的标签语法：

const element = <h1>Hello, world!</h1>;

注意：
(1) JSX 是在 javaScript 内部实现的。
(2) 元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
(3) 与 浏览器DOM 不同，React 当中的元素事实上是普通的对象，React DOM可以确保浏览器DOM 的数据内容与 React 元素保持一致，要将 React 元素渲染到 DOM 节点中，我通过把他们传递给 ReactDOM.render() 的方法将其渲染到页面上。

步骤（1）中的项目如何改用jsx格式

如：

你可以直接将js文件命名为jsx


过程中可能会报错：

不要悲伤，不要心急！你要做的只是，重启项目，然后：

就成功了~