使用 React.js 和 Bootstrap

2020-11-03 08:00:00 · 飞浪

了解 Bootstrap 以及如何将其集成到您的 React 项目中，这样您就不必在每次创建应用程序时重新发明轮子。

介绍

Bootstrap是最流行的前端组件库。它包含大量现成的组件，几乎不需要自定义，具体取决于您的用例或要求。在本指南中，您将学习如何将 React（世界上最受欢迎的前端库）与 Bootstrap（世界上最受欢迎的组件库）结合使用。

设置应用程序

首先，在终端中运行以下命令来设置你的 React 项目。

npx create-react-app <YOUR_APP_NAME>

cd <YOUR_APP_NAME>

yarn start or npm start

<YOUR_APP_NAME>指的是您想要赋予 React 项目的名称。

如果你真的想快速开始，又不想费力地设置create-react-app项目，请打开浏览器并访问https://react.new ，通过https://codesandbox.io获取完全配置的 React 开发环境。

使用 Bootstrap

Bootstrap 有多种使用方式，包括：

下载引导生产文件
将 CDN 链接添加到您的 html 文件。
通过包管理器（例如 npm 或 yarn）下载。

在本指南中，您将使用包管理器安装 Bootstrap，并安装 React Bootstrap 库，该库附带您可以轻松使用的 React 组件。

运行以下命令安装react-bootstrap。

      npm install react-bootstrap bootstrap

							OR

yarn add react-bootstrap bootstrap

React Bootstrap 不使用 Bootstrap 的精确版本，但您需要添加一些默认样式才能使用组件。将以下代码行添加到您的src/index.js或src/App.js文件中。

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

导入组件

React Bootstrap 的组件可以通过两种方式导入。

导入特定组件

      import Modal from 'react-bootstrap/Modal';
    

导入react-bootstrap并使用一个组件

      import { Modal } from 'react-bootstrap/Modal';
    

注意： React Bootstrap 文档建议您使用第一种方法，因为它可以减少发送到客户端的代码量。第二种方法会将完整的库发送到客户端，从而增加不必要的字节并降低应用的性能。

创建页面

首先，导入所有需要的组件。如“导入组件”部分所述，所有组件都将单独导入。

      import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Button from 'react-bootstrap/Button';
    

接下来，向应用程序添加导航栏。

      function NavBar(){
  return(
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
  )
}
    

在应用程序中添加一个带有一些文本的巨型电子屏幕。

      function Heading(){
  return(
    <Jumbotron>
  <h1>Hello, world!</h1>
  <p>
    This is a simple bootstrap application built following a Pluralsight guide.
  </p>
  <p>
    <Button variant="primary">Learn more</Button>
  </p>
</Jumbotron>
  )
}
    

将巨型电子屏和导航栏添加到您的应用程序。

      export default function App() {
  return (
    <div className="App">
      <NavBar/>
      <Heading/>
    </div>
  );
}
    

您的完整应用程序应如下所示。

      import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Button from 'react-bootstrap/Button';

function NavBar(){
  return(
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
  )
}

function Heading(){
  return(
    <Jumbotron>
  <h1>Hello, world!</h1>
  <p>
    This is a simple bootstrap application built following a Pluralsight guide.
  </p>
  <p>
    <Button variant="primary">Learn more</Button>
  </p>
</Jumbotron>
  )
}
export default function App() {
  return (
    <div className="App">
      <NavBar/>
      <Heading/>
    </div>
  );
}
    

结论

就这样！在本指南中，您了解了 Bootstrap 以及如何将其集成到您的 React 项目中，这样您就不必在每次创建应用程序时都重新发明轮子。您可以关注React Bootstrap的官方文档以及官方 Bootstrap 文档。

如果您想进一步讨论这个问题或任何其他问题，请随时在 Twitter 上联系我，一如既往，@DesmondNyamador。注意安全！

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

_查看原文

技术指南

阅读全文

使用 React.js 和 Bootstrap

杭州电子商务研究院

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

import React from "react"; import 'bootstrap/dist/css/bootstrap.min.css' import Navbar from 'react-bootstrap/Navbar'; import Nav from 'react-bootstrap/Nav'; import NavDropdown from 'react-bootstrap/NavDropdown'; import Jumbotron from 'react-bootstrap/Jumbotron'; import Button from 'react-bootstrap/Button';

function NavBar(){ return( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="mr-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collasible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> </Nav> <Nav> <Nav.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ) }

function Heading(){ return( <Jumbotron> <h1>Hello, world!</h1> <p> This is a simple bootstrap application built following a Pluralsight guide. </p> <p> <Button variant="primary">Learn more</Button> </p> </Jumbotron> ) }

import React from "react"; import 'bootstrap/dist/css/bootstrap.min.css' import Navbar from 'react-bootstrap/Navbar'; import Nav from 'react-bootstrap/Nav'; import NavDropdown from 'react-bootstrap/NavDropdown'; import Jumbotron from 'react-bootstrap/Jumbotron'; import Button from 'react-bootstrap/Button'; function NavBar(){ return( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="mr-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collasible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> </Nav> <Nav> <Nav.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ) } function Heading(){ return( <Jumbotron> <h1>Hello, world!</h1> <p> This is a simple bootstrap application built following a Pluralsight guide. </p> <p> <Button variant="primary">Learn more</Button> </p> </Jumbotron> ) } export default function App() { return ( <div className="App"> <NavBar/> <Heading/> </div> ); }