React 教程文档

React 是一个用于构建用户界面的 JavaScript 库，它允许开发者创建动态、高效的网页应用。

快速开始

1. 安装 Node.js 和 npm
2. 创建一个新项目：npx create-react-app my-app
3. 进入项目目录：cd my-app
4. 启动开发服务器：npm start

🚀 以上步骤将启动开发服务器，并在浏览器中打开 http://localhost:3000。

组件

React 应用由组件组成，组件可以是一个简单的文本，也可以是一个复杂的用户界面。

创建组件

你可以使用函数或类来创建组件。

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

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

JSX

JSX 是一种 JavaScript 语法扩展，它允许你像写 HTML 一样写 React 组件。

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

高阶组件

高阶组件（Higher-Order Component，HOC）是 React 中的一种复用机制。

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, this.props),
      };
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

React Logo

更多 React 教程，请访问我们的 React 官方文档。

# React Tutorial Documentation

React is a JavaScript library for building user interfaces, allowing developers to create dynamic and efficient web applications.

## Quick Start

1. Install Node.js and npm
2. Create a new project: `npx create-react-app my-app`
3. Navigate to the project directory: `cd my-app`
4. Start the development server: `npm start`

> 🚀 The above steps will start the development server and open `http://localhost:3000` in your browser.

## Components

React applications are composed of components, which can be as simple as a piece of text or as complex as a complete user interface.

### Creating Components

You can create components using functions or classes.

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

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

JSX

JSX is a syntax extension for JavaScript that allows you to write React components like HTML.

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

Higher-Order Components

Higher-Order Components (HOC) are a reusability pattern in React.

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, this.props),
      };
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

React Logo

For more React tutorials, please visit our official React documentation.