diff --git a/README.md b/README.md index e9f8c1b6074..74c6efed23d 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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) @@ -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) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index e55e6c9f4f8..c37625e6fc2 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -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) @@ -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: @@ -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> @@ -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.  @@ -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.