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

Posted

技术标签:

【中文标题】如何使用 React-Starter-kit 安装 Reactstrap【英文标题】:How to install Reactstrap with React-Starter-kit 【发布时间】:2018-06-23 03:41:16 【问题描述】:

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/

【问题讨论】:

webpack需要打包css吗?使用来自 cdn 的标准 css 要简单得多。安装/使用组件很简单。 【参考方案1】:

步骤:

    下载仓库 在终端输入:
yarn add reactstrap
yarn add react-transition-group
yarn add bootstrap
    在您的组件文件中,输入以下代码:
import 'bootstrap/dist/css/bootstrap.css';
import  Container, Row, Col  from 'reactstrap';
    然后您可以像这样在您的渲染函数中测试 reactstrap 的 Layout 功能:
<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>

【讨论】:

【参考方案2】:

假设您使用的是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/);

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

【讨论】:

【参考方案3】:

使用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

希望这会有所帮助...

【讨论】:

【参考方案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 - installation

【讨论】:

以上是关于如何使用 React-Starter-kit 安装 Reactstrap的主要内容,如果未能解决你的问题,请参考以下文章

如何在 webpack.config.js 中使用 ES6?

如何在webpack.config.js中使用ES6?

Node + React - 带连字符的 CSS 类名

记一次改造react脚手架的过程

如何安装使用camunda

无人值守安装 Suse 时如何使用 autoyast 安装外部包?