Skip to content

Commit 1ba93d0

Browse files
jhornemanalexdriaguine
authored andcommitted
Added info on using global variables. (facebook#976)
* Added info on using global variables. See issue facebook#972. * Fixed typo. * Moved new section. * Small tweaks * Syntax highlighting
1 parent 8fbe871 commit 1ba93d0

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

packages/react-scripts/template/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
2020
- [Post-Processing CSS](#post-processing-css)
2121
- [Adding Images and Fonts](#adding-images-and-fonts)
2222
- [Using the `public` Folder](#using-the-public-folder)
23+
- [Using Global Variables Defined Elsewhere](#using-global-variables-defined-elsewhere)
2324
- [Adding Bootstrap](#adding-bootstrap)
2425
- [Adding Flow](#adding-flow)
2526
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
@@ -385,6 +386,22 @@ Keep in mind the downsides of this approach:
385386

386387
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.
387388

389+
Note that if you add a `<script>` that declares global variables, you also need to read the next section on using them.
390+
391+
## Using Global Variables Defined Elsewhere
392+
393+
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.
394+
395+
You can avoid this by reading the global variable explicitly from the `window` object, for example:
396+
397+
```js
398+
const $ = window.$;
399+
```
400+
401+
This makes it obvious you are using a global variable intentionally rather than because of a typo.
402+
403+
Alternatively, you can force the linter to ignore any line by adding `// eslint-disable-line` after it.
404+
388405
## Adding Bootstrap
389406

390407
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:

0 commit comments

Comments
 (0)