一个教程：使用 React 完成一个登录OAuth 2.0授权的应用案例

## 前言

在本文中，我们将演示如何使用 React 完成一个非常小的程序，涉及登录OAuth 2.0授权，Token原理等内容，以及Rem适配等。该教程适合初学者，并提供详细的步骤和示例代码，帮助您快速入门。

## 创建 React 项目

首先，您需要创建一个 React 项目。您可以使用以下命令创建项目：

npx create-react-app my-app

这将在当前目录中创建一个名为 “my-app” 的新 React 项目。

## 安装必要的依赖项

接下来，您需要安装必要的依赖项。您可以使用以下命令安装它们：

npm install react-router-dom axios

这将安装 React 路由器和 Axios 库。

## 创建路由

接下来，您需要创建路由。您可以在 src/App.js 文件中创建它们。

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
};

export default App;

这将创建一个包含两个路由的路由器。第一个路由指向登录页面，第二个路由指向主页。

## 创建登录页面

接下来，您需要创建登录页面。您可以在 src/components/Login.js 文件中创建它。

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const history = useHistory();

  const handleSubmit = (e) => {
    e.preventDefault();

    // 这里需要发送登录请求

    history.push('/');
  };

  return (
    <div>
      <h1>登录</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
        <button type="submit">登录</button>
      </form>
    </div>
  );
};

export default Login;

这将创建一个简单的登录页面。当用户提交登录表单时，该页面将发送登录请求。如果登录成功，该页面将重定向到主页。

## 创建主页

接下来，您需要创建主页。您可以在 src/components/Home.js 文件中创建它。

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>主页</h1>
    </div>
  );
};

export default Home;

这将创建一个简单的主页。

## 运行项目

最后，您可以使用以下命令运行项目：

npm start

这将启动开发服务器并打开浏览器。您可以在浏览器中看到该项目。

## 总结

本文演示了如何使用 React 完成一个非常小的程序，涉及登录OAuth 2.0授权，Token原理等内容，以及Rem适配等。该教程适合初学者，并提供详细的步骤和示例代码，帮助您快速入门。