Skip to content

Commit d5081f3

Browse files
manavsehgalgaearon
authored andcommitted
Install React Bootstrap Dependency - section added (#313)
* Install React Bootstrap Dependency - section added * Updated with short intro clarification * Moved React Bootstrap after Add Images
1 parent 31e6cf1 commit d5081f3

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

template/README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,34 @@ Please be advised that this is also a custom feature of Webpack.
231231

232232
**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.
233233

234+
### Install React Bootstrap
235+
236+
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.
237+
238+
**Step 1.** Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well.
239+
240+
```
241+
npm install react-bootstrap --save
242+
npm install bootstrap@3 --save
243+
```
244+
245+
**Step 2.** Import Bootstrap CSS and optionally Bootstrap theme CSS in the ```index.js``` file.
246+
247+
```
248+
import './index.css';
249+
import 'bootstrap/dist/css/bootstrap.css';
250+
import 'bootstrap/dist/css/bootstrap-theme.css';
251+
```
252+
253+
**Step 3.** Import required React Bootstrap components within ```App.js``` file or your custom component file.
254+
255+
```
256+
import React, { Component } from 'react';
257+
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
258+
```
259+
260+
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.
261+
234262
### Display Lint Output in the Editor
235263

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

0 commit comments

Comments
 (0)