From f6b723b01bb68d80b0ca1581a852fbc55e8800ff Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Fri, 23 Jun 2017 06:44:00 +0700
Subject: [PATCH 01/12] docs(test): reorganize `Running Test` section

---
 packages/react-scripts/template/README.md | 116 +++++++++++-----------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index ca2879b9c1..a931a5a158 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -52,13 +52,13 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [Filename Conventions](#filename-conventions)
   - [Command Line Interface](#command-line-interface)
   - [Version Control Integration](#version-control-integration)
+  - [Continuous Integration](#continuous-integration)
   - [Writing Tests](#writing-tests)
   - [Testing Components](#testing-components)
   - [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
   - [Initializing Test Environment](#initializing-test-environment)
   - [Focusing and Excluding Tests](#focusing-and-excluding-tests)
   - [Coverage Reporting](#coverage-reporting)
-  - [Continuous Integration](#continuous-integration)
   - [Disabling jsdom](#disabling-jsdom)
   - [Snapshot Testing](#snapshot-testing)
   - [Editor Integration](#editor-integration)
@@ -1088,6 +1088,63 @@ Jest will always explicitly mention that it only ran tests related to the files
 
 Jest will always run all tests on a [continuous integration](#continuous-integration) server or if the project is not inside a Git or Mercurial repository.
 
+### Continuous Integration
+
+By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`.
+
+When creating a build of your application with `npm run build` linter warnings are not checked by default. Like `npm test`, you can force the build to perform a linter warning check by setting the environment variable `CI`. If any warnings are encountered then the build fails.
+
+Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
+
+### On CI servers
+#### Travis CI
+
+1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis.  You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
+1. Add a `.travis.yml` file to your git repository.
+```
+language: node_js
+node_js:
+  - 4
+  - 6
+cache:
+  directories:
+    - node_modules
+script:
+  - npm test
+  - npm run build
+```
+1. Trigger your first build with a git push.
+1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
+
+### On your own environment
+##### Windows (cmd.exe)
+
+```cmd
+set CI=true&&npm test
+```
+
+```cmd
+set CI=true&&npm run build
+```
+
+(Note: the lack of whitespace is intentional.)
+
+##### Linux, macOS (Bash)
+
+```bash
+CI=true npm test
+```
+
+```bash
+CI=true npm run build
+```
+
+The test command will force Jest to run tests once instead of launching the watcher.
+
+>  If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
+
+The build command will check for linter warnings and fail if any are found.
+
 ### Writing Tests
 
 To create tests, add `it()` (or `test()`) blocks with the name of the test and its code. You may optionally wrap them in `describe()` blocks for logical grouping but this is neither required nor recommended.
@@ -1228,63 +1285,6 @@ Run `npm test -- --coverage` (note extra `--` in the middle) to include a covera
 
 Note that tests run much slower with coverage so it is recommended to run it separately from your normal workflow.
 
-### Continuous Integration
-
-By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`.
-
-When creating a build of your application with `npm run build` linter warnings are not checked by default. Like `npm test`, you can force the build to perform a linter warning check by setting the environment variable `CI`. If any warnings are encountered then the build fails.
-
-Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
-
-### On CI servers
-#### Travis CI
-
-1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis.  You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
-1. Add a `.travis.yml` file to your git repository.
-```
-language: node_js
-node_js:
-  - 4
-  - 6
-cache:
-  directories:
-    - node_modules
-script:
-  - npm test
-  - npm run build
-```
-1. Trigger your first build with a git push.
-1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
-
-### On your own environment
-##### Windows (cmd.exe)
-
-```cmd
-set CI=true&&npm test
-```
-
-```cmd
-set CI=true&&npm run build
-```
-
-(Note: the lack of whitespace is intentional.)
-
-##### Linux, macOS (Bash)
-
-```bash
-CI=true npm test
-```
-
-```bash
-CI=true npm run build
-```
-
-The test command will force Jest to run tests once instead of launching the watcher.
-
->  If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
-
-The build command will check for linter warnings and fail if any are found.
-
 ### Disabling jsdom
 
 By default, the `package.json` of the generated project looks like this:

From 126089aa11a2b8705aca5551aeba883cebac72c5 Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Fri, 23 Jun 2017 07:54:38 +0700
Subject: [PATCH 02/12] docs(test): add instruction on how to integrate test in
 pre-commit hook

---
 packages/react-scripts/template/README.md | 33 +++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index a931a5a158..f5c11779f8 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -1145,6 +1145,39 @@ The test command will force Jest to run tests once instead of launching the watc
 
 The build command will check for linter warnings and fail if any are found.
 
+### Pre-commit Hook
+
+You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
+
+First, install [husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged):
+```sh
+npm install --save-dev husky lint-staged
+```
+
+Because we don't need the tests to run in watch mode, we need to set `CI` environment variable to `true`. As described in section [Continuous Integration](#continuous-integration).
+
+To make sure it's cross-platform, let's install [cross-env](https://github.com/kentcdodds/cross-env):
+```sh
+npm install --save-dev cross-env
+```
+
+Then add this config to `package.json`:
+```
+"scripts": {
+  ...
+  "precommit": "lint-staged",
+  "test:staged": "CI=true react-scripts test --env=jsdom --findRelatedTests"
+},
+"lint-staged": {
+  "src/**/*.js": [
+    "test:staged",
+    "git add"
+  ]
+}
+```
+
+This way, instead of running all tests, passing `--findRelatedTests` flag in test script will save our times a lot because Jest will run only the minimal amount of tests related to changes in your staging area.
+
 ### Writing Tests
 
 To create tests, add `it()` (or `test()`) blocks with the name of the test and its code. You may optionally wrap them in `describe()` blocks for logical grouping but this is neither required nor recommended.

From 89bc4348e016ee8947bb68a83dc51119263ba830 Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Fri, 23 Jun 2017 08:37:41 +0700
Subject: [PATCH 03/12] docs(test): use `cross-env`

---
 packages/react-scripts/template/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index f406bb6704..75b601d8d6 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -1166,7 +1166,7 @@ Then add this config to `package.json`:
 "scripts": {
   ...
   "precommit": "lint-staged",
-  "test:staged": "CI=true react-scripts test --env=jsdom --findRelatedTests"
+  "test:staged": "cross-env CI=true react-scripts test --env=jsdom --findRelatedTests"
 },
 "lint-staged": {
   "src/**/*.js": [

From 96fa3eda2593e0612386ce8f2bdadc6ea0f17f7b Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Tue, 27 Jun 2017 11:40:52 +0700
Subject: [PATCH 04/12] chore(docs): move VC & CI sections

---
 packages/react-scripts/template/README.md | 142 +++++++++++-----------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 385eb13f0a..7a8604b6c0 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -51,14 +51,14 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Running Tests](#running-tests)
   - [Filename Conventions](#filename-conventions)
   - [Command Line Interface](#command-line-interface)
-  - [Version Control Integration](#version-control-integration)
-  - [Continuous Integration](#continuous-integration)
   - [Writing Tests](#writing-tests)
   - [Testing Components](#testing-components)
   - [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
   - [Initializing Test Environment](#initializing-test-environment)
   - [Focusing and Excluding Tests](#focusing-and-excluding-tests)
   - [Coverage Reporting](#coverage-reporting)
+  - [Version Control Integration](#version-control-integration)
+  - [Continuous Integration](#continuous-integration)
   - [Disabling jsdom](#disabling-jsdom)
   - [Snapshot Testing](#snapshot-testing)
   - [Editor Integration](#editor-integration)
@@ -1084,75 +1084,6 @@ The watcher includes an interactive command-line interface with the ability to r
 
 ![Jest watch mode](http://facebook.github.io/jest/img/blog/15-watch.gif)
 
-### Version Control Integration
-
-By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests.
-
-Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press `a` in the watch mode to force Jest to run all tests.
-
-Jest will always run all tests on a [continuous integration](#continuous-integration) server or if the project is not inside a Git or Mercurial repository.
-
-### Continuous Integration
-
-By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`.
-
-When creating a build of your application with `npm run build` linter warnings are not checked by default. Like `npm test`, you can force the build to perform a linter warning check by setting the environment variable `CI`. If any warnings are encountered then the build fails.
-
-Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
-
-### On CI servers
-#### Travis CI
-
-1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis.  You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
-1. Add a `.travis.yml` file to your git repository.
-```
-language: node_js
-node_js:
-  - 4
-  - 6
-cache:
-  directories:
-    - node_modules
-script:
-  - npm test
-  - npm run build
-```
-1. Trigger your first build with a git push.
-1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
-
-#### CircleCI
-
-Follow [this article](https://medium.com/@knowbody/circleci-and-zeits-now-sh-c9b7eebcd3c1) to set up CircleCI with a Create React App project.
-
-### On your own environment
-##### Windows (cmd.exe)
-
-```cmd
-set CI=true&&npm test
-```
-
-```cmd
-set CI=true&&npm run build
-```
-
-(Note: the lack of whitespace is intentional.)
-
-##### Linux, macOS (Bash)
-
-```bash
-CI=true npm test
-```
-
-```bash
-CI=true npm run build
-```
-
-The test command will force Jest to run tests once instead of launching the watcher.
-
->  If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
-
-The build command will check for linter warnings and fail if any are found.
-
 ### Pre-commit Hook
 
 You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
@@ -1326,6 +1257,75 @@ Run `npm test -- --coverage` (note extra `--` in the middle) to include a covera
 
 Note that tests run much slower with coverage so it is recommended to run it separately from your normal workflow.
 
+### Version Control Integration
+
+By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests.
+
+Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press `a` in the watch mode to force Jest to run all tests.
+
+Jest will always run all tests on a [continuous integration](#continuous-integration) server or if the project is not inside a Git or Mercurial repository.
+
+### Continuous Integration
+
+By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`.
+
+When creating a build of your application with `npm run build` linter warnings are not checked by default. Like `npm test`, you can force the build to perform a linter warning check by setting the environment variable `CI`. If any warnings are encountered then the build fails.
+
+Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
+
+### On CI servers
+#### Travis CI
+
+1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis.  You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
+1. Add a `.travis.yml` file to your git repository.
+```
+language: node_js
+node_js:
+  - 4
+  - 6
+cache:
+  directories:
+    - node_modules
+script:
+  - npm test
+  - npm run build
+```
+1. Trigger your first build with a git push.
+1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
+
+#### CircleCI
+
+Follow [this article](https://medium.com/@knowbody/circleci-and-zeits-now-sh-c9b7eebcd3c1) to set up CircleCI with a Create React App project.
+
+### On your own environment
+##### Windows (cmd.exe)
+
+```cmd
+set CI=true&&npm test
+```
+
+```cmd
+set CI=true&&npm run build
+```
+
+(Note: the lack of whitespace is intentional.)
+
+##### Linux, macOS (Bash)
+
+```bash
+CI=true npm test
+```
+
+```bash
+CI=true npm run build
+```
+
+The test command will force Jest to run tests once instead of launching the watcher.
+
+>  If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
+
+The build command will check for linter warnings and fail if any are found.
+
 ### Disabling jsdom
 
 By default, the `package.json` of the generated project looks like this:

From 6cec5493b9abf8e3c61ed11b2bf3f3ddfbab6218 Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Tue, 27 Jun 2017 11:45:06 +0700
Subject: [PATCH 05/12] chore(docs): list `pre-commit` in TOC

---
 packages/react-scripts/template/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 7a8604b6c0..0159c3c972 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -51,6 +51,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Running Tests](#running-tests)
   - [Filename Conventions](#filename-conventions)
   - [Command Line Interface](#command-line-interface)
+  - [Pre-commit Hook](#pre-commit-hook)
   - [Writing Tests](#writing-tests)
   - [Testing Components](#testing-components)
   - [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)

From 5e42aea6fbfa02f53938228dc694766b3961d957 Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Tue, 27 Jun 2017 23:55:47 +0700
Subject: [PATCH 06/12] chore(docs): move `pre-commit` after `continuous
 integration` section

---
 packages/react-scripts/template/README.md | 68 +++++++++++------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 0159c3c972..3e58bfb665 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -51,7 +51,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Running Tests](#running-tests)
   - [Filename Conventions](#filename-conventions)
   - [Command Line Interface](#command-line-interface)
-  - [Pre-commit Hook](#pre-commit-hook)
   - [Writing Tests](#writing-tests)
   - [Testing Components](#testing-components)
   - [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
@@ -60,6 +59,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [Coverage Reporting](#coverage-reporting)
   - [Version Control Integration](#version-control-integration)
   - [Continuous Integration](#continuous-integration)
+  - [Pre-commit Hook](#pre-commit-hook)
   - [Disabling jsdom](#disabling-jsdom)
   - [Snapshot Testing](#snapshot-testing)
   - [Editor Integration](#editor-integration)
@@ -1085,39 +1085,6 @@ The watcher includes an interactive command-line interface with the ability to r
 
 ![Jest watch mode](http://facebook.github.io/jest/img/blog/15-watch.gif)
 
-### Pre-commit Hook
-
-You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
-
-First, install [husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged):
-```sh
-npm install --save-dev husky lint-staged
-```
-
-Because we don't need the tests to run in watch mode, we need to set `CI` environment variable to `true`. As described in section [Continuous Integration](#continuous-integration).
-
-To make sure it's cross-platform, let's install [cross-env](https://github.com/kentcdodds/cross-env):
-```sh
-npm install --save-dev cross-env
-```
-
-Then add this config to `package.json`:
-```
-"scripts": {
-  ...
-  "precommit": "lint-staged",
-  "test:staged": "cross-env CI=true react-scripts test --env=jsdom --findRelatedTests"
-},
-"lint-staged": {
-  "src/**/*.js": [
-    "test:staged",
-    "git add"
-  ]
-}
-```
-
-This way, instead of running all tests, passing `--findRelatedTests` flag in test script will save our times a lot because Jest will run only the minimal amount of tests related to changes in your staging area.
-
 ### Writing Tests
 
 To create tests, add `it()` (or `test()`) blocks with the name of the test and its code. You may optionally wrap them in `describe()` blocks for logical grouping but this is neither required nor recommended.
@@ -1327,6 +1294,39 @@ The test command will force Jest to run tests once instead of launching the watc
 
 The build command will check for linter warnings and fail if any are found.
 
+### Pre-commit Hook
+
+You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
+
+First, install [husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged):
+```sh
+npm install --save-dev husky lint-staged
+```
+
+Because we don't need the tests to run in watch mode, we need to set `CI` environment variable to `true`. As described in section [Continuous Integration](#continuous-integration).
+
+To make sure it's cross-platform, let's install [cross-env](https://github.com/kentcdodds/cross-env):
+```sh
+npm install --save-dev cross-env
+```
+
+Then add this config to `package.json`:
+```
+"scripts": {
+  ...
+  "precommit": "lint-staged",
+  "test:staged": "cross-env CI=true react-scripts test --env=jsdom --findRelatedTests"
+},
+"lint-staged": {
+  "src/**/*.js": [
+    "test:staged",
+    "git add"
+  ]
+}
+```
+
+This way, instead of running all tests, passing `--findRelatedTests` flag in test script will save our times a lot because Jest will run only the minimal amount of tests related to changes in your staging area.
+
 ### Disabling jsdom
 
 By default, the `package.json` of the generated project looks like this:

From d437cd898e49b1127a10c9565b0518fcb532172d Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Tue, 4 Jul 2017 16:23:55 +0700
Subject: [PATCH 07/12] docs: add `Useful Hooks` section

---
 packages/react-scripts/template/README.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 3e58bfb665..63da37a57e 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -13,6 +13,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [npm test](#npm-test)
   - [npm run build](#npm-run-build)
   - [npm run eject](#npm-run-eject)
+- [Useful Hooks](#useful-hooks)
 - [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
 - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
 - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
@@ -184,6 +185,14 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
+## Useful Hooks
+
+Git Hooks are event-based scripts that get executed before or after certain events, such as: commit, push, receive, etc.
+
+There are many benefits you can get by adding/integrating Hooks to a repository. For example: make sure changes you made passed the tests before committing, make sure commit message follow the conventions, format code automatically before committing, and so on.
+
+To learn more about Git Hooks, read [the official documentation](https://git-scm.com/docs/githooks).
+
 ## Supported Language Features and Polyfills
 
 This project supports a superset of the latest JavaScript standard.<br>

From a4983acde05e42111cff9492f64fed14b8107636 Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Tue, 4 Jul 2017 16:27:59 +0700
Subject: [PATCH 08/12] docs: move `Formatting Code Automatically` under
 `Useful Hooks`

---
 packages/react-scripts/template/README.md | 102 +++++++++++-----------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 0290fcaa61..b1b04e1527 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -14,11 +14,11 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [npm run build](#npm-run-build)
   - [npm run eject](#npm-run-eject)
 - [Useful Hooks](#useful-hooks)
+  - [Formatting Code Automatically](#formatting-code-automatically)
 - [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
 - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
 - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
 - [Debugging in the Editor](#debugging-in-the-editor)
-- [Formatting Code Automatically](#formatting-code-automatically)
 - [Changing the Page `<title>`](#changing-the-page-title)
 - [Installing a Dependency](#installing-a-dependency)
 - [Importing a Component](#importing-a-component)
@@ -199,6 +199,56 @@ There are many benefits you can get by adding/integrating Hooks to a repository.
 
 To learn more about Git Hooks, read [the official documentation](https://git-scm.com/docs/githooks).
 
+### Formatting Code Automatically
+
+Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/).
+
+To format our code whenever we make a commit in git, we need to install the following dependencies:
+
+```sh
+npm install --save husky lint-staged prettier
+```
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add husky lint-staged prettier
+```
+
+* `husky` makes it easy to use githooks as if they are npm scripts.
+* `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
+* `prettier` is the JavaScript formatter we will run before commits.
+
+Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root.
+
+Add the following line to `scripts` section:
+
+```diff
+  "scripts": {
++   "precommit": "lint-staged",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+```
+
+Next we add a 'lint-staged' field to the `package.json`, for example:
+
+```diff
+  "dependencies": {
+    // ...
+  },
++ "lint-staged": {
++   "src/**/*.{js,jsx,json,css}": [
++     "prettier --single-quote --write",
++     "git add"
++   ]
++ },
+  "scripts": {
+```
+
+Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time.
+
+Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page.
+
 ## Supported Language Features and Polyfills
 
 This project supports a superset of the latest JavaScript standard.<br>
@@ -279,56 +329,6 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
 
 Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
 
-## Formatting Code Automatically
-
-Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/).
-
-To format our code whenever we make a commit in git, we need to install the following dependencies:
-
-```sh
-npm install --save husky lint-staged prettier
-```
-
-Alternatively you may use `yarn`:
-
-```sh
-yarn add husky lint-staged prettier
-```
-
-* `husky` makes it easy to use githooks as if they are npm scripts.
-* `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
-* `prettier` is the JavaScript formatter we will run before commits.
-
-Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root.
-
-Add the following line to `scripts` section:
-
-```diff
-  "scripts": {
-+   "precommit": "lint-staged",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-```
-
-Next we add a 'lint-staged' field to the `package.json`, for example:
-
-```diff
-  "dependencies": {
-    // ...
-  },
-+ "lint-staged": {
-+   "src/**/*.{js,jsx,json,css}": [
-+     "prettier --single-quote --write",
-+     "git add"
-+   ]
-+ },
-  "scripts": {
-```
-
-Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time.
-
-Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page.
-
 ## Changing the Page `<title>`
 
 You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else.

From c16f277539661583934a8d5a916eec7537c1f13c Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Tue, 4 Jul 2017 16:31:33 +0700
Subject: [PATCH 09/12] docs: update link about `prettier` to point to CRA
 internal docs

This will make integration `prettier` easier for CRA users
---
 packages/react-scripts/template/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index b1b04e1527..5c498b9be8 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -298,7 +298,7 @@ Now your editor should report the linting warnings.
 
 Note that even if you edit your `.eslintrc` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.
 
-If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules.
+If you want to enforce a coding style for your project, consider using [Prettier](#formatting-code-automatically) instead of ESLint style rules.
 
 ## Debugging in the Editor
 

From 1f29882404ca82ad1d2c7cfedeabdca020e113d2 Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Tue, 4 Jul 2017 16:33:50 +0700
Subject: [PATCH 10/12] docs: move `Pre-Commit Hook` under `Useful Hooks`

---
 packages/react-scripts/template/README.md | 68 +++++++++++------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 5c498b9be8..895d7631c7 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -15,6 +15,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [npm run eject](#npm-run-eject)
 - [Useful Hooks](#useful-hooks)
   - [Formatting Code Automatically](#formatting-code-automatically)
+  - [Pre-commit Hook](#pre-commit-hook)
 - [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
 - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
 - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
@@ -62,7 +63,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [Coverage Reporting](#coverage-reporting)
   - [Version Control Integration](#version-control-integration)
   - [Continuous Integration](#continuous-integration)
-  - [Pre-commit Hook](#pre-commit-hook)
   - [Disabling jsdom](#disabling-jsdom)
   - [Snapshot Testing](#snapshot-testing)
   - [Editor Integration](#editor-integration)
@@ -249,6 +249,39 @@ Now, whenever you make a commit, Prettier will format the changed files automati
 
 Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page.
 
+### Pre-commit Hook
+
+You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
+
+First, install [husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged):
+```sh
+npm install --save-dev husky lint-staged
+```
+
+Because we don't need the tests to run in watch mode, we need to set `CI` environment variable to `true`. As described in section [Continuous Integration](#continuous-integration).
+
+To make sure it's cross-platform, let's install [cross-env](https://github.com/kentcdodds/cross-env):
+```sh
+npm install --save-dev cross-env
+```
+
+Then add this config to `package.json`:
+```
+"scripts": {
+  ...
+  "precommit": "lint-staged",
+  "test:staged": "cross-env CI=true react-scripts test --env=jsdom --findRelatedTests"
+},
+"lint-staged": {
+  "src/**/*.js": [
+    "test:staged",
+    "git add"
+  ]
+}
+```
+
+This way, instead of running all tests, passing `--findRelatedTests` flag in test script will save our times a lot because Jest will run only the minimal amount of tests related to changes in your staging area.
+
 ## Supported Language Features and Polyfills
 
 This project supports a superset of the latest JavaScript standard.<br>
@@ -1429,39 +1462,6 @@ The test command will force Jest to run tests once instead of launching the watc
 
 The build command will check for linter warnings and fail if any are found.
 
-### Pre-commit Hook
-
-You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
-
-First, install [husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged):
-```sh
-npm install --save-dev husky lint-staged
-```
-
-Because we don't need the tests to run in watch mode, we need to set `CI` environment variable to `true`. As described in section [Continuous Integration](#continuous-integration).
-
-To make sure it's cross-platform, let's install [cross-env](https://github.com/kentcdodds/cross-env):
-```sh
-npm install --save-dev cross-env
-```
-
-Then add this config to `package.json`:
-```
-"scripts": {
-  ...
-  "precommit": "lint-staged",
-  "test:staged": "cross-env CI=true react-scripts test --env=jsdom --findRelatedTests"
-},
-"lint-staged": {
-  "src/**/*.js": [
-    "test:staged",
-    "git add"
-  ]
-}
-```
-
-This way, instead of running all tests, passing `--findRelatedTests` flag in test script will save our times a lot because Jest will run only the minimal amount of tests related to changes in your staging area.
-
 ### Disabling jsdom
 
 By default, the `package.json` of the generated project looks like this:

From 2c662c1bc50ba1a246e92ae2773909384948e428 Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Tue, 4 Jul 2017 16:38:57 +0700
Subject: [PATCH 11/12] docs: update heading

---
 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 895d7631c7..5438fe8b5c 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -15,7 +15,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [npm run eject](#npm-run-eject)
 - [Useful Hooks](#useful-hooks)
   - [Formatting Code Automatically](#formatting-code-automatically)
-  - [Pre-commit Hook](#pre-commit-hook)
+  - [Running Tests Against Staged Files](#running-tests-against-staged-files)
 - [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
 - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
 - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
@@ -249,7 +249,7 @@ Now, whenever you make a commit, Prettier will format the changed files automati
 
 Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page.
 
-### Pre-commit Hook
+### Running Tests Against Staged Files
 
 You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
 

From b0942aea957572d778a72a56b4290a7080d0ba8c Mon Sep 17 00:00:00 2001
From: Lufty Wiranda <lufty.wiranda@gmail.com>
Date: Thu, 6 Jul 2017 04:05:34 +0700
Subject: [PATCH 12/12] style: add whitespace

---
 packages/react-scripts/template/README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 5438fe8b5c..8c31e5242a 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -254,6 +254,7 @@ Next you might want to integrate Prettier in your favorite editor. Read the sect
 You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
 
 First, install [husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged):
+
 ```sh
 npm install --save-dev husky lint-staged
 ```
@@ -261,11 +262,13 @@ npm install --save-dev husky lint-staged
 Because we don't need the tests to run in watch mode, we need to set `CI` environment variable to `true`. As described in section [Continuous Integration](#continuous-integration).
 
 To make sure it's cross-platform, let's install [cross-env](https://github.com/kentcdodds/cross-env):
+
 ```sh
 npm install --save-dev cross-env
 ```
 
 Then add this config to `package.json`:
+
 ```
 "scripts": {
   ...