From 0f16436047a8ac8fbb32626f0c75d3a4e826e3f7 Mon Sep 17 00:00:00 2001 From: myappincome Date: Wed, 30 Nov 2016 14:02:47 +0000 Subject: [PATCH 1/3] =?UTF-8?q?Adding=20link=20to=20=E2=80=9CCustomizing?= =?UTF-8?q?=E2=80=9D=20create-react-app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As requested via https://twitter.com/dan_abramov/status/803712995280830466 --- packages/react-scripts/template/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index bb2d758245c..773bcbbc525 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -22,6 +22,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Using the `public` Folder](#using-the-public-folder) - [Using Global Variables](#using-global-variables) - [Adding Bootstrap](#adding-bootstrap) +- [Adding a Customized package](#adding-a-customized-package) - [Adding Flow](#adding-flow) - [Adding Custom Environment Variables](#adding-custom-environment-variables) - [Can I Use Decorators?](#can-i-use-decorators) @@ -430,6 +431,16 @@ 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. +## Adding a Customized package + +You can use a customized package in Create React App by following these steps: + +* Create a new package that depends on the package you wish to customize, e.g. Bootstrap +* Customize the build process of this package +* Depend on this customized package in your create-react-app based project + +Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165#.68e11h6hv) that follows these steps. + ## Adding Flow Flow typing is currently [not supported out of the box](https://github.com/facebookincubator/create-react-app/issues/72) with the default `.flowconfig` generated by Flow. If you run it, you might get errors like this: From 37aad1c7fc91441260d119c245edcf8b11a0fe70 Mon Sep 17 00:00:00 2001 From: myappincome Date: Wed, 30 Nov 2016 14:38:23 +0000 Subject: [PATCH 2/3] Update README.md --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 773bcbbc525..0380e4a7bb2 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -22,7 +22,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Using the `public` Folder](#using-the-public-folder) - [Using Global Variables](#using-global-variables) - [Adding Bootstrap](#adding-bootstrap) -- [Adding a Customized package](#adding-a-customized-package) +- [Customizing Bootstrap](#customizing-bootstrap) - [Adding Flow](#adding-flow) - [Adding Custom Environment Variables](#adding-custom-environment-variables) - [Can I Use Decorators?](#can-i-use-decorators) @@ -431,7 +431,7 @@ 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. -## Adding a Customized package +## Customizing Bootstrap You can use a customized package in Create React App by following these steps: From d8f3a6c33ba84bea6fdb3a8f73d95c5341f760af Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 24 Feb 2017 17:47:39 +0000 Subject: [PATCH 3/3] Tweak wording --- packages/react-scripts/template/README.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 0380e4a7bb2..c74059c4495 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -22,7 +22,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Using the `public` Folder](#using-the-public-folder) - [Using Global Variables](#using-global-variables) - [Adding Bootstrap](#adding-bootstrap) -- [Customizing Bootstrap](#customizing-bootstrap) + - [Using a Custom Theme](#using-a-custom-theme) - [Adding Flow](#adding-flow) - [Adding Custom Environment Variables](#adding-custom-environment-variables) - [Can I Use Decorators?](#can-i-use-decorators) @@ -409,7 +409,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 @@ -431,15 +431,16 @@ 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. -## Customizing Bootstrap +### Using a Custom Theme -You can use a customized package in Create React App by following these steps: +Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).
+We suggest the following approach: -* Create a new package that depends on the package you wish to customize, e.g. Bootstrap -* Customize the build process of this package -* Depend on this customized package in your create-react-app based project +* 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#.68e11h6hv) that follows these steps. +Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) that follows these steps. ## Adding Flow