如何使用 React Bootstrap 和 NPM

2020-08-23 08:00飞浪

介绍

根据StackOverflow 2020 开发者调查，React 是目前最受欢迎的 JavaScript 框架。在本指南中，我们将讨论流行的 React UI 库React Bootstrap 。

虽然有很多 React UI 库可供选择，但 React Bootstrap 仍然是一个受欢迎的选择，因为它与传统 Bootstrap 相似，并且有多个 Bootstrap 主题可用。它是使用 React 和 Bootstrap 构建界面的最快方法之一。

安装

要安装react-bootstrap作为依赖项，请在 React 项目根目录中运行以下命令。

      npm install react-bootstrap bootstrap

或者如果您更喜欢 Yarn，请使用此命令。

      yarn add react-bootstrap bootstrap

你可能会问为什么除了react-bootstrap之外还要安装bootstrap。原因是react-bootstrap不依赖于特定版本的 Bootstrap，并且本身不包含任何 CSS，但使用react-bootstrap组件需要样式表。

导入 Bootstrap

要使用react-bootstrap组件，请将以下代码添加到src/index.js或App.js。

      import 'bootstrap/dist/css/bootstrap.min.css';

就是这样；您现在可以在应用程序中使用 React Bootstrap 及其组件。

基本用法

以下是五个最常用的 React Bootstrap 组件。

按钮
表格
导航栏
祝酒
情态动词

导入组件

有两种方法可以从 React Bootstrap 导入组件。

      import { Button } from 'react-bootstrap';

或者从库中提取特定组件。

      import Button from 'react-bootstrap/Button';

这种导入方式可以显著减少您最终发送给客户端的代码量。对于单个组件来说，这可能是最好的选择，但如果导入了多个组件，则不是。

使用组件

以下是如何在 React 应用程序中使用任何 React Bootstrap 组件。

导入要使用的组件，例如Button。

      import Button from 'react-bootstrap/Button';

使用可以在 React Bootstrap 文档中找到的 props 来导入组件。例如，Button有variant、type、target、size等props。

      // src/App.js
import React from "react";
import Button from "react-bootstrap/Button";

function App() {
  return (
    <div>
      <Button variant="primary">Click Me!</Button>
    </div>
  );
}

export default App;
    

按钮的外观如下。

即使删除了variant="primary"，按钮仍然看起来相同，因为primary是variant prop的默认值。

您可以尝试不同的道具并创建新的组合。

这是一个带有variant="danger"和disabled 的按钮。

      <Button variant="danger" disabled>Click Me!</Button>

这是一个带有variant="outline-success"和size="lg"的按钮。

      <Button variant="outline-success" size="lg">Click Me!</Button>

例子

此示例展示了使用 React Bootstrap 设计应用程序样式的逐步过程。

它将使用Rick and Morty API的角色端点，这是一个基于 REST/GraphQL 的免费 API，提供有关 Rick and Morty 电视节目的角色、剧集和地点的信息。

首先，从/character端点请求数据。一种方法是在useEffect()钩子中使用fetch()并将响应数据存储在状态变量中。通过提供一个空数组作为useEffect()的第二个参数，您可以确保仅在初始渲染后发出请求。

      const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://rickandmortyapi.com/api/character/")
      .then((res) => res.json())
      .then((data) => setData(data.results));
  }, []);

接下来，您需要决定要在应用中显示哪些数据；此示例将显示name、image、status和url 。您可以在此处查看 Character Schema 。

您可以在 React Bootstrap 的Card组件中显示字符数据。首先，使用数据状态上的.map()方法根据响应中的字符数制作空卡片。

      // src/App.js
import React, { useEffect, useState } from "react";

function App() {
 const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://rickandmortyapi.com/api/character/")
      .then((res) => res.json())
      .then((data) => setData(data.results));
  }, []);

  return (
    <div>
      {data.map((character) => (
          <Card key={character.id} style={{ width: "18rem" }}> 
         </Card>
      ))}
    </div>
  );
}

export default App;

这里，角色的id用作key prop 的值。你不会在应用中看到任何内容，因为<Card>组件本身是空的。

您可以使用Card.Img显示<Card>组件内的图像。

      <Card key={character.id} style={{ width: "18rem" }}>
      <Card.Img variant="top" src={character.image} />
</Card>

现在，您的应用程序将在一行中显示不同字符的图像，并且没有边距。

您可以添加className="m-4"来在卡片之间添加一些边距。

      <Card className="m-4" key={character.id} style={{ width: "18rem" }}>
   <Card.Img variant="top" src={character.image} />
</Card>

要显示名称和种类，请在Card.Body内使用Card.Title和Card.Text。

      <code c

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光28178浏览1500