React 框架教程

React 是一个用于构建用户界面的 JavaScript 库，它被广泛用于开发单页应用程序（SPA）。本教程将为您介绍 React 的基础知识，包括组件、状态管理、生命周期方法和路由。

安装和设置

在开始之前，请确保您已安装 Node.js 和 npm。接下来，您可以使用以下命令创建一个新的 React 应用：

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

组件

React 应用由组件组成。组件可以是一个简单的函数或类。以下是一个简单的函数组件示例：

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

const element = <Greeting name="Alice" />;
ReactDOM.render(element, document.getElementById('root'));

状态管理

React 使用 useState 钩子来管理组件的状态。以下是一个简单的状态管理示例：

import React, { useState } from 'react';

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

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

ReactDOM.render(<Counter />, document.getElementById('root'));

生命周期方法

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

• componentDidMount: 组件挂载后调用
• componentDidUpdate: 组件更新后调用
• componentWillUnmount: 组件卸载前调用

路由

React Router 是一个流行的库，用于处理 React 应用的路由。以下是一个简单的路由示例：

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

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

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

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

ReactDOM.render(<App />, document.getElementById('root'));

扩展阅读

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

<center><img src="https://cloud-image.ullrai.com/q/react_logo/" alt="React Logo"/></center>