Merge pull request #99 from facebook/master

merging upstream master

Author: joeycozza

.github/stale.yml

@@ -16,8 +16,13 @@ exemptLabels:
   - "issue: bug"
   - "issue: needs investigation"
   - "issue: proposal"
-  - "tag: bug fix"
   - "tag: breaking change"
+  - "tag: bug fix"
+  - "tag: documentation"
+  - "tag: enhancement"
+  - "tag: internal"
+  - "tag: new feature"
+  - "tag: underlying tools"
 
 # Set to true to ignore issues in a project (defaults to false)
 exemptProjects: true

CHANGELOG-2.x.md

@@ -152,7 +152,7 @@ By default git would use `CRLF` line endings which would cause the scripts to fa
 9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages.
 10. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration.
 
-Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --canary=next --exact --cd-version patch --npm-tag=next` instead of `npm run publish`.
+Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- prepatch --canary --preid next --dist-tag next --npm-client npm --force-publish` instead of `npm run publish`.
 
 ---
 

CHANGELOG.md

@@ -42,6 +42,12 @@ If you set `SASS_PATH=node_modules:src`, this will allow you to do imports like
 @import 'nprogress/nprogress'; // importing a css file from the nprogress node module
 ```
 
+> **Note:** For windows operating system, use below syntax
+>
+> ```
+> SASS_PATH=./node_modules;./src
+> ```
+
 > **Tip:** You can opt into using this feature with [CSS modules](adding-a-css-modules-stylesheet.md) too!
 
 > **Note:** If you're using Flow, override the [module.file_ext](https://flow.org/en/docs/config/options/#toc-module-file-ext-string) setting in your `.flowconfig` so it'll recognize `.sass` or `.scss` files. You will also need to include the `module.file_ext` default settings for `.js`, `.jsx`, `.mjs` and `.json` files.

CONTRIBUTING.md

@@ -3,7 +3,7 @@ id: adding-bootstrap
 title: Adding Bootstrap
 ---
 
-While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option, that strives for complete parity with bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of some features.
+While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option that strives for complete parity with Bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of some features.
 
 Each project's respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well:
 

docusaurus/docs/adding-a-sass-stylesheet.md

@@ -0,0 +1,71 @@
+---
+id: adding-css-reset
+title: Adding a CSS Reset
+sidebar_label: Adding CSS Reset
+---
+
+This project setup uses [PostCSS Normalize] for adding a [CSS Reset].
+
+To start using it, add `@import-normalize;` anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is `index.css` or `App.css`.
+
+## `index.css`
+
+```css
+@import-normalize; /* bring in normalize.css styles */
+
+/* rest of app styles */
+```
+
+You can control which parts of [normalize.css] to use via your project's [browserslist].
+
+Results when [browserslist] is `last 3 versions`:
+
+```css
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+```
+
+Results when [browserslist] is `last 2 versions`:
+
+```css
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+```
+
+## Browser support
+
+Browser support is dictated by what normalize.css [supports]. As of this writing, it includes:
+
+- Chrome (last 3)
+- Edge (last 3)
+- Firefox (last 3)
+- Firefox ESR
+- Opera (last 3)
+- Safari (last 3)
+- iOS Safari (last 2)
+- Internet Explorer 9+
+
+[browserslist]: http://browserl.ist/
+[css reset]: https://cssreset.com/what-is-a-css-reset/
+[normalize.css]: https://github.com/csstools/normalize.css
+[supports]: https://github.com/csstools/normalize.css#browser-support
+[postcss normalize]: https://github.com/csstools/postcss-normalize

docusaurus/docs/adding-bootstrap.md

@@ -44,7 +44,7 @@ An alternative way of handling static assets is described in the next section.
 
 ## Adding SVGs
 
-> Note: this feature is available with `[email protected]` and higher.
+> Note: this feature is available with `[email protected]` and higher, and `[email protected]` and higher.
 
 One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:
 

docusaurus/docs/adding-css-reset.md

@@ -33,6 +33,9 @@ Type errors will show up in the same console as the build one.
 
 To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/).
 
+> **Note:** If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`.
+> Remove previously installed versions with `npm uninstall -g create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)).
+
 > **Note:** You are not required to make a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), one will be made for you.
 > You are allowed to edit the generated TypeScript configuration.
 

docusaurus/docs/adding-images-fonts-and-files.md

@@ -3,7 +3,9 @@ id: advanced-configuration
 title: Advanced Configuration
 ---
 
-You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env).
+You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env). 
+
+> Note: You do not need to declare `REACT_APP_` before the below variables as you would with custom environment variables.
 
 | Variable             | Development | Production | Usage                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | :------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

docusaurus/docs/adding-typescript.md

@@ -30,6 +30,10 @@ Your app is ready to be deployed! See the section about [deployment](deployment.
 
 If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc.) into your project as dependencies in `package.json`. Technically, the distinction between dependencies and development dependencies is pretty arbitrary for front-end apps that produce static bundles.
+
+In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in `package.json` as you see fit.
+
+All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

docusaurus/docs/advanced-configuration.md

@@ -55,7 +55,7 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu
         "test",
         "--runInBand",
         "--no-cache",
-        "--no-watch"
+        "--watchAll=false"
       ],
       "cwd": "${workspaceRoot}",
       "protocol": "inspector",

docusaurus/docs/available-scripts.md

@@ -90,7 +90,7 @@ service worker navigation routing can be configured or disabled by
 [`eject`ing](available-scripts.md#npm-run-eject) and then modifying the
 [`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
 and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
