本文旨在解答React初学者关于在React代码中使用HTML的疑问。React本身并不直接支持在JavaScript文件中编写HTML标签。本文将解释原因，并介绍两种在React项目中构建UI的方法：使用React.createElement和使用JSX，以及它们之间的区别和适用场景。掌握这些知识点，能帮助你更高效地进行React开发。
React与HTML：为何不能直接使用HTML标签
初学者常常会疑惑，为什么在React项目中不能像编写普通HTML文件那样直接使用
等标签。这是因为React的核心理念是组件化，而组件的渲染逻辑是使用JavaScript代码来描述的。React需要一种方式将这些JavaScript代码转换为实际的DOM元素。
React.createElement：原始的React组件创建方式
在React早期，创建组件的方式是使用React.createElement方法。这个方法接受三个参数：
- type: 要创建的DOM元素的类型，例如"div"、"h1"等。
- props: 一个对象，包含要设置的属性，例如{ style: { color: 'red' } }。
- ...children: 元素的子节点，可以是字符串、数字、或者其他的React.createElement调用。
例如，以下代码使用React.createElement创建一个简单的
元素：
立即学习“前端免费学习笔记（深入）”；
React.createElement(
"h1",
{ style: { color: "blue" } },
"Hello, React!"
);这段代码等价于HTML的
Hello, React!
。虽然React.createElement可以工作，但当组件结构变得复杂时，代码会变得难以阅读和维护。
JSX：更简洁的语法糖
为了解决React.createElement的冗长问题，React引入了JSX。JSX是一种JavaScript的语法扩展，允许开发者在JavaScript代码中编写类似HTML的标记。
基于Intranet/Internet 的Web下的办公自动化系统，采用了当今最先进的PHP技术，是综合大量用户的需求,经过充分的用户论证的基础上开发出来的，独特的即时信息、短信、电子邮件系统、完善的工作流、数据库安全备份等功能使得信息在企业内部传递效率极大提高，信息传递过程中耗费降到最低。办公人员得以从繁杂的日常办公事务处理中解放出来，参与更多的富于思考性和创造性的工作。系统力求突出体系结构简明
上面的例子使用JSX可以写成：
Hello, React!
JSX看起来更像HTML，但它实际上会被Babel等工具转换成React.createElement调用。这意味着，最终React仍然会使用React.createElement来创建DOM元素，但JSX提供了一种更简洁、更易于理解的语法。
使用JSX需要配置Babel。Babel是一个JavaScript编译器，可以将ES6+的代码（包括JSX）转换为浏览器可以理解的ES5代码。你需要安装@babel/core和@babel/preset-react，并在Babel配置文件（例如.babelrc或babel.config.js）中配置preset-react。
示例：一个简单的React组件
以下是一个使用JSX的简单React组件：
import React from 'react';
function MyComponent() {
return (
Welcome!
This is a simple React component.
);
}
export default MyComponent;这个组件渲染一个包含标题和段落的
JSX的注意事项
-
必须有一个根元素: JSX代码必须被包裹在一个根元素中。例如，不能直接返回两个并列的元素。可以使用一个空的或者
（简写为>）作为根元素。 - 属性名： HTML属性名在JSX中需要进行一些转换。例如，class要写成className，for要写成htmlFor。
- 表达式： 可以在JSX中使用JavaScript表达式，用花括号{}包裹。例如，
{2 + 2}
会渲染成4
。- 样式： 可以使用style属性来设置元素的样式，但属性值必须是一个JavaScript对象。例如，
。
总结
虽然React本身不直接支持在JavaScript文件中编写HTML标签，但通过JSX，我们可以使用一种更简洁、更易于理解的语法来描述UI。Babel会将JSX转换成React.createElement调用，最终React会使用这些调用来创建DOM元素。理解JSX的工作原理和注意事项，可以帮助你更高效地进行React开发。选择JSX，可以大大提高开发效率和代码可读性。
