React 开发教程

React 是一个用于构建用户界面的 JavaScript 库，它被广泛用于开发单页应用程序。本教程将为您介绍如何使用 React 进行开发。

快速入门

安装 React

首先，您需要在您的开发环境中安装 React。可以通过以下命令安装：

npm install -g create-react-app

创建一个新项目

使用 create-react-app 工具创建一个新的 React 项目：

create-react-app my-app

这将创建一个名为 my-app 的新目录，其中包含一个基本的 React 应用程序。

运行应用程序

进入 my-app 目录，并运行以下命令来启动开发服务器：

npm start

现在，您应该能在浏览器中看到您的 React 应用程序。

组件

React 应用程序由组件组成。组件是可复用的代码块，用于构建用户界面。

创建组件

在 React 中，您可以通过类或函数创建组件。

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

JSX

React 使用 JSX 来描述用户界面。JSX 是 JavaScript 的一个语法扩展，它看起来与 HTML 很相似。

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

状态和属性

状态

状态是组件内部的数据，它可以在组件的生命周期内改变。

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>
    );
  }
}

属性

属性是传递给组件的数据，它类似于 HTML 的属性。

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

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

本站链接

想要了解更多关于 React 的信息，可以访问我们的 React 教程。

React Logo