docs/guides/react_basics

React 基础指南

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助你构建高效、可维护的 UI 组件。以下是一些 React 的基础知识。

安装 React

首先，你需要安装 Node.js 和 npm（Node.js 包管理器）。然后，可以使用以下命令创建一个新的 React 应用：

npx create-react-app my-app
cd my-app
npm start

组件

React 应用由组件组成。组件可以是一个函数，也可以是一个类。

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

const element = <Welcome name="Alice" />;

在上面的例子中，Welcome 是一个函数组件。

JSX

JSX 是 JavaScript 的语法扩展，它看起来类似于 HTML。

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

state 和 props

React 组件可以通过 state 和 props 与其他组件交互。

• Props：组件接收的参数，用于从父组件传递数据到子组件。
• State：组件内部的数据，可以随时间变化。

class Clock extends React.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>
    );
  }
}

本站链接

更多关于 React 的信息，请访问我们的 React 教程。

React Logo