如何将 Bootstrap 与 ReactJS 集成

2020-01-10 08:00:00 · 飞浪

介绍在本指南中，我们将重点介绍以下技能：在基于React的Web应用程序中构建UI并使用Bootstrap的外观。使用reactstrap开发一个用于列出联系人的React应用程

介绍

在本指南中，我们将重点介绍以下技能：

在基于 React 的 Web 应用程序中构建 UI 并使用 Bootstrap 的外观。
使用 reactstrap 开发一个用于列出联系人的 React 应用程序。

React 是开发交互式 Web 应用最常用的 JS 框架。但由于它是一个视图库，因此它不具备构建响应式且非常直观的设计的技术。为了克服这个问题，我们可以使用前端设计框架 Bootstrap。

为什么 Bootstrap 组件不能包含在 React 中

在 index.html 之类的 HTML 文件中添加<link rel=”stylesheet”/>之类的 HTML 标签很容易，但将 Bootstrap 添加到 React 时就不一样了。原因是 Bootstrap 依赖 jQuery 来运行特定的用户界面组件。而 jQuery 直接操作 DOM，这与 React 的声明式方法相矛盾。如果需求仅限于可接受的 12 列网格或不涉及 jQuery 的组件，我们可以将简单的原始 Bootstrap 样式表用于 Web 应用程序。否则，有不同的库可以支持将 Bootstrap 与 React 一起使用。

我们将研究这两种方法，以便我们能够选择最适合特定场景的方法。我们将重点介绍将 Bootstrap 与 React 应用程序集成的实现细节。

如何使用 React 设置 Bootstrap 样式表

我们将使用 Create React App CLI 来开始我们的 React 项目。它不需要任何配置即可启动。

以下命令可用于安装 Create React App 并以开发模式启动服务器：

      $ create-react-app my-bootstrap-react-app
$ cd my-bootstrap-react-app
$ npm start
    

Create React App 生成的目录结构如下：

      .
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock
    

下一步是从其官方网站获取最新的 Bootstrap 库。下载的包包含 JavaScript 和 CSS 文件的编译版本和最小化版本。对于只需要使用网格的应用程序，还有一个网格特定的样式表。下一步是在 public 中为 CSS 创建一个新文件夹，将 bootstrap.min.css 文件复制到那里，然后在 public/index.html 中添加所需的代码以链接它。

      <head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
    

另一种方法是使用 CDN 来获取最小化的 CSS：

      <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    

如何在 React 中使用常规 Bootstrap 类

将 Bootstrap 样式表添加到 React 应用后，我们就可以在 JSX 代码中使用 Bootstrap 类了。为了验证这一点，我们从 Bootstrap 演示站点复制了一些随机示例代码：

      import React from "react";
import {render} from "react-dom";
import Forms from "./Forms";
import NavBar from "./NavBar";

const App = () => (
  <div>
    <NavBar />
    <br />
    <div className="container">
      <div className="row">
        <div className=" col-lg-offset-4 col-lg-8">
          <Forms />
        </div>
      </div>
    </div>
  </div>
);

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

如果可以将 Bootstrap 类作为 React 组件导入以充分利用 React，那就太好了。例如，我们可以使用 grid、row 和 Ccolumn 组件来组织页面，而不是使用 HTML 类，如下所示：

      <!--Bootstrap Using HTML styles/classes-->

<div class="container">
  <div class="row">
    <div class="col-sm">
      Col 1 of 3
    </div>
    <div class="col-sm">
      Col 2 of 3
    </div>
    <div class="col-sm">
      Col 3 of 3
    </div>
  </div>
</div>

<!--Bootstrap Using React-based Components-->

<Grid>
  <Row>
      <Col sm>
        Col 1 of 3
    </Col>
    <Col sm>
        Col 2 of 3
    </Col>
     <Col sm>
        Col 3 of 3
    </Col>
  </Row>
</Grid>
    

幸运的是，我们不需要实现自己的库来实现这一点，因为已经有可用的库了。让我们探索其中的一些。

