Skip to content

Commit

Permalink
Install React Bootstrap Dependency - section added (#313)
Browse files Browse the repository at this point in the history
* Install React Bootstrap Dependency - section added

* Updated with short intro clarification

* Moved React Bootstrap after Add Images
  • Loading branch information
manavsehgal authored and gaearon committed Aug 1, 2016
1 parent 31e6cf1 commit d5081f3
Showing 1 changed file with 28 additions and 0 deletions.
28 changes: 28 additions & 0 deletions template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,34 @@ Please be advised that this is also a custom feature of Webpack.

**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). However it may not be portable to some other environments, such as Node.js and Browserify. If you prefer to reference static assets in a more traditional way outside the module system, please let us know [in this issue](https://github.com/facebookincubator/create-react-app/issues/28), and we will consider support for this.

### Install React Bootstrap

React Bootstrap is not a dependency for using React however it is a popular alternative for integrating Bootstrap with React apps. It can be integrated with Create React App workflow using following three steps.

**Step 1.** Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well.

```
npm install react-bootstrap --save
npm install bootstrap@3 --save
```

**Step 2.** Import Bootstrap CSS and optionally Bootstrap theme CSS in the ```index.js``` file.

```
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
```

**Step 3.** Import required React Bootstrap components within ```App.js``` file or your custom component file.

```
import React, { Component } from 'react';
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
```

Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [App.js](https://github.com/manavsehgal/react-eshop/blob/master/src/App.js) redone using React Bootstrap.

### Display Lint Output in the Editor

>Note: this feature is available with `react-scripts@0.2.0` and higher.
Expand Down

0 comments on commit d5081f3

Please sign in to comment.