组件与 JSX 教程

在React中，组件是构建用户界面的基石。JSX（JavaScript XML）则是一种JavaScript的语法扩展，它允许我们以XML的语法书写JavaScript代码。本教程将介绍如何使用React组件和JSX来构建用户界面。

JSX 简介

JSX是一种JavaScript的语法扩展，它看起来类似XML。在React中，我们使用JSX来描述用户界面应该呈现出什么样子。以下是一个简单的JSX示例：

const element = <h1>Hello, world!</h1>;

在上面的代码中，我们创建了一个<h1>元素，并且将其文本内容设置为"Hello, world!"。

创建组件

在React中，组件可以分为两大类：函数组件和类组件。

函数组件

函数组件是最简单的组件类型。它是一个JavaScript函数，接收props作为参数，并返回React元素。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

在上面的代码中，Welcome是一个函数组件，它接收一个名为name的props，并将其用于显示欢迎信息。

类组件

类组件使用ES6的class关键字来定义。它们通常包含更多的功能，例如状态管理和生命周期方法。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

在上面的代码中，Welcome是一个类组件，它继承自React.Component。

JSX 属性

在JSX中，你可以像在HTML中一样使用属性。以下是一些常用的JSX属性：

className: 用于设置元素的CSS类名。
style: 用于设置元素的样式。
onClick: 用于添加点击事件监听器。

function Welcome() {
  return <h1 className="greeting" style={{ color: 'red' }} onClick={() => alert('Hello!')}>Hello, world!</h1>;
}

在上面的代码中，我们设置了<h1>元素的className和style属性，并且添加了一个点击事件监听器。

组件嵌套

在React中，组件可以嵌套在另一个组件内部。以下是一个嵌套组件的示例：

function Welcome() {
  return <div>
    <h1>Hello, world!</h1>
    <WelcomeUser name="Alice" />
  </div>;
}

function WelcomeUser(props) {
  return <p>Welcome, {props.name}!</p>;
}

在上面的代码中，WelcomeUser组件被嵌套在Welcome组件内部。

更多关于React组件和JSX的内容，请访问React官方文档。