react-starter-kit - 如何使用 React-Starter-kit 安装 Reactstrap

Question

react-starter-kit https://github.com/kriasoft/react-starter-kit

reactstrap http://reactstrap.github.io/

将 reactstrap 安装到 react-starter-kit 的步骤是什么？为了使用网格布局？

http://reactstrap.github.io/components/layout/

Answer 1

脚步：

1. 下载回购
2. 在终端输入：

yarn add reactstrap
yarn add react-transition-group
yarn add bootstrap

3. 在您的组件文件中，键入以下代码：

import 'bootstrap/dist/css/bootstrap.css';
import { Container, Row, Col } from 'reactstrap';

4. 然后你可以在你的渲染函数中测试 reactstrap 的布局功能，如下所示：

<Container>
  <Row>
    <Col>.col</Col>
  </Row>
  <Row>
    <Col>.col</Col>
    <Col>.col</Col>
    <Col>.col</Col>
    <Col>.col</Col>
  </Row>
  <Row>
    <Col xs="3">.col-3</Col>
    <Col xs="auto">.col-auto - variable width content</Col>
    <Col xs="3">.col-3</Col>
  </Row>
</Container>

Answer 2

使用create-react-app怎么样？这就是我正在使用的...

npm install -g create-react-app
create-react-app my-app

然后，按照 reactstrap 的README中的说明安装 bootstrap、reactstrap、react 和 react-dom：

npm install --save reactstrap@next react-addons-transition-group
react-addons-css-transition-group bootstrap@4.0.0-beta.2
react-dom@^16.0.0

希望这可以帮助...

Answer 3

假设您正在使用npm而不是yarn：

npm i --save reactstrap # (http://reactstrap.github.io/)
npm i --save react-bootstrap bootstrap # (https://react-bootstrap.github.io/)
npm install --save reactstrap react react-dom # (http://reactstrap.github.io/);

但我认为最后一个是你要找的。

Answer 4

你可以使用 npm / yarn 包管理器安装 reactstrap。

安装

npm install reactstrap react react-dom

在您的应用程序代码中导入 Bootstrap：

npm install --save bootstrap

或者

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

用法

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

更多信息： Reactstrap - 安装