From 3857bd7d1d195a0c2d7adbffc81aff96f9b6d770 Mon Sep 17 00:00:00 2001 From: Jurie Horneman 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 6bb93795bad..77d95cb1bff 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). From 3cb549738163bff4d961e3f626b2b8a1c729086b Mon Sep 17 00:00:00 2001 From: Jurie Horneman 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 77d95cb1bff..13efe907998 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.: From b1030f26d52a8fbc53ef386f998aec1e8bba9bde Mon Sep 17 00:00:00 2001 From: Jurie Horneman 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 13efe907998..cdc2b51cb11 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). From 9c0a8770bf9c7076d4208b7d235dced58d0812ff Mon Sep 17 00:00:00 2001 From: Dan Abramov 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 cdc2b51cb11..e4657cfc55a 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 `