React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它允许开发者以声明式的方式构建组件，使得界面更新和交互变得更加简单。

快速开始

安装 React

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

npm install -g create-react-app

创建新项目

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

create-react-app my-react-app

进入项目目录：

cd my-react-app

运行项目

使用以下命令启动开发服务器：

npm start

您将在浏览器中看到一个默认的 React 应用程序。

组件

React 应用程序由组件组成。组件是可复用的代码块，它们可以接收输入参数（props）并返回用于渲染的 JSX。

import React from 'react';

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

export default App;

JSX

JSX 是一种类似于 HTML 的语法扩展，用于描述 UI 结构。在 React 中，您可以使用 JSX 来定义组件的结构。

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

生命周期

React 组件有多个生命周期方法，这些方法在不同的阶段被调用。例如，componentDidMount 在组件挂载到 DOM 后被调用。

import React, { Component } from 'react';

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

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

状态和属性

React 组件可以使用状态（state）和属性（props）来存储和传递数据。

import React, { useState } from 'react';

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

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

路由

React Router 是一个用于在 React 应用程序中添加路由功能的库。

npm install react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

更多关于 React 的信息，请访问我们的官方文档。

图片

React Logo