JSX 与 ReactDOM：构建用户界面组件的不二之选

2023-12-16 14:13:08

React 中使用 JSX 和 ReactDOM 的终极指南

在 React 领域，JSX 和 ReactDOM 是创造用户界面组件的利器，以提高开发效率并构建可维护、可读性高的用户界面。

JSX：JavaScript 的 XML 扩展

JSX（JavaScript XML） 是 JavaScript 语法的一种扩展，允许您使用类似 XML 的语法在 JavaScript 代码中 UI 组件。它就像是一种使用 JavaScript 编写 HTML 的超能力。

import React from 'react';

function MyComponent() {
  return <h1>Hello, world!</h1>;
}

export default MyComponent;

这段代码创建一个 React 组件，当渲染时将在浏览器中显示文本“Hello, world!”。

ReactDOM：将 JSX 变成可执行的代码

ReactDOM 是一个 JavaScript 库，负责将 JSX 编译成可执行的 JavaScript 代码。然后，浏览器可以理解并渲染该代码。

import ReactDOM from 'react-dom';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

这段代码将 MyComponent 组件渲染到 HTML 元素中，该元素的 id 为“root”。

使用 JSX 和 ReactDOM 的好处

使用 JSX 和 ReactDOM 带来了许多好处：

快速开发： JSX 使您可以直接在 JavaScript 中编写 UI 组件，而无需使用其他语言或模板。
可维护性： 由于 JSX 与 JavaScript 集成，因此您的 UI 组件很容易维护和调试。
可读性： JSX 是一种声明式的语言，这意味着它清楚地表达了如何渲染组件。

在 React 中创建组件

要使用 JSX 和 ReactDOM 创建组件，请按照以下步骤操作：

在您的项目中安装 React 和 ReactDOM。
创建一个 React 组件，返回您要渲染的 JSX 代码。
使用 ReactDOM.render() 方法将组件渲染到 HTML 元素中。

示例代码：

import React from 'react';
import ReactDOM from 'react-dom';

function MyButton(props) {
  const { onClick, children } = props;

  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

ReactDOM.render(
  <MyButton onClick={() => alert('Button clicked!')} children="Click me!" />,
  document.getElementById('root')
);