npm 包 react-devise-material-ui 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

react-devise-material-ui 是一个基于 React 和 Material UI 的用户认证组件库，可轻松添加基于 Devise 的用户身份验证到你的 React 应用程序中。

在本文中，我们将详细介绍如何安装和使用这个 npm 包。

安装

首先，我们需要使用 npm 或 yarn 安装 react-devise-material-ui 。

使用 npm 安装：

npm install react-devise-material-ui

使用 yarn 安装：

yarn add react-devise-material-ui

使用示例

接下来，让我们来编写一个简单的示例，以便演示如何使用 react-devise-material-ui 。

我们将创建一个简单的 React 应用，并添加一个登录页面和一个登录成功后的欢迎页面。

在我们开始之前，我们需要确保我们已经正确安装了以下依赖项：

React - 我们需要 React 来构建我们的应用程序 UI 。
Material UI - 我们使用 Material UI 来构建我们的 UI 组件。
react-devise-material-ui - 我们需要这个库来添加身份验证组件到我们的应用程序中。

1. 引入 `react-devise-material-ui` 和 Material UI

首先，在你的应用程序中导入必要的依赖项：react-devise-material-ui 和 Material UI 。

import React from "react";
import ReactDOM from "react-dom";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { DeviseMaterialUI } from "react-devise-material-ui";

2. 创建主题

然后，我们需要使用 Material UI 的 createMuiTheme 函数来创建应用程序的主题。

const theme = createMuiTheme();

3. 渲染 DeviseMaterialUI 组件

接下来，我们需要将 DeviseMaterialUI 组件包装在我们的应用程序中，并将其传递给 <ThemeProvider /> 组件。

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <DeviseMaterialUI />
  </ThemeProvider>,
  document.getElementById("root")
);

现在我们已经完成了如何使用 react-devise-material-ui 的基本配置。接下来，我们需要为我们的示例添加一些新的页面和路由。

4. 创建登录页面

我们将首先创建一个登录页面，这是用户在访问应用程序时看到的第一个页面。

在 index.html 中添加一个新的 <div>，并分配一个 ID：

<body>
  <div id="root"></div>
  <div id="login"></div>
</body>

在应用程序的主文件中，我们创建一个新的路由，并将其指向用于渲染登录页面的组件。

-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------

----------------
  -------------- --------------
    --------
      --------
        ------ ----- -------- --------------------- --
        ------ ----- --------------- ----------------------- --
        ----------------- --
      ---------
    ---------
  -----------------
  -------------------------------
--

现在，我们只需要编写 LoginPage 组件，并将其呈现在 / 路径上。

-- -------------------- ---- -------
-------- ----------- -
  ------ -
    ---- -----------
      --------------
      ------
        ------ ------------ ------------------- ------------ --
        ------ --------------- ---------------------- --------------- --
        ------- ----------------------------
      -------
    ------
  --
-

5. 创建欢迎页面

现在，我们已经创建了一个登录页，我们需要创建一个欢迎页，当用户成功登录时它将呈现给用户。

在 WelcomePage 组件中，可以简单地呈现一个欢迎消息。

function WelcomePage() {
  return (
    <div>
      <h1>Welcome!</h1>
      <p>You are now logged in!</p>
    </div>
  );
}

6. 添加导航

最后，我们需要添加导航菜单，以便用户可以轻松地从登录页面导航到欢迎页面。

我们将在 LoginPage 组件的底部添加一个链接，该链接将用户重定向到 /welcome 路径上。

-- -------------------- ---- -------
------ - ---- - ---- -------------------

-------- ----------- -
  ------ -
    ---- -----------
      --------------
      ------
        ------ ------------ ------------------- ------------ --
        ------ --------------- ---------------------- --------------- --
        ------- ----------------------------
      -------

      -----
        ----- ---------------- -- ------- -----------
      ------
    ------
  --
-

完整的示例代码

下面是完整的应用程序示例代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ - --------------- ------------- - ---- ---------------------------
------ - ---------------- - ---- ---------------------------
------ - ---- - ---- -------------------

----- ----- - -----------------

-------- ----------- -
  ------ -
    ---- -----------
      --------------
      ------
        ------ ------------ ------------------- ------------ --
        ------ --------------- ---------------------- --------------- --
        ------- ----------------------------
      -------

      -----
        ----- ---------------- -- ------- -----------
      ------
    ------
  --
-

-------- ------------- -
  ------ -
    -----
      -----------------
      ------ --- --- ------ -------
    ------
  --
-

----------------
  -------------- --------------
    --------
      --------
        ------ ----- -------- --------------------- --
        ------ ----- --------------- ----------------------- --
        ----------------- --
      ---------
    ---------
  -----------------
  -------------------------------
--

总结

在本文中，我们介绍了如何使用 npm 包 react-devise-material-ui 来添加身份验证组件到你的 React 应用程序中。

我们创建了一个简单的示例应用程序，并在其中添加了登录页面、欢迎页面和导航菜单。

希望这篇文章对你有帮助，让你更轻松地为你的应用程序添加身份验证功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055fe981e8991b448dd958

npm 包 react-devise-material-ui 使用教程

介绍

安装