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.

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

Add template support #7716

Merged
merged 4 commits into from
Oct 24, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
7 changes: 4 additions & 3 deletions docusaurus/docs/adding-typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
petetnt marked this conversation as resolved.
Show resolved Hide resolved

To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it:

Expand Down Expand Up @@ -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).
26 changes: 23 additions & 3 deletions docusaurus/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to decide on this prefix because it will be hard to change.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about tweaking the docs to encourage the base template if the user is new to react?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, we should encourage one of the base templates (JS or TS) for new users. But we can do this during the beta I think, and we'll also talk to other projects to get more templates created.


```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
Expand Down
20 changes: 20 additions & 0 deletions packages/cra-template-typescript/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# cra-template-typescript

This is the official TypeScript template for [Create React App](https://github.com/facebook/create-react-app).

To use this template, simply add `--template typescript` when creating a new app.

For example:

```sh
npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript
```

For more information, please refer to:

- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.
- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.
28 changes: 28 additions & 0 deletions packages/cra-template-typescript/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "cra-template-typescript",
"version": "1.0.0",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"description": "The base TypeScript template for Create React App.",
"main": "template.json",
"repository": {
"type": "git",
"url": "https://github.com/facebook/create-react-app.git",
"directory": "packages/cra-template-typescript"
},
"license": "MIT",
"engines": {
"node": ">=8.10"
},
"bugs": {
"url": "https://github.com/facebook/create-react-app/issues"
},
"files": [
"template",
"template.json"
]
}
9 changes: 9 additions & 0 deletions packages/cra-template-typescript/template.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"dependencies": {
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/jest": "^24.0.0",
"typescript": "^3.6.0"
}
}
10 changes: 10 additions & 0 deletions packages/cra-template/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# cra-template

This is the official base template for [Create React App](https://github.com/facebook/create-react-app).

If you don't specify a template (for example, `--template typescript`), this template will be used by default.

For more information, please refer to:

- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.
- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.
27 changes: 27 additions & 0 deletions packages/cra-template/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "cra-template",
"version": "1.0.0",
"keywords": [
"react",
"create-react-app",
"template"
],
"description": "The base template for Create React App.",
"main": "template.json",
"repository": {
"type": "git",
"url": "https://github.com/facebook/create-react-app.git",
"directory": "packages/cra-template"
},
"license": "MIT",
"engines": {
"node": ">=8"
},
"bugs": {
"url": "https://github.com/facebook/create-react-app/issues"
},
"files": [
"template",
"template.json"
]
}
3 changes: 3 additions & 0 deletions packages/cra-template/template.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"dependencies": {}
}
13 changes: 13 additions & 0 deletions packages/cra-template/template/src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
body {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this file for? Was it in the original template?

margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
Loading