JSX 二 - 从零开始学 React

2023-11-25 00:21:46

React 是一种流行的 JavaScript 库，用于构建用户界面。JSX 是一种用于编写 React 组件的语法，它可以使代码更加简洁和易于阅读。在第一部分，我们学习了如何使用函数组件创建 React 组件。在第二部分，我们将学习如何使用 ES6 中的 class 创建 React 组件。

了解 ES6 中的 class 关键字

在 ES6 中，class 关键字用于创建类。类是一种蓝图，它定义了对象的属性和方法。我们可以使用 class 关键字来创建 React 组件。

基于 class 关键字创建组件

为了使用 class 关键字创建 React 组件，我们需要首先创建一个类。这个类需要继承 React.Component。React.Component 是一个内置的 React 类，它为 React 组件提供了基本的功能。

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

在这个例子中，我们创建了一个名为 MyComponent 的类。这个类继承了 React.Component。在 render 方法中，我们返回了一个 HTML 元素。这个 HTML 元素将被渲染到 DOM 中。

使用 class 关键字来创建组件

为了使用 class 关键字来创建组件，我们需要首先创建一个 React 应用。我们可以使用 create-react-app 工具来创建一个 React 应用。

npx create-react-app my-app

在创建好 React 应用后，我们需要在 src 目录下创建一个名为 MyComponent.js 的文件。在这个文件中，我们可以编写我们的 React 组件。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

export default MyComponent;

为了使用这个组件，我们需要在 App.js 文件中导入它。

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;