Integrating Bootstrap with React allows React developers to use Bootstrap’s state-of-the-art grid system and its various other components.
通过将Bootstrap与React集成，React开发人员可以使用Bootstrap的最新网格系统及其各种其他组件。
In this tutorial, we’re going to:
在本教程中，我们将要：
- explore tools and techniques for building a user interface with Bootstrap’s look and feel for a React-powered web application 探索用于构建基于Reacts驱动的Web应用程序的Bootstrap外观的用户界面的工具和技术
use reactstrap to build a React contact list application.
使用reactstrap构建一个React联系人列表应用程序。
React is one of the most popular JavaScript technologies for interactive web applications. Its popularity derives from its component-based modular approach, composability and fast re-rendering algorithm.
React是用于交互式Web应用程序的最受欢迎JavaScript技术之一。 它的流行源自其基于组件的模块化方法，可组合性和快速重新渲染算法。
However, being a view library, React doesn’t have any built-in mechanism that can help us create designs that are responsive, sleek and intuitive. That’s where a front-end design framework like Bootstrap steps in.
但是，作为视图库，React没有任何内置机制可以帮助我们创建响应式，时尚且直观的设计。 这就是像Bootstrap这样的前端设计框架的所在。
为什么不能在React中仅包含Bootstrap组件 (Why You Can’t Just Include Bootstrap Components with React)
Combining Bootstrap with React isn’t as easy as adding <link rel="stylesheet" /> to an index.html file. This is because Bootstrap depends on jQuery for powering certain UI components. jQuery uses a direct DOM manipulation approach that’s contradictory to React’s declarative approach.
将Bootstrap与React结合起来并不像将<link rel="stylesheet" />到index.html文件那样容易。 这是因为Bootstrap依靠jQuery为某些UI组件提供动力。 jQuery使用直接的DOM操作方法，这与React的声明方法相矛盾。
If we need Bootstrap just for the responsive 12 column grid, or the components that don’t use jQuery, we can simply resort to the vanilla Bootstrap stylesheet. Otherwise, there are many libraries that take care of bridging the gap between React and Bootstrap. We’ll compare both methods so that we’ll be in a better position to choose the approach that works for our specific case.
如果我们仅需要响应式12列网格的Bootstrap或不使用jQuery的组件，则可以简单地使用原始的Bootstrap样式表。 否则，有许多库需要弥合React和Bootstrap之间的鸿沟。 我们将比较这两种方法，以便更好地选择适合于特定情况的方法。
Let’s get started!
让我们开始吧！
使用React设置Bootstrap样式表 (Setting up a Bootstrap Stylesheet with React)
Let’s use the Create React App CLI to create a React project, which requires zero configuration to get started.
让我们使用Create React App CLI创建一个React项目，该项目需要零配置才能开始。
We install Create React App and run the following command to start a new project and serve the development build:
我们安装Create React App并运行以下命令以启动一个新项目并为开发构建提供服务：
$ create-react-app react-and-bootstrap
$ cd react-and-bootstrap
$ npm startHere’s the directory structure created by Create React App:
这是由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.lockNext, let’s download the latest version of the Bootstrap library from Bootstrap’s official site. The package includes both the compiled and minified versions of the CSS and JavaScript. We’ll just copy the CSS and place it inside the public/ directory. For projects that just need the grid, there is a grid-specific stylesheet included too.
接下来，让我们从Bootstrap的官方站点下载最新版本的Bootstrap库。 该软件包包括CSS和JavaScript的编译版本和缩小版本。 我们将只复制CSS并将其放置在public/目录中。 对于只需要网格的项目，也包括特定于网格的样式表。
Next, we create a new directory for css inside public/, paste bootstrap.min.css in our newly created css directory, and link it from public/index.html:
接下来，我们在public/内为css创建一个新目录，将bootstrap.min.css粘贴到新创建的css目录中，并从public/index.html链接：
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>Alternatively, we can use a CDN to fetch the minified CSS:
另外，我们可以使用CDN来获取缩小CSS：
<link rel="stylesheet" href= "https://maxcdn.bootstrapcd
最低0.47元/天 解锁文章
2159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
