How to install Reactstrap with React-Starter-kit

▼魔方 西西 提交于 2019-12-11 14:18:06

问题


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

reactstrap http://reactstrap.github.io/

What are the steps to install the reactstrap into the react-starter-kit? in order to use the grid layout?

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


回答1:


Steps:

  1. Download the repo

  2. type in the terminal

yarn add reactstrap

yarn add react-transition-group

yarn add bootstrap

  1. in your component files, type the following code

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

import { Container, Row, Col } from 'reactstrap';

4.Then you can test reactstrap's Layout feature in your render function like below:

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


How about using create-react-app? That's what I am using...

npm install -g create-react-app

create-react-app my-app

Then, follow the instructions in reactstrap's README to install 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

Hope this helps...



来源:https://stackoverflow.com/questions/48247229/how-to-install-reactstrap-with-react-starter-kit

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!