From 567198869e1b0db0d3a45011546ee7493903c2d4 Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Sun, 12 Mar 2017 15:35:07 +0530
Subject: [PATCH 1/5] Add documentation about using code splitting

---
 README.md                                 |  1 +
 packages/eslint-config-react-app/index.js |  4 +-
 packages/react-scripts/template/README.md | 45 +++++++++++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0e4699320..d402907c1 100644
--- a/README.md
+++ b/README.md
@@ -118,6 +118,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
 - [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title)
 - [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency)
 - [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component)
+- [Code Splitting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)
 - [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet)
 - [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css)
 - [Adding a CSS Preprocessor (Sass, Less etc.)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)
diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js
index b909db3e2..792e4f500 100644
--- a/packages/eslint-config-react-app/index.js
+++ b/packages/eslint-config-react-app/index.js
@@ -169,12 +169,12 @@ module.exports = {
       {
         object: 'require',
         property: 'ensure',
-        message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import',
+        message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting',
       },
       {
         object: 'System',
         property: 'import',
-        message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import',
+        message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting',
       },
     ],
 
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 933e9b0cd..ed720c87d 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -20,6 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Changing the Page `<title>`](#changing-the-page-title)
 - [Installing a Dependency](#installing-a-dependency)
 - [Importing a Component](#importing-a-component)
+- [Code Splitting](#code-splitting)
 - [Adding a Stylesheet](#adding-a-stylesheet)
 - [Post-Processing CSS](#post-processing-css)
 - [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
@@ -348,6 +349,50 @@ Learn more about ES6 modules:
 * [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
 * [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
 
+## Code Splitting
+
+Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand when a specific event triggered. This project setup supports code splitting with `import()` dynamic module loading syntax [using webpack2](https://webpack.js.org/guides/code-splitting-import/) and babel. Dynamic `import()` is currently an ECMAScript [proposal](https://github.com/tc39/proposal-dynamic-import) in stage 3.
+
+`import()` takes the module name as an argument and returns a promise which always resolves to the namespace object of the module.
+
+Here is an example:
+
+### `moduleA.js`
+
+```js
+const moduleA = // ...
+
+export { moduleA };
+```
+### `App.js`
+
+```js
+import React, { Component } from 'react';
+
+class App extends Component {
+
+  handleClick(){
+    import('./moduleA').then(function({ moduleA }) {
+      // Use moduleA
+    }).catch(function(err) {
+      // Handle failure
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.handleClick}>Load</button>
+      </div>
+    );
+  }
+}
+
+export default App;
+```
+
+This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks 'Load' button.
+
 ## Adding a Stylesheet
 
 This project setup uses [Webpack](https://webpack.github.io/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
-- 
GitLab


From 6dee6c2ac35c2ff3829720e46fa724300033ee45 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 18 May 2017 20:36:55 -0400
Subject: [PATCH 2/5] Revise docs a bit

---
 packages/react-scripts/template/README.md | 26 ++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index f850a0260..5497aefda 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -213,7 +213,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [
 
 ## Displaying Lint Output in the Editor
 
->Note: this feature is available with `react-scripts@0.2.0` and higher.  
+>Note: this feature is available with `react-scripts@0.2.0` and higher.
 >It also only works with npm 3 or higher.
 
 Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
@@ -332,9 +332,10 @@ Learn more about ES6 modules:
 
 ## Code Splitting
 
-Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand when a specific event triggered. This project setup supports code splitting with `import()` dynamic module loading syntax [using webpack2](https://webpack.js.org/guides/code-splitting-import/) and babel. Dynamic `import()` is currently an ECMAScript [proposal](https://github.com/tc39/proposal-dynamic-import) in stage 3.
+Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.<br>
+This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3.
 
-`import()` takes the module name as an argument and returns a promise which always resolves to the namespace object of the module.
+`import()` takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module.
 
 Here is an example:
 
@@ -351,13 +352,14 @@ export { moduleA };
 import React, { Component } from 'react';
 
 class App extends Component {
-
-  handleClick(){
-    import('./moduleA').then(function({ moduleA }) {
-      // Use moduleA
-    }).catch(function(err) {
-      // Handle failure
-    });
+  handleClick = () => {
+    import('./moduleA')
+      .then(({ moduleA }) => {
+        // Use moduleA
+      })
+      .catch(err => {
+        // Handle failure
+      });
   }
 
   render() {
@@ -372,7 +374,7 @@ class App extends Component {
 export default App;
 ```
 
-This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks 'Load' button.
+This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button.
 
 ## Adding a Stylesheet
 
@@ -491,7 +493,7 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
    }
 ```
 
-Now running `npm start` and `npm run build` also builds Sass files. 
+Now running `npm start` and `npm run build` also builds Sass files.
 
 **Why `node-sass-chokidar`?**
 
-- 
GitLab


From 9432e8283b3e71c754275f5c5c6eb4b690d498ff Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 May 2017 04:59:18 +0100
Subject: [PATCH 3/5] Update README.md

---
 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 5497aefda..384e6749a 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -213,7 +213,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [
 
 ## Displaying Lint Output in the Editor
 
->Note: this feature is available with `react-scripts@0.2.0` and higher.
+>Note: this feature is available with `react-scripts@0.2.0` and higher.  
 >It also only works with npm 3 or higher.
 
 Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
-- 
GitLab


From 1458127a12f1d3f3d6a69e61ea157e8afbb8e5cd Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 May 2017 05:02:16 +0100
Subject: [PATCH 4/5] Update README.md

---
 packages/react-scripts/template/README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 384e6749a..e936a6007 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -192,6 +192,7 @@ In addition to [ES6](https://github.com/lukehoban/es6features) syntax features,
 * [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
 * [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
 * [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
+* [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal)
 * [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (stage 2 proposal).
 * [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
 
@@ -342,7 +343,7 @@ Here is an example:
 ### `moduleA.js`
 
 ```js
-const moduleA = // ...
+const moduleA = 'Hello';
 
 export { moduleA };
 ```
@@ -360,7 +361,7 @@ class App extends Component {
       .catch(err => {
         // Handle failure
       });
-  }
+  };
 
   render() {
     return (
@@ -376,6 +377,8 @@ export default App;
 
 This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button.
 
+You can also use it with `async` / `await` syntax if you prefer it.
+
 ## Adding a Stylesheet
 
 This project setup uses [Webpack](https://webpack.github.io/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
-- 
GitLab


From bcd1a61a4a811a0aa5b585c8be934ac232ef14bf Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 May 2017 05:03:41 +0100
Subject: [PATCH 5/5] Update README.md

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

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index e936a6007..66e97454c 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -333,10 +333,9 @@ Learn more about ES6 modules:
 
 ## Code Splitting
 
-Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.<br>
-This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3.
+Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.
 
-`import()` takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module.
+This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module.
 
 Here is an example:
 
-- 
GitLab