React 教程

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它允许开发者使用声明式编程方法构建高性能的 UI。

快速开始

1. 安装 Node.js 和 npm：React 需要Node.js 和 npm 来运行。
2. 创建一个新的 React 应用：使用 create-react-app 命令来快速搭建一个 React 应用。
3. 编写组件：React 应用由组件组成，每个组件负责渲染 UI 的一部分。

组件

React 组件是构成 React 应用的基本单位。组件可以是无状态的，也可以是有状态的。

无状态组件

无状态组件是最简单的组件类型，它们不维护自己的状态。

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

有状态组件

有状态组件可以维护自己的状态，并且可以在状态变化时更新 UI。

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

JSX

JSX 是 JavaScript 的语法扩展，它看起来类似于 HTML，但允许你在 JavaScript 中编写 HTML。

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

生命周期

React 组件有多个生命周期方法，这些方法在组件的不同阶段被调用。

• componentDidMount: 组件已挂载到 DOM 上。
• componentDidUpdate: 组件更新后。
• componentWillUnmount: 组件将要卸载。

class Clock extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

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

路由

React Router 是一个用于在 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>
  );
}

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