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

Question

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

我遵循了几个教程并阅读了很多关于 React 的内容，所以我最终使用 kriasoft/react-starter-kit 启动了我的第一个应用程序以提高我的工作效率，而且我发现我可以得到一些指导很好"right" 的写作方式如何反应。

我在尝试将 React-Bootstrap 集成到 kriasoft 现有的初学者工具包中时遇到了困难。

我可以从 React-Bootstrap 导入不同的组件（例如我们的按钮等）只需

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

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

我已经阅读了 React-Bootstrap 入门指南，但我不太清楚自己做错了什么。

我已经安装 react-bootstrap 使用 $ npm install react-bootstrap --save 但我不确定我应该在哪里包含来自 bootstrap

的最新编译和缩小的 CSS

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

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

Answer 1

这是一个由 React 团队构建的入门工具包。它简化了您的工作流程，让您可以专注于 learning/creating 您的 React 项目。

为了回答你的问题，一旦你通过 npm 安装它，你就可以通过

使用它

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

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

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

为Bootstrapcss

最简单的方法是在 index.html 文件中使用 bootstrap 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。

React-bootstrap setup for latest kriasoft/react-starter-kit