Skip to content

Commit

Permalink
Adding link to “Customizing” create-react-app (facebook#1121)
Browse files Browse the repository at this point in the history
Add documentation for customizing Bootstrap theme
  • Loading branch information
myappincome authored and gaearon committed Feb 24, 2017
1 parent 46f729b commit 431b80f
Showing 1 changed file with 13 additions and 1 deletion.
14 changes: 13 additions & 1 deletion template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [When to Use the `public` Folder](#when-to-use-the-public-folder)
- [Using Global Variables](#using-global-variables)
- [Adding Bootstrap](#adding-bootstrap)
- [Using a Custom Theme](#using-a-custom-theme)
- [Adding Flow](#adding-flow)
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
- [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html)
Expand Down Expand Up @@ -585,7 +586,7 @@ Alternatively, you can force the linter to ignore any line by adding `// eslint-

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:

Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:
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
Expand All @@ -609,6 +610,17 @@ 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://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.

### Using a Custom Theme

Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).<br>
We suggest the following approach:

* Create a new package that depends on the package you wish to customize, e.g. Bootstrap.
* Add the necessary build steps to tweak the theme, and publish your package on npm.
* Install your own theme npm package as a dependency of your app.

Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) that follows these steps.

## Adding Flow

Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept.
Expand Down

0 comments on commit 431b80f

Please sign in to comment.