CODEWITHSUNDEEP
react-starter-kitreactstrap
Rico Chan
Rico Chan

Reputation: 2396

How to install Reactstrap with React-Starter-kit

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/

Upvotes: 0

Views: 3915

Answers (4)

Codemaker2015
Codemaker2015

Reputation: 15679

You can install reactstrap using npm / yarn package manager.

Installation

npm install reactstrap react react-dom

Import Bootstrap in your application code:

npm install --save bootstrap

or

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

Usage

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

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

For more: Reactstrap - installation

Upvotes: 0

Yossi
Yossi

Reputation: 6027

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 on reactstrap's README to install bootstrap, reactstrap, react and react-dom:

npm install --save reactstrap@next react-addons-transition-group
react-addons-css-transition-group [email protected]
react-dom@^16.0.0

Hope this helps...

Upvotes: 0

conradMare
conradMare

Reputation: 1

Assuming you're using npm rather than 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/);

But I think that the last one is what you're looking for.

Upvotes: 0

Rico Chan
Rico Chan

Reputation: 2396

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';
  1. Then you can test reactstrap's Layout feature in your render function like so:
<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>

Upvotes: 1

Related Questions