最新kriasoft / react-starter-kit的React-bootstrap设置

Question

我对ReactJS的世界有点新意，但我已经用Javascript编写了一段时间了。 喜欢ReactJS正在做的事情，因为我在使用Design Patterns和OOP之前使用纯JS进行编码我认为这对我来说是一个巨大的升级。

我已经按照几个教程阅读了很多关于React的内容，所以我最终使用kriasoft/react-starter-kit启动了我的第一个应用程序，以提高我的工作效率，同时我发现我可以对如何获得一些指导很好“正确”的写作方式有所反应。

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

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

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

在我自己的一个组件中，我的问题是我没有关于那些React-Bootstrap组件的CSS。

我已经阅读了React-Bootstrap入门指南，但是我并不是很明白我弄错了什么。

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

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

如果有人可以通过提供指导或直觉来帮助我设置它，那将会很棒。

Answer 1

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

它是React团队制作的入门套件。它简化了您的工作流程，让您专注于学习/创建您的反应项目。

要回答您的问题，通过npm安装后，您可以通过

使用它

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

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

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

对于Bootstrap css

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

<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。