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

Jump to bottom

📝 Clarify ES6 & Polyfill support #1404

Closed
wants to merge 1 commit into from
Closed

📝 Clarify ES6 & Polyfill support #1404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 3 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ You will see the build errors and lint warnings in the console.

### `npm test`

Runs the test watcher in an interactive mode.
Runs the test watcher in an interactive mode.
By default, runs tests related to files changes since the last commit.

[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
Expand Down Expand Up @@ -115,6 +115,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap)
- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow)
- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables)
- [What JavaScript Features Can I Use?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#what-javascript-features-can-i-use)
- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators)
- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend)
- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development)
Expand Down Expand Up @@ -205,7 +206,7 @@ We are grateful to the authors of existing related projects for their ideas and

## Alternatives

If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.
If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.
Some of the more popular and actively maintained ones are:

* [insin/nwb](https://github.com/insin/nwb)
Expand Down
21 changes: 15 additions & 6 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Adding Bootstrap](#adding-bootstrap)
- [Adding Flow](#adding-flow)
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
- [What JavaScript Features Can I Use?](#what-javascript-features-can-i-use)
- [Can I Use Decorators?](#can-i-use-decorators)
- [Integrating with a Node Backend](#integrating-with-a-node-backend)
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
Expand Down Expand Up @@ -480,7 +481,7 @@ Now you are ready to use the imported React Bootstrap components within your com

Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept.

Recent versions of [Flow](http://flowtype.org/) work with Create React App projects out of the box.
Recent versions of [Flow](http://flowtype.org/) work with Create React App projects out of the box.

To add Flow to a Create React App project, follow these steps:

Expand Down Expand Up @@ -585,6 +586,14 @@ Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) f
>Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).

## What JavaScript Features Can I Use?

Most ES6 features are safe to use. If you so desire, you may view the [babel configuration here](https://github.com/facebookincubator/create-react-app/blob/master/packages/babel-preset-react-app/index.js).

Not all ES6 features are transpiled to ES3/ES5 or polyfilled, however. This is intentional to keep build sizes down. The following ES6 features are polyfilled on your behalf: `Object.assign`, `Promise`, and `fetch`. Therefore, if you are supporting older browsers, you may consider using `babel-polyfill` or a service like [polyfill.io](https://polyfill.io).

If you need tight control over which browsers to support, you may consider watching [PR #1249](https://github.com/facebookincubator/create-react-app/pull/1249), which enables user specified browser support, voiding the need for extra polyfill services/etc.

## Can I Use Decorators?

Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br>
Expand Down Expand Up @@ -938,7 +947,7 @@ This feature is experimental and still [has major usage issues](https://github.c

### Editor Integration

If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest extension](https://github.com/orta/vscode-jest) which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.
If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest extension](https://github.com/orta/vscode-jest) which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.

![VS Code Jest Preview](https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png)

Expand Down Expand Up @@ -1173,16 +1182,16 @@ GitHub Pages doesn't support routers that use the HTML5 `pushState` history API
### Heroku

Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).<br>
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).

#### Resolving "Module not found: Error: Cannot resolve 'file' or 'directory'"

Sometimes `npm run build` works locally but fails during deploy via Heroku with an error like this:

```
```
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
```

This means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
Expand Down