How to install Reactstrap with React-Starter-kit

Question

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/

Answer 1

Steps:

1. Download the repo

2. type in the terminal

yarn add reactstrap

yarn add react-transition-group

yarn add bootstrap

3. 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>

Answer 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...