带有React的引导程序：完整指南-DEV365 开发者社区

这是使用Bootstrap与React JS的综合指南。

在本指南中，我们将学习以下

用React安装Bootstrap的不同方法
使用Bootstrap和React
使用Bootstrap与React
如何使用ReactJ对Bootstrap进行故障排除
结论

1.与React安装引导程序的不同方式

在本节中，我们将探索可以在ReactJS Project中添加Bootstrap的不同方式

我使用CDN

将引导程序添加到React Project的最简单方法之一是使用CDN

要使用CDN添加引导程序，请复制CDN URL并在您的ReactJS Project中打开'public/index.html'文件

通过CDN添加引导程序有一些缺点

不允许基于组件的引导元素用法
它不如其他方法
创建膨胀，因为未使用的类，仍然添加到项目

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

和 JS

https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js

II使用NPM或纱线

您可以使用npm或yarn安装并将其导入到'src/index.js'文件

npm install bootstrap

然后在您的'src/index.js'中添加以下内容，例如

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

III使用React Bootstrap

React Bootstrap是Bootstrap的一种版本，该版本是从头开始为Bootstrap构建的

React Bootstrap允许您将Bootstrap用作反应组件，因此，这是一种使用Bootstrap的反应友好方式

npm install react-bootstrap bootstrap

然后以'src/index.js'
将其导入您的文件

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

和在组件文件中导入您需要的特定react Bootstrap组件

import Button from 'react-bootstrap/Button';

iv使用Reactstrap

ReactStrap是一个提供bootstrap组件的库，可以在React Application

中使用

您可以使用NPM轻松安装ReactStrap，例如

npm install --save reactstrap react react-dom

和组件文件中导入reactstrap bootstrap组件，例如

import {Button} from 'reactstrap';

2.使用bootstrap和React使用示例项目

让我们用bootstrap创建一个示例项目。

A。设置环境

我们需要在计算机上安装NPM和节点JS。然后使用NPX Create-next-App或任何其他React供电框架创建一个React应用程序，然后CD到您的项目文件夹中名称“项目文件夹示例 - 反应bootstrap应用”

npx create-next-app

b。将引导程序导入您的React应用程序

创建了一个React应用程序后，您可以在“ src/index.js”文件中导入Bootstrap CSS

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

C。在您的React应用程序中使用Bootstrap组件

React Bootstrap提供了多种组件，例如按钮，表格等来使用这些组件，只需将它们导入您的组件，例如So

在你的'src/App.js'中

import React from 'react';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div className="App">
      <Button variant="primary">Reload</Button>
    </div>
  );
}

export default App;

在上面的示例中，我们正在导入按钮组件，然后使用应用程序组件中的组件

中的组件

d。自定义引导程序

Bootstrap组件的最简单，最强大的功能之一是它们自定义

的能力

每个bootstrap组件都是由较小的组件制成的，例如按钮，因此可以根据需要进行自定义

import React from 'react';
import Button from 'react-bootstrap/Button';

function App() {
  const AppStyleButton = {
    backgroundColor: 'blue',
    margin: '10px 10px'
  };

  return (
    <div className="App">
      <Button style={AppStyleButton}>Reload</Button>
    </div>
  );
}

export default App;

e。使用Bootstrap网格系统构建响应式设计

Bootstrap的网格系统允许灵活响应的布局。

这是您可以在React-Bootstrap中使用网格系统的方式

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function App() {
  return (
    <Container>
      <Row>
        <Col xs={12} md={9}>
          <div className="content">Main Content Area</div>
        </Col>
        <Col xs={6} md={3}>
          <div className="sidebar">Sidebar area</div>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

在此示例中，我们可以使用“容器”，“行”和“ col”组件

创建响应式布局

我们已将XS（额外的小）屏幕尺寸分配给主内容（12），并在区域中等大小或更大的区域时分布了主内容和侧边栏

3.使用引导程序的不同示例和独特的用例

在本节中，我们将研究与React

使用Bootstrap的不同示例

示例1：模态

在此示例中，我们将使用引导和React创建模态，我们将使用React钩子来控制模态的可见性

考虑以下代码：

index.js文件：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

app.js 文件：

import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";

export default function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Make modal visible
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Title of the Modal </Modal.Title>
        </Modal.Header>
        <Modal.Body>Text inside of a Modal </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            close the modal
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

因此，在此示例中，我们用bootstrap和reactjs

进行了模态

让我们看一个带有bootstrap和react

的Navbar的示例

示例2：带有React和Bootstrap的Navbar

Navbar是网站中常见的设计功能，需要在设备之间做出响应。在此示例中，我们将构建一个具有React和Bootstrap的响应式Navbar

考虑以下代码：

import React from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";

export default function Example() {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">React-Bootstrap Nav Bar</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#about">about</Nav.Link>
          <NavDropdown title="list of services" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Some service</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">
              Some other service
            </NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">
              some service we offer
            </NavDropdown.Item>
            <NavDropdown.Divider />
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

并在index.js文件中添加CSS文件，如

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

因此，在此示例中，我们学会了如何使用React Bootstrap

创建导航栏

让我们考虑最后一个例子：

示例3：与引导和反应形成。

在此示例中，我们将使用bootstrap和React。

创建一个表单。

让我们考虑以下代码

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";

export default function Example() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    setValidated(true);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Group controlId="validationCustom01">
        <Form.Label> what is your Name</Form.Label>
        <Form.Control required type="text" placeholder="What is your Name" />
        <Form.Control.Feedback type="invalid">
          Please provide your name
        </Form.Control.Feedback>
      </Form.Group>
      <Button type="submit">Send the form</Button>
    </Form>
  );
}

并在index.js文件中添加CSS

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

4.如果引导与React不起作用，如何进行故障排除

如果Bootstrap在您的React JS Project中不起作用，则可以通过一些方法进行故障排除

bootstrap CSS没有导入：您需要在'index.js'文件中导入Bootstrap CSS，例如

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

2。 不正确的安装：确保您在应用程序中正确安装了引导程序或React-Bootstrap。您可以直接通过CDN或NPM安装引导程序

3。 使用组件而不导入组件：

使用它们时是否正确导入了组件。您需要在使用这些组件之前导入这些组件，例如在这里我们要导入一个按钮组件，然后在组件中使用它

import Button from 'react-bootstrap/Button';

<Button variant="secondary" onClick={handleClose}>
    close the modal
</Button>

您还可以调试为什么Bootstrap使用Console.Log和React Dev工具不起作用，并检查库是否已成功安装

5.结论

将引导程序与React集成在一起很容易，并且在帮助您设计应用程序和网页方面很强大

在本文中，我们讨论了多种方法将引导程序与React J的集成在一起，包括通过CDN添加引导程序，通过NPM

安装引导程序的方法

然后，我们创建了一个使用React JS和Bootstrap的示例应用程序，并理解了如何将Bootstrap添加到React JS Project

之后，我们考虑了使用Bootstrap与ReactJS使用的三个示例，示例1我们用React JS和Bootstrap构建了模态，并在示例2中使用ReactJ和Bootstrap构建了一个下拉列表，在示例3中，我们使用React JS和React JS和React JS和Bootstrap构建了一个下拉码。 bootstrap

最后，我们理解当引导程序不使用react js

时如何射击麻烦

感谢您阅读文章。

注意：本文最初写在DeadSimplechat博客上：Bootstrap with React: The Complete Guide