Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added info on using global variables. #976

Merged
merged 5 commits into from
Nov 20, 2016
Merged

Added info on using global variables. #976

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3857bd7
Added info on using global variables.
jhorneman Oct 28, 2016
3cb5497
Fixed typo.
jhorneman Oct 28, 2016
b1030f2
Moved new section.
jhorneman Oct 28, 2016
9c0a877
Small tweaks
gaearon Nov 20, 2016
ba9de77
Syntax highlighting
gaearon Nov 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: typo "Aapp" -> "App"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed, thanks.


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).
Expand Down