React-bootstrap setup for latest kriasoft/react-starter-kit

Question

I am a bit new to the world of ReactJS but I have been coding in Javascript for a while now. Loving what ReactJS is doing as I was coding in pure JS before using Design Patterns and OOP I consider this a HUGE upgrade for me.

I have followed several tutorials and read A LOT about React, so I ended up starting my first App using kriasoft/react-starter-kit in order to boost my productivity, also I find it good that I can have some guideline on how is the "right" way of writing react.

I have stuck while trying to integrate React-Bootstrap into the existing Starter-kit from kriasoft.

I can import different components from React-Bootstrap (such us Buttons etc.) by simply

import Button from '../../../node_modules/react-bootstrap';

in a component of my own, my problem is that I have no css on those React- Bootstrap components.

I have already gone through the React-Bootstrap getting started guide, but I was not so bright to figure out what I am doing wrong.

I have installed react-bootstrap using $ npm install react-bootstrap --save but I am not sure where I should include the latest compiled and minified CSS from bootstrap

<link rel="stylesheet" href="maxcdn....blahblah....bootstrap.min.css">.

Would be great if someone could help me setting this up by providing a guide or some intuition.

Answer 1

You might also consider looking into create-react-app https://github.com/facebookincubator/create-react-app

It's a starter kit built by the React team. It simplifies your workflow and lets you focus on learning/creating your react project.

To answer your question, once you install it via npm, You can use it via

import { Button, Row, Col } from 'react-bootstrap'

Then you can use it in your render

<Row>
    <Col md={6}>
        <Button bsStyle="primary" bsSize="large">Submit</Button>
    </Col>
</Row>

For Bootstrap css

The simplest way would be to use the cdn version of bootstrap css in your index.html file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

But if you want to import it as part of your build process, you'll need to install bootstrap npm install --save bootstrap since react-bootstrap doesn't come with the css file. Then import it as

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

You need to make sure your webpack is using css-loader.