The old favicon was the same as the official react documentation, which is a minor annoyance during development when trying to find the tab you want. The new favicon is just the old with inverted colors.

Closes #7957

This removes `React.FC` from the base template for a Typescript project.

Long explanation for a small change: 

`React.FC` is unnecessary: it provides next to no benefits and has a few downsides.  (See below.)  I see a lot of beginners to TS+React using it, however, and I think that it's usage in this template is a contributing factor to that, as the prominence of this template makes it a de facto source of "best practice".  

### Downsides to React.FC/React.FunctionComponent

##### Provides an implicit definition of `children`

Defining a component with `React.FC` causes it to implicitly take `children` (of type `ReactNode`).  It means that all components accept children, even if they're not supposed to, allowing code like:

```ts
const App: React.FC = () => { /*... */ };
const Example = () => {
	<App><div>Unwanted children</div></App>
}
```

This isn't a run-time error, but it is a mistake and one that would be caught by Typescript if not for `React.FC`. 

##### Doesn't support generics.
I can define a generic component like:
```ts
type GenericComponentProps<T> = {
   prop: T
   callback: (t: T) => void
}
const GenericComponent = <T>(props: GenericComponentProps<T>) => {/*...*/}
```

But it's not possible when using `React.FC` - there's no way to preserve the unresolved generic `T` in the type returned by `React.FC`.

```ts
const GenericComponent: React.FC</* ??? */> = <T>(props: GenericComponentProps<T>) => {/*...*/}
```

##### Makes "component as namespace pattern" more awkward.
It's a somewhat popular pattern to use a component as a namespace for related components (usually children):

```jsx
<Select>
	<Select.Item />
</Select>
```

This is possible, but awkward, with `React.FC`:

```tsx
const  Select: React.FC<SelectProps> & { Item: React.FC<ItemProps> } = (props) => {/* ... */ }
Select.Item = (props) => { /*...*/ }
```

but "just works" without `React.FC`:

```tsx
const Select = (props: SelectProps) => {/* ... */}
Select.Item = (props) => { /*...*/ }
```

##### Doesn't work correctly with defaultProps

This is a fairly moot point as in both cases it's probably better to use ES6 default arguments, but...

```tsx
type  ComponentProps = { name: string; }

const  Component = ({ name }: ComponentProps) => (<div>
	{name.toUpperCase()} /* Safe since name is required */
</div>);
Component.defaultProps = { name: "John" };

const  Example = () => (<Component />) /* Safe to omit since name has a default value */
```
This compiles correctly.  Any approach with `React.FC` will be slightly wrong: either `React.FC<{name: string}>` will make the prop required by consumers, when it should be optional, or `React.FC<{name?: string}>` will cause `name.toUpperCase()` to be a type error.  There's no way to replicate the "internally required, externally optional" behavior which is desired.

##### It's as long, or longer than the alternative: (especially longer if you use `FunctionalComponent`):
Not a huge point, but it isn't even shorter to use `React.FC` 
```ts
const C1: React.FC<CProps> = (props) => { }
const C2 = (props: CProps) => {};
```

### Benefits of React.FC

##### Provides an explicit return type

The only benefit I really see to `React.FC` (unless you think that implicit `children` is a good thing) is that it specifies the return type, which catches mistakes like:

```ts
const Component = () => {
   return undefined; // components aren't allowed to return undefined, just `null`
}
```

In practice, I think this is fine, as it'll be caught as soon as you try to use it:

```ts
const Example = () => <Component />; // Error here, due to Component returning the wrong thing
```

But even with explicit type annotations, `React.FC` still isn't saving very much boilerplate:

```ts
const Component1 = (props: ComponentProps): ReactNode => { /*...*/ }
const Component2: FC<ComponentProps> = (props) => { /*...*/ }
```

Updates dependencies and removes babel plugins that are now covered by `@babel/preset-env`.

Co-authored-by: hdineen <hdineen@hubspot.com>