使用 React 和 Bootstrap 的第三方库

有一些库试图开发特定于 React 的 Bootstrap 实现，这将允许我们使用 JSX 组件以及使用 Bootstrap 样式。以下是一些可用于 React 项目的流行 Bootstrap 模块。

React-Bootstrap 是向 React 项目添加 Bootstrap 组件的顶级库之一。但其当前实现针对的是 Bootstrap v3，而不是最新版本。
reactstrap 是另一个库，它使我们能够在 React 应用程序中使用 Bootstrap 组件。与 React-Bootstrap 不同，reactstrap 是为与最新版本的 Bootstrap 一起使用而开发的。reactstrap 实现具有用于表单、按钮、表格、布局网格和导航的组件。它目前处于开发阶段，但为使用 React 和 Bootstrap 一起开发应用程序提供了一个不错的替代方案。

GitHub 上有一些替代方案，例如 React-UI 和一些特定领域的模块，例如 CoreUI-React、React-bootstrap-table，它们提供了广泛的实用程序，可以使用 React 为应用程序开发一些很酷的 UI。

在本指南中，我们将重点介绍 reactstrap，因为它最流行并且使用最新的 Bootstrap 版本。

如何设置 Reactstrap 库

首先，我们使用 npm 安装 reactstrap 库：

      npm install --save reactstrap@next

现在，可以从模块中导入相关组件，如下所示：

      import { Container, Row, Col} from 'reactstrap';
    

在此阶段，该库将无法按预期工作，因为它不包含 Bootstrap CSS。我们需要手动添加它，如下所示：

      npm install --save bootstrap

下一步是在我们的src/index.js文件中导入 Bootstrap CSS：

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

理解 Bootstrap 网格

Bootstrap 是使用响应式、移动优先的网格系统开发的，每页可使用 12 列。我们需要导入 Container 、 Row和Col组件才能使用网格。Container具有 fluid 属性，可将固定宽度布局更改为全宽布局。它本质上将.container-fluid bootstrap 类添加到网格。 Col 组件可以配置为使用xs、md、sm和lg等属性，这些属性的工作方式与Bootstrap 中的col-*类相同，例如<Col xs=”6”> </Col>。实现这一点的另一种方法是将一个对象传递给 props，其中包含可选属性，如size、order和offset。size属性表示网格中有多少列，而order使我们能够排列列并使用从 1 到 12 的值。可以使用offset属性将列移动到右侧。以下代码详细说明了reactstrap 中Grid的一些功能：

      import React, {Component} from "react";
import { render } from "react-dom";
import { Row, Col, Container} from "reactstrap";
import "bootstrap/dist/css/bootstrap.css";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
		<Container>
          <Row>
            <Col>
              <Box>.col </Box>
            </Col>
          </Row>
          <Row>
            <Col xs="4">
              <Box> .col-4 </Box>
            </Col>

            <Col xs="4">
              <Box> .col-4 </Box>
            </Col>
          </Row>

          <Row>
            <Col xs="6">
              <Box> .col-6 </Box>
            </Col>

            <Col xs="6">
              <Box> .col-6 </Box>
            </Col>
            <Col xs="6">
              <Box>.col-6 </Box>
            </Col>
          </Row>
          <Row>
            <Col>
              <Box>.col </Box>
            </Col>
            <Col>
              <Box>.col </Box>
            </Col>
            <Col>
              <Box> .col </Box>
            </Col>
            <Col>
              <Box>.col </Box>
            </Col>
          </Row>
          <Row>
            <Col xs="3">
              <Box> .col-3 </Box>
            </Col>
            <Col xs="auto">
              <Box>.col-auto is used for dynamic content</Box>
            </Col>
            <Col xs="3">
              <Box> .col-3 </Box>
            </Col>
          </Row>
          <Row>
            <Col sm={{ size: 4, order: 4, offset: 2 }}>
              <Box> .col-sm-4 .col-sm-order-4 .col-sm-offset-4 </Box>{" "}
            </Col>
          </Row>
          <Row>
            <Col sm="12" md={{ size: 6, offset: 3 }}>
              <Box> .col-sm-10 .col-md-4 .col-md-offset-5 </Box>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default App;
