React 指南

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助开发者构建高性能、可维护的 Web 应用程序。以下是一些关于 React 的基础知识和学习资源。

安装 React

在开始之前，您需要安装 Node.js 和 npm。然后，您可以使用以下命令全局安装 React：

npm install -g create-react-app

创建第一个 React 应用

使用 create-react-app 命令可以快速创建一个 React 应用：

create-react-app my-app

进入项目目录并启动开发服务器：

cd my-app
npm start

您应该能在浏览器中看到以下内容：

Welcome to React!

You can edit `src/App.js` and save to reload.

_devtools_/react-devtools.js:1

JSX

React 使用 JSX 语法来描述 UI。JSX 是一种类似 HTML 的语法扩展，它允许您在 JavaScript 中编写标记。

import React from 'react';

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

export default App;

组件

React 应用由组件组成。组件是 React 应用中的最小可复用单元。

函数组件

import React from 'react';

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

export default Welcome;

类组件

import React, { Component } from 'react';

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

export default Welcome;

状态与属性

组件可以拥有状态和属性。

状态：用于组件内部的数据。
属性：用于从父组件传递数据到子组件。

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

条件渲染

您可以使用 if 语句或其他条件逻辑来根据条件渲染组件。

import React from 'react';

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

export default Welcome;

列表与键

React 可以渲染列表，并且需要为每个列表元素提供一个唯一的 key 属性。

import React from 'react';

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <li key={number.toString()}>
          {number}
        </li>
      )}
    </ul>
  );
}

export default NumberList;

表单

React 表单处理通常涉及状态更新。

import React, { Component } from 'react';

class NameForm extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default NameForm;