React 组件详解：面向初学者的指南与示例

Source: Dev.to

介绍

React 组件（函数式组件）只是一个返回类 HTML 代码（JSX —— JavaScript XML）的 JavaScript 函数。它是 React 的核心概念，能够解决许多开发者的问题。

为什么组件在 React 中很重要

React 组件消除了使用不同数据重复相同代码的必要。例如，渲染四个外观相同但数据不同的商品卡片，只需使用同一个组件多次即可。这有助于保持 UI 一致性，使代码更易理解，并简化维护。因此，组件是任何 React 应用的必备要素。

React 中的组件类型

函数式组件

函数式组件是编写组件的现代、推荐方式。它们简单且在当今被广泛使用。

function Welcome() {
  return 
## Hello, React!
;
}

类组件

类组件是一种较早的写法，在现代应用中已不常见。

class Welcome extends React.Component {
  render() {
    return 
## Hello, React!
;
  }
}

注意：如有需要，可提供函数式组件与类组件的详细对比。

创建你的第一个组件

步骤 1 – 创建文件

在 src/ 目录下创建一个 .jsx 扩展名的文件（例如 Button.jsx）。

步骤 2 – 编写组件

function Button() {
  let name = "John Doe";
  return Hello World by {name};
}

步骤 3 – 导出组件

export default Button;

完整的 Button.jsx 文件：

function Button() {
  let name = "John Doe";
  return Hello World by {name};
}

export default Button;

步骤 4 – 导入并使用组件

import Button from "./Button";

你可以使用以下任意语法渲染组件：

或

在 App.jsx 中的示例用法

import Button from "./Button";

function App() {
  return (
    
      
## Hello World

      
    
  );
}

export default App;

运行应用后，你会看到按钮被渲染出来：

组件命名规则

• 组件名称必须以大写字母开头。
• 每个文件只放置一个组件。
• 选择清晰、具描述性的名称。

常见错误需避免

• 使用小写的组件名称。
• 忘记 export 语句。
• 返回多个元素却没有包裹元素。

重要链接

• 快速入门 – React
• 你的第一个组件 – React
• Getting Started | Vite
• Understanding React Project Structure Created by Vite
• How to Create a React App Using Vite (Step‑by‑Step Guide for Beginners)