-options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js).
+options of the `SWPrecachePlugin` [configuration](../config/webpack.config.prod.js).
 
 When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example:
 
@@ -160,6 +160,17 @@ You can specify other environments in the same way.
 
 Variables in `.env.production` will be used as fallback because `NODE_ENV` will always be set to `production` for a build.
 
+## [AWS Amplify](http://console.amplify.aws)
+
+The AWS Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators) with serverless backends. The Amplify Console offers globally available CDNs, easy custom domain setup, feature branch deployments, and password protection.
+
+1. Login to the Amplify Console [here](https://console.aws.amazon.com/amplify/home).
+1. Connect your Create React App repo and pick a branch. If you're looking for a Create React App+Amplify starter, try the [create-react-app-auth-amplify starter](https://github.com/swaminator/create-react-app-auth-amplify) that demonstrates setting up auth in 10 minutes with Create React App.
+1. The Amplify Console automatically detects the build settings. Choose Next.
+1. Choose _Save and deploy_.
+
+If the build succeeds, the app is deployed and hosted on a global CDN with an amplifyapp.com domain. You can now continuously deploy changes to your frontend or backend. Continuous deployment allows developers to deploy updates to their frontend and backend on every code commit to their Git repository.
+
 ## [Azure](https://azure.microsoft.com/)
 
 See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure.
@@ -443,10 +454,18 @@ To deploy your built project directly with Now CLI in your terminal, without any
 
 3. Run `now --name your-project-name` from within the build directory. You will be given a **now.sh** URL as a response as your build is deployed, similar to the following: https://my-cra-project-4rx7b16z3.now.sh/
 
-  Click or paste the deployment URL into your browser when the build is complete and you will see your deployed app.
+Click or paste the deployment URL into your browser when the build is complete and you will see your deployed app.
 
 For more information on deploying React applications with Now, including automatically building your application fresh in the cloud, setting up routes to rewrite all paths to the index.html file, and setting up caching headers for speed, see [the ZEIT Guide for Deploying a React app with Create React App](https://zeit.co/guides/deploying-react-with-now-cra/).
 
+## [Render](https://render.com)
+
+Render offers free [static site](https://render.com/docs/static-sites) hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub.
+
+Deploy your app in just a few minutes by following the [Create React App deployment guide](https://render.com/docs/deploy-create-react-app).
+
+Use invite code `cra` to sign up or use [this link](https://render.com/i/cra).
+
 ## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/)
 
 See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront.

docusaurus/docs/debugging-tests.md

@@ -34,7 +34,7 @@ Just create a project, and you’re good to go.
 
 ## Creating an App
 
-**You’ll need to have Node >= 6 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects.
+**You’ll need to have Node >= 8.10 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects.
 
 To create a new app, you may choose one of the following methods:
 
@@ -62,6 +62,10 @@ yarn create react-app my-app
 
 _`yarn create` is available in Yarn 0.25+_
 
+### Creating a TypeScript app
+
+Follow our [Adding TypeScript](adding-typescript.md) documentation to create a TypeScript app.
+
 ## Output
 
 Running any of these commands will create a directory called `my-app` inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

docusaurus/docs/deployment.md

@@ -48,3 +48,28 @@ Learn more about ES6 modules:
 - [When to use the curly braces?](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281)
 - [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
 - [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
+
+## Absolute Imports
+
+You can configure your application to support importing modules using absolute paths. This can be done by configuring a `jsconfig.json` or `tsconfig.json` file in the root of your project. If you're using TypeScript in your project, you will already have a `tsconfig.json` file.
+
+Below is an example `jsconfig.json` file for a JavaScript project. You can create the file if it doesn't already exist:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}
+```
+
+If you're using TypeScript, you can configure the `baseUrl` setting inside the `compilerOptions` of your project's `tsconfig.json` file.
+
+Now that you've configured your project to support absolute imports, if you want to import a module located at `src/components/Button.js`, you can import the module like so:
+
+```js
+import Button from 'components/Button';
+```
+
+For more information on these configuration files, see the [jsconfig.json reference](https://code.visualstudio.com/docs/languages/jsconfig) and [tsconfig.json reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) documentation.

docusaurus/docs/getting-started.md

@@ -0,0 +1,71 @@
+---
+id: loading-graphql-files
+title: Loading .graphql Files
+sidebar_label: Loading .graphql Files
+---
+
+To load `.gql` and `.graphql` files, first install the [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) package by running:
+
+```sh
+npm install --save graphql.macro
+```
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add graphql.macro
+```
+
+Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package:
+
+```js
+import { loader } from 'graphql.macro';
+
+const query = loader('./foo.graphql');
+```
+
+And your results get automatically inlined! This means that if the file above, `foo.graphql`, contains the following:
+
+```graphql
+gql`
+  query {
+    hello {
+      world
+    }
+  }
+`;
+```
+
+The previous example turns into:
+
+```javascript
+const query = {
+  'kind': 'Document',
+  'definitions': [{
+    ...
+  }],
+  'loc': {
+    ...
+    'source': {
+      'body': '\\\\n  query {\\\\n    hello {\\\\n      world\\\\n    }\\\\n  }\\\\n',
+      'name': 'GraphQL request',
+      ...
+    }
+  }
+};
+```
+
+You can also use the `gql` template tag the same way you would use the non-macro version from `graphql-tag` package with the added benefit of inlined parsing results.
+
+```js
+import { gql } from 'graphql.macro';
+ 
+const query = gql`
+  query User {
+    user(id: 5) {
+      lastName
+      ...UserEntry1
+    }
+  }
+`;
+```

docusaurus/docs/importing-a-component.md

@@ -5,15 +5,15 @@ title: Creating a Production Build
 
 `npm run build` creates a `build` directory with a production build of your app. Inside the `build/static` directory will be your JavaScript and CSS files. Each filename inside of `build/static` will contain a unique hash of the file contents. This hash in the file name enables [long term caching techniques](#static-file-caching).
 
-When running a production build of freshly created Create React App application, there are 3 `.js` files (called _chunks_) that are generated and placed in the `build/static/js` directory:
+When running a production build of freshly created Create React App application, there are a number of `.js` files (called _chunks_) that are generated and placed in the `build/static/js` directory:
 
 `main.[hash].chunk.js`
 
 - This is your _application_ code. `App.js`, etc.
 
-`1.[hash].chunk.js`
+`[number].[hash].chunk.js`
 
-- This is your _vendor_ code, which includes modules you've imported from within `node_modules`. One of the potential advantages with splitting your _vendor_ and _application_ code is to enable [long term caching techniques](#static-file-caching) to improve application loading performance. Since _vendor_ code tends to change less often than the actual _application_ code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.
+- These files can either be _vendor_ code, or [code splitting chunks](code-splitting.md). _Vendor_ code includes modules that you've imported from within `node_modules`. One of the potential advantages with splitting your _vendor_ and _application_ code is to enable [long term caching techniques](#static-file-caching) to improve application loading performance. Since _vendor_ code tends to change less often than the actual _application_ code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.
 
 `runtime~main.[hash].js`