From 3857bd7d1d195a0c2d7adbffc81aff96f9b6d770 Mon Sep 17 00:00:00 2001 From: Jurie Horneman <jurie@jurie.org> Date: Fri, 28 Oct 2016 14:59:35 +0200 Subject: [PATCH 1/5] Added info on using global variables. See issue #972. --- packages/react-scripts/template/README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 6bb93795b..77d95cb1b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -24,6 +24,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Adding Flow](#adding-flow) - [Adding Custom Environment Variables](#adding-custom-environment-variables) - [Can I Use Decorators?](#can-i-use-decorators) +- [Using Global Variables defined elsewhere](#using-global-variables-defined-elsewhere) - [Integrating with a Node Backend](#integrating-with-a-node-backend) - [Proxying API Requests in Development](#proxying-api-requests-in-development) - [Using HTTPS in Development](#using-https-in-development) @@ -542,6 +543,20 @@ Please refer to these two threads for reference: Create React App will add decorator support when the specification advances to a stable stage. +## Using Global Variables defined elsewhere + +When you include a script in the HTML file that defines global variables, and you then try to use one of these variables in code managed by Create React Aapp, ESLint will complain because it cannot see the definition of the variable. + +You can avoid this by reading the global variable explicitly from the window object, e.g.: + +``` +const $ = window.$; +``` + +This also makes it obvious you are using a global variable. + +You can also force ESLint to ignore any line with `// eslint-disable-line`. + ## Integrating with a Node Backend Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) for instructions on integrating an app with a Node backend running on another port, and using `fetch()` to access it. You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo). -- GitLab From 3cb549738163bff4d961e3f626b2b8a1c729086b Mon Sep 17 00:00:00 2001 From: Jurie Horneman <jurie@jurie.org> Date: Fri, 28 Oct 2016 15:04:08 +0200 Subject: [PATCH 2/5] Fixed typo. --- 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 77d95cb1b..13efe9079 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -545,7 +545,7 @@ Create React App will add decorator support when the specification advances to a ## Using Global Variables defined elsewhere -When you include a script in the HTML file that defines global variables, and you then try to use one of these variables in code managed by Create React Aapp, ESLint will complain because it cannot see the definition of the variable. +When you include a script in the HTML file that defines global variables, and you then try to use one of these variables in code managed by Create React App, ESLint will complain because it cannot see the definition of the variable. You can avoid this by reading the global variable explicitly from the window object, e.g.: -- GitLab From b1030f26d52a8fbc53ef386f998aec1e8bba9bde Mon Sep 17 00:00:00 2001 From: Jurie Horneman <jurie@jurie.org> Date: Fri, 28 Oct 2016 15:06:41 +0200 Subject: [PATCH 3/5] Moved new section. --- packages/react-scripts/template/README.md | 30 +++++++++++------------ 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 13efe9079..cdc2b51cb 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -20,11 +20,11 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Post-Processing CSS](#post-processing-css) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) +- [Using Global Variables defined elsewhere](#using-global-variables-defined-elsewhere) - [Adding Bootstrap](#adding-bootstrap) - [Adding Flow](#adding-flow) - [Adding Custom Environment Variables](#adding-custom-environment-variables) - [Can I Use Decorators?](#can-i-use-decorators) -- [Using Global Variables defined elsewhere](#using-global-variables-defined-elsewhere) - [Integrating with a Node Backend](#integrating-with-a-node-backend) - [Proxying API Requests in Development](#proxying-api-requests-in-development) - [Using HTTPS in Development](#using-https-in-development) @@ -384,6 +384,20 @@ Keep in mind the downsides of this approach: However, it can be handy for referencing assets like [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest) from HTML, or including small scripts like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code. +## Using Global Variables defined elsewhere + +When you include a script in the HTML file that defines global variables, and you then try to use one of these variables in code managed by Create React App, ESLint will complain because it cannot see the definition of the variable. + +You can avoid this by reading the global variable explicitly from the window object, e.g.: + +``` +const $ = window.$; +``` + +This also makes it obvious you are using a global variable. + +Alternatively, you can force ESLint to ignore any line with `// eslint-disable-line`. + ## Adding Bootstrap 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: @@ -543,20 +557,6 @@ Please refer to these two threads for reference: Create React App will add decorator support when the specification advances to a stable stage. -## Using Global Variables defined elsewhere - -When you include a script in the HTML file that defines global variables, and you then try to use one of these variables in code managed by Create React App, ESLint will complain because it cannot see the definition of the variable. - -You can avoid this by reading the global variable explicitly from the window object, e.g.: - -``` -const $ = window.$; -``` - -This also makes it obvious you are using a global variable. - -You can also force ESLint to ignore any line with `// eslint-disable-line`. - ## Integrating with a Node Backend Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) for instructions on integrating an app with a Node backend running on another port, and using `fetch()` to access it. You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo). -- GitLab From 9c0a8770bf9c7076d4208b7d235dced58d0812ff Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Sun, 20 Nov 2016 19:29:01 +0000 Subject: [PATCH 4/5] Small tweaks --- packages/react-scripts/template/README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index cdc2b51cb..e4657cfc5 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -20,7 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Post-Processing CSS](#post-processing-css) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) -- [Using Global Variables defined elsewhere](#using-global-variables-defined-elsewhere) +- [Using Global Variables Defined Elsewhere](#using-global-variables-defined-elsewhere) - [Adding Bootstrap](#adding-bootstrap) - [Adding Flow](#adding-flow) - [Adding Custom Environment Variables](#adding-custom-environment-variables) @@ -384,19 +384,21 @@ Keep in mind the downsides of this approach: However, it can be handy for referencing assets like [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest) from HTML, or including small scripts like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code. -## Using Global Variables defined elsewhere +Note that if you add a `<script>` that declares global variables, you also need to read the next section on using them. -When you include a script in the HTML file that defines global variables, and you then try to use one of these variables in code managed by Create React App, ESLint will complain because it cannot see the definition of the variable. +## Using Global Variables Defined Elsewhere -You can avoid this by reading the global variable explicitly from the window object, e.g.: +When you include a script in the HTML file that defines global variables and try to use one of these variables in the code, the linter will complain because it cannot see the definition of the variable. + +You can avoid this by reading the global variable explicitly from the `window` object, for example: ``` const $ = window.$; ``` -This also makes it obvious you are using a global variable. +This makes it obvious you are using a global variable intentionally rather than because of a typo. -Alternatively, you can force ESLint to ignore any line with `// eslint-disable-line`. +Alternatively, you can force the linter to ignore any line by adding `// eslint-disable-line` after it. ## Adding Bootstrap -- GitLab From ba9de77ee0f46558e68a6d8a847957873c6dec95 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Sun, 20 Nov 2016 19:29:38 +0000 Subject: [PATCH 5/5] Syntax highlighting --- 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 e4657cfc5..8cdc1a59d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -392,7 +392,7 @@ When you include a script in the HTML file that defines global variables and try You can avoid this by reading the global variable explicitly from the `window` object, for example: -``` +```js const $ = window.$; ``` -- GitLab