Add template support (#7716)

* Add template support

* Update templates version check

* Update TypeScript template README
This commit is contained in:
Brody McKee
2019-10-25 01:17:41 +03:00
committed by Ian Sutherland
parent e92db94313
commit 4c0c81953d
158 changed files with 1819 additions and 1550 deletions

View File

@@ -12,14 +12,16 @@ title: Adding TypeScript
To start a new Create React App project with [TypeScript](https://www.typescriptlang.org/), you can run:
```sh
npx create-react-app my-app --typescript
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --typescript
yarn create react-app my-app --template typescript
```
> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version.
>
> Global installs of `create-react-app` are no longer supported.
To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it:
@@ -49,5 +51,4 @@ If your project is not created with TypeScript enabled, npx may be using a cache
If you are currently using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript/), see [this blog post](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) for instructions on how to migrate to Create React App.
Constant enums and namespaces are not supported, you can learn about the constraints of [using Babel with TypeScript here](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats).

View File

@@ -11,7 +11,7 @@ You can adjust various development and production settings by setting environmen
| :---------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| BROWSER | ✅ Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/open#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. |
| BROWSER_ARGS | ✅ Used | 🚫 Ignored | When the `BROWSER` environment variable is specified, any arguments that you set to this environment variable will be passed to the browser instance. Multiple arguments are supported as a space separated list. By default, no arguments are passed through to browsers. |
| HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to all hostnames on the device (`localhost`, LAN network address, etc.). You may use this variable to specify a different host. |
| HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to all hostnames on the device (`localhost`, LAN network address, etc.). You may use this variable to specify a different host. |
| PORT | ✅ Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. |
| HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. |
| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |

View File

@@ -62,13 +62,33 @@ yarn create react-app my-app
_`yarn create` is available in Yarn 0.25+_
### Creating a TypeScript app
### Selecting a template
Follow our [Adding TypeScript](adding-typescript.md) documentation to create a TypeScript app.
You can now optionally start a new app from a template by appending `--template [template-name]` to the creation command.
If you don't select a template, we'll create your project with our base template.
Templates are always named in the format `cra-template-[template-name]`, however you only need to provide the `[template-name]` to the creation command.
```sh
npx create-react-app my-app --template [template-name]
```
> You can find a a list of available templates by searching for ["cra-template-\*"](https://www.npmjs.com/search?q=cra-template-*) on npm.
#### Creating a TypeScript app
You can start a new TypeScript app using templates. To use our provided TypeScript template, append `--template typescript` to the creation command.
```sh
npx create-react-app my-app --template typescript
```
If you already have a project and would like to add TypeScript, see our [Adding TypeScript](adding-typescript.md) documentation.
### Selecting a package manager
When you create a new app, the CLI will use [Yarn](https://yarnpkg.com/) to install dependencies (when available). If you have Yarn installed, but would prefer to use npm, you can append --use-npm to the creation command. For example:
When you create a new app, the CLI will use [Yarn](https://yarnpkg.com/) to install dependencies (when available). If you have Yarn installed, but would prefer to use npm, you can append `--use-npm` to the creation command. For example:
```sh
npx create-react-app my-app --use-npm