本文旨在解答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:>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，可以大大提高开发效率和代码可读性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
