本文旨在解答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的标记。
上面的例子使用JSX可以写成：
<h1 style={{ color: "blue" }}>Hello, React!</h1>
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 ( <div> <h1>Welcome!</h1> <p>This is a simple React component.</p> </div> ); } 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，可以大大提高开发效率和代码可读性。