const Box = props => <div className="box">{props.children} </div>;
render(<App />, document.getElementById("root"));
    

将 Bootstrap 组件与 React 结合使用

现在我们已经熟悉了 reactstrap 及其工作原理，Bootstrap 4 中有许多组件可以通过 reactstrap 与 React 一起使用。我们将在本指南中介绍一些重要组件。

导航栏

reactstrap Navbars可用于导航栏并提供响应能力。为了更有效地组织导航链接，Navbar 由Nav、NavItem、NavbarBrand等子组件组成。可以通过在<Navbar>组件内添加<NavbarToggler>然后将<NavItems>包装到<Collapse>组件中来创建响应式 Navbar 。我们将查看以下代码，了解如何使用Navbar组件和 React 状态来保存切换数据；：

      export default class NavBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggleOpenState = this.toggleOpenState.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggleOpenState() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  <span class="

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

_查看原文

技术指南

React框架

阅读全文

如何将 Bootstrap 与 ReactJS 集成

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

. ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── README.md ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js └── yarn.lock

import React from "react"; import {render} from "react-dom"; import Forms from "./Forms"; import NavBar from "./NavBar"; const App = () => ( <div> <NavBar /> <br /> <div className="container"> <div className="row"> <div className=" col-lg-offset-4 col-lg-8"> <Forms /> </div> </div> </div> </div> ); render(<App />, document.getElementById("root"));

 <div class="container"> <div class="row"> <div class="col-sm"> Col 1 of 3 </div> <div class="col-sm"> Col 2 of 3 </div> <div class="col-sm"> Col 3 of 3 </div> </div> </div>  <Grid> <Row> <Col sm> Col 1 of 3 </Col> <Col sm> Col 2 of 3 </Col> <Col sm> Col 3 of 3 </Col> </Row> </Grid>

import React, {Component} from "react"; import { render } from "react-dom"; import { Row, Col, Container} from "reactstrap"; import "bootstrap/dist/css/bootstrap.css"; import "./App.css"; class App extends Component { render() { return ( <div> <Container> <Row> <Col> <Box>.col </Box> </Col> </Row> <Row> <Col xs="4"> <Box> .col-4 </Box> </Col> <Col xs="4"> <Box> .col-4 </Box> </Col> </Row> <Row> <Col xs="6"> <Box> .col-6 </Box> </Col> <Col xs="6"> <Box> .col-6 </Box> </Col> <Col xs="6"> <Box>.col-6 </Box> </Col> </Row> <Row> <Col> <Box>.col </Box> </Col> <Col> <Box>.col </Box> </Col> <Col> <Box> .col </Box> </Col> <Col> <Box>.col </Box> </Col> </Row> <Row> <Col xs="3"> <Box> .col-3 </Box> </Col> <Col xs="auto"> <Box>.col-auto is used for dynamic content</Box> </Col> <Col xs="3"> <Box> .col-3 </Box> </Col> </Row> <Row> <Col sm={{ size: 4, order: 4, offset: 2 }}> <Box> .col-sm-4 .col-sm-order-4 .col-sm-offset-4 </Box>{" "} </Col> </Row> <Row> <Col sm="12" md={{ size: 6, offset: 3 }}> <Box> .col-sm-10 .col-md-4 .col-md-offset-5 </Box> </Col> </Row> </Container> </div> ); } } export default App; const Box = props => <div className="box">{props.children} </div>; render(<App />, document.getElementById("root"));

export default class NavBarExample extends React.Component { constructor(props) { super(props); this.toggleOpenState = this.toggleOpenState.bind(this); this.state = { isOpen: false }; } toggleOpenState() { this.setState({ isOpen: !this.state.isOpen }); } <span class="