Skip to content

Commit e468a53

Browse files
myappincomerandycoulman
myappincome
authored andcommitted
Adding link to “Customizing” create-react-app (facebook#1121)
Add documentation for customizing Bootstrap theme
1 parent 133ebd7 commit e468a53

File tree

1 file changed

+13
-1
lines changed

1 file changed

+13
-1
lines changed

packages/react-scripts/template/README.md

+13-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
3030
- [When to Use the `public` Folder](#when-to-use-the-public-folder)
3131
- [Using Global Variables](#using-global-variables)
3232
- [Adding Bootstrap](#adding-bootstrap)
33+
- [Using a Custom Theme](#using-a-custom-theme)
3334
- [Adding Flow](#adding-flow)
3435
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
3536
- [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html)
@@ -585,7 +586,7 @@ Alternatively, you can force the linter to ignore any line by adding `// eslint-
585586

586587
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:
587588

588-
Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:
589+
Install React Bootstrap and Bootstrap from npm. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:
589590

590591
```
591592
npm install react-bootstrap --save
@@ -609,6 +610,17 @@ import { Navbar, Jumbotron, Button } from 'react-bootstrap';
609610

610611
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.
611612

613+
### Using a Custom Theme
614+
615+
Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).<br>
616+
We suggest the following approach:
617+
618+
* Create a new package that depends on the package you wish to customize, e.g. Bootstrap.
619+
* Add the necessary build steps to tweak the theme, and publish your package on npm.
620+
* Install your own theme npm package as a dependency of your app.
621+
622+
Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) that follows these steps.
623+
612624
## Adding Flow
613625

614626
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.

0 commit comments

Comments
 (0)