欢迎来到 React 指南页面！这里将为您介绍 React 的基础知识，帮助您快速上手这个强大的 JavaScript 库。

简介

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它允许您使用声明式的方式构建 UI，使得开发过程更加高效和直观。

快速开始

安装 React

首先，您需要安装 Node.js 和 npm（Node.js 包管理器）。安装完成后，可以通过以下命令全局安装 React：

npm install -g create-react-app

创建项目

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

create-react-app my-app

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

运行项目

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

cd my-app
npm start

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

组件

React 应用程序由组件组成。组件可以是一个函数或一个类，用于表示 UI 的一部分。

函数组件

import React from 'react';

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

export default App;

类组件

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default App;

JSX

JSX 是一种类似 HTML 的语法扩展，用于描述 React 组件的界面结构。

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

export default App;

状态与生命周期

React 组件可以通过状态（state）和生命周期方法来管理自己的行为。

状态

状态是组件内部数据的一种形式，用于存储组件的属性。

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default App;

生命周期

React 组件有多个生命周期方法，用于在组件的不同阶段执行代码。

import React, { Component } from 'react';

class App extends Component {
  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

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

export default App;

高阶组件（HOC）

高阶组件是一种组件设计模式，用于将组件的某些功能抽象出来，以便复用。

import React from 'react';

function withCount(WrappedComponent) {
  return function WithCount(props) {
    const [count, setCount] = useState(0);

    return (
      <WrappedComponent {...props} count={count} setCount={setCount} />
    );
  };
}

export default withCount;

学习资源

如果您想了解更多关于 React 的知识，可以参考以下资源：

希望这份指南能帮助您快速上手 React！🎉