2

我对 ReactJS 的世界有点陌生，但我已经用 Javascript 编码有一段时间了。喜欢 ReactJS 所做的事情，因为我在使用设计模式和 OOP 之前使用纯 JS 进行编码，我认为这对我来说是一个巨大的升级。

我已经学习了几个教程并阅读了很多关于 React 的内容，所以我最终开始使用我的第一个应用程序kriasoft/react-starter-kit来提高我的工作效率，而且我发现我可以有一些关于如何“正确”编写 react 的指南很好.

我在尝试将React-Bootstrap集成到 kriasoft 现有的 Starter-kit 中时遇到了困难。

我可以通过简单地从 React-Bootstrap 导入不同的组件（比如我们的按钮等）

import Button from '../../../node_modules/react-bootstrap';

在我自己的组件中，我的问题是我在那些 React-Bootstrap 组件上没有 css。

我已经阅读了 React-Bootstrap 入门指南，但我并没有那么聪明，无法弄清楚我做错了什么。

我已经安装了react-bootstrapusing $ npm install react-bootstrap --save 但我不确定我应该在哪里包含来自 bootstrap 的最新编译和缩小的 CSS

<link rel="stylesheet" href="maxcdn....blahblah....bootstrap.min.css">.

如果有人可以通过提供指南或直觉来帮助我进行设置，那就太好了。

4

1 回答 1

1

您也可以考虑查看create-react-app https://github.com/facebookincubator/create-react-app

它是由 React 团队构建的入门工具包。它简化了你的工作流程，让你专注于学习/创建你的 React 项目。

要回答您的问题，一旦通过 安装它npm，您可以通过

import { Button, Row, Col } from 'react-bootstrap'

然后你可以在你的渲染中使用它

<Row>
    <Col md={6}>
        <Button bsStyle="primary" bsSize="large">Submit</Button>
    </Col>
</Row>

对于引导 css

最简单的方法是在 index.html 文件中使用引导 css 的 cdn 版本。

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

但是，如果您想将其作为构建过程的一部分导入，则需要安装 bootstrap npm install --save bootstrap，因为react-bootstrap不附带 css 文件。然后将其导入为

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

你需要确保你的 webpack 正在使用 css-loader。

于 2016-11-20T13:57:34.987 回答