Skip to content
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Add reactstrap example instead of react-bootstrap in Readme 
  • Loading branch information
Brew-Brew committed Jun 29, 2018
commit 344f0d2c6f71c636878e9e5725a6c0205fb02b40
18 changes: 9 additions & 9 deletions packages/react-scripts/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -760,36 +760,36 @@ Alternatively, you can force the linter to ignore any line by adding `// eslint-

## Adding Bootstrap

You don’t have to use [React Bootstrap](https://react-bootstrap.github.io) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps:
You don’t have to use [reactstrap](https://reactstrap.github.io/) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps:

Install React Bootstrap and Bootstrap from npm. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:
Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well:

```sh
npm install --save react-bootstrap bootstrap@3
npm install bootstrap --save
npm install --save reactstrap react react-dom
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be one line and read:

npm install --save reactstrap bootstrap@4

```

Alternatively you may use `yarn`:

```sh
yarn add react-bootstrap bootstrap@3
yarn add bootstrap reactstrap react react-dom
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove react and react-dom, then make bootstrap -> bootstrap@4.

```

Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your ```src/index.js``` file:

```js
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import 'bootstrap/dist/css/bootstrap.min.css';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

we minify css ourselves

Copy link
Contributor Author

@Brew-Brew Brew-Brew Jun 29, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot create-react-app minify css :). I fixed readme as you reviewed, Thanks!

// Put any other imports below so that CSS from your
// components takes precedence over default styles.
```

Import required React Bootstrap components within ```src/App.js``` file or your custom component files:
Import required Reactstrap components within ```src/App.js``` file or your custom component files:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reactstrap

(lowercase please)


```js
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
import { Button } from 'reactstrap';
```

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://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.
Now you are ready to use the imported Reactstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/zx6658/d9f128cd57ca69e583ea2b5fea074238/raw/a56701c142d0c622eb6c20a457fbc01d708cb485/App.js) redone using Reactstrap.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reactstrap

(lowercase please)


### Using a Custom Theme

Expand Down