如何使用 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的主要内容,如果未能解决你的问题,请参考以下文章