2

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.

Paschalidis Christos
  • 432
  • 4
  • 13

1 Answers1

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.

jpdelatorre
  • 3,573
  • 1
  • 20
  • 25
  • Do you know if I can use themes upon the default Bootstrap css ? – Paschalidis Christos Nov 20 '16 at 14:10
  • Updated my answer with info about including css – jpdelatorre Nov 20 '16 at 14:29
  • Do you recommend any other UI libraries that I should use instead of Bootstrap? I am already familiar with it Bootstrap so maybe I should try material UI for this project. (Learning is always good) I am open to any other suggestions. – Paschalidis Christos Nov 20 '16 at 14:42
  • Choosing a UI library is a matter of personal choice and the needs of your project. I just use Bootstrap since it works for my needs. Aside from Material UI, there's also another React UI framework that I saw http://blueprintjs.com/ – jpdelatorre Nov 20 '16 at 14:51
  • @PaschalidisChristos Please check out http://meta.stackexchange.com/a/5235 I've noticed you have a bunch of other questions that you haven't accepted an answer to. It helps the community to easily filter out answered and unanswered questions. – jpdelatorre Nov 22 '16 at 16:37