…late locally (#8092)

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

`Auto Fix is enabled by default. Use the single string form.` warning is shown in `.vscode/settings.json` due to changes in vscode-eslint. 
As autoFix is set to default, object format in `eslint.validate` is deprecated.

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

 - babel-plugin-named-asset-import@0.3.6
 - babel-preset-react-app@9.1.1
 - cra-template-typescript@1.0.1
 - cra-template@1.0.1
 - create-react-app@3.3.1
 - eslint-config-react-app@5.2.0
 - react-app-polyfill@1.0.6
 - react-dev-utils@10.1.0
 - react-error-overlay@6.0.5
 - react-scripts@3.3.1

Why:

* As per best practice:
  https://git.kernel.org/pub/scm/git/git.git/tree/Documentation/SubmittingPatches#n135

  See also:
  https://chris.beams.io/posts/git-commit/#imperative

* Expands scope of openBrowser tab control

Adjust openChrome.applescript to allow manipulation of
other Chromium-based browsers (defaulting to Chrome).
Requires list of compatible browsers to try in openBrowser.js

* Fix typo

* Remove Safari

This will fix e2e-behaviour on macos

Related: npm/cli#611 (comment)

* setupTestFrameworkScriptFile is deprecated

__Note:_ `_setupTestFrameworkScriptFile_` _is deprecated in favor of_ `_setupFilesAfterEnv_`_.__

ref: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array

* Update docusaurus/docs/running-tests.md

Co-Authored-By: Simen Bekkhus <sbekkhus91@gmail.com>

Co-authored-by: Simen Bekkhus <sbekkhus91@gmail.com>

Added the relevant topic linked directly, instead of saying it's just in the next section.
Adjusted the text so it sounds more like a recommendation rather than a requirement.
The topic linked is basically explainer to how you'd reference it using the global window object and ways to avoid linter errors. Thus I used 'reference' to give users a hint of what it the linked page would be for.

Rider is JetBrains .NET IDE, which supports the React plugin identically to other JetBrains IDEs such as Idea and WebStorm.

* Enable custom sockjs pathname for hot reloading server.

* Update docusaurus/docs/advanced-configuration.md

Co-Authored-By: Brody McKee <mrmckeb@users.noreply.github.com>

* let WDS_SOCKET_PATH be undefined

* adding env variables for sockHost and sockPort options

Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com>

* Add option to provide custom SSL certificates when using HTTPS

* Update documentation with custom HTTPS certs

* Improve certificate validation and move to its own file

* Update https in development docs

Co-Authored-By: Brody McKee <mrmckeb@users.noreply.github.com>

* Add custom cert example to docs

* Rename https file and update error message

* Include original error message when custom ssl cert is invalid

* Add chalk to react-scripts dependencies

* Bump docs version to say that the new config will be available in 3.2.0

* Remove chalk dependency

* Update custom ssl version to 3.4.0 in docs

* Remove version from custom ssl certificate docs

Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com>

* Handle service worker error in Firefox

See https://bugzilla.mozilla.org/show_bug.cgi?id=1429714 for more details.

* Update serviceWorker.js

Co-authored-by: Eric Clemmons <eric@smarterspam.com>
Co-authored-by: Alex Guerra <alex@heyimalex.com>
Co-authored-by: Kelly <kelly.milligan@gmail.com>

Co-authored-by: Eric Clemmons <eric@smarterspam.com>
Co-authored-by: Alex Guerra <alex@heyimalex.com>
Co-authored-by: Kelly <kelly.milligan@gmail.com>

- The JavaScript template uses a function declaration to define the component, the TypeScript template and a page of the documentation used arrow functions. Changed it to use function declarations for consistency and readability.

* Downgrade chalk for ie 11 support

* Update lockfile

…8442)

Moved redirect middleware and noopSW middleware in WDS after hook
So proxy, and before proxy will take precedence before redirect

Closes #8417

Related #8164
Related #8439

webpack should always be written in lower-case, according to webpack's branding guidelines https://webpack.js.org/branding

 - cra-template-typescript@1.0.2
 - cra-template@1.0.2
 - create-react-app@3.4.0
 - react-dev-utils@10.2.0
 - react-error-overlay@6.0.6
 - react-scripts@3.4.0

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

The http-proxy-middleware package has made a major version upgraded and
introduced a breaking change. This fixes the "Configuring the Proxy
Manually" documentation to match the latest version.

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

 - babel-preset-react-app@9.1.2
 - cra-template-typescript@1.0.3
 - cra-template@1.0.3
 - create-react-app@3.4.1
 - eslint-config-react-app@5.2.1
 - react-dev-utils@10.2.1
 - react-error-overlay@6.0.7
 - react-scripts@3.4.1

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1.
- [Release notes](https://github.com/acornjs/acorn/releases)
- [Commits](acornjs/acorn@6.4.0...6.4.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Passing an array with a single entry is not equivalent. This causes Webpack
to generate another wrapper module around the entry. This is just
unnecessary overhead and bytes.

See #7790 for a previous similar PR.

This reverts commit c03bb36.

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

Co-authored-by: Marc Hassan <marc@unqork.com>

* Fix dotenv file loading order

* tests: fix failing env tests

* tests: fix more failing tests

Co-authored-by: Brody McKee <mrmckeb@hotmail.com>