| 1 | # babel-preset-react-app
|
|---|
| 2 |
|
|---|
| 3 | This package includes the Babel preset used by [Create React App](https://github.com/facebook/create-react-app).<br>
|
|---|
| 4 | Please refer to its documentation:
|
|---|
| 5 |
|
|---|
| 6 | - [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
|
|---|
| 7 | - [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
|
|---|
| 8 |
|
|---|
| 9 | ## Usage in Create React App Projects
|
|---|
| 10 |
|
|---|
| 11 | The easiest way to use this configuration is with [Create React App](https://github.com/facebook/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**
|
|---|
| 12 |
|
|---|
| 13 | ## Usage Outside of Create React App
|
|---|
| 14 |
|
|---|
| 15 | If you want to use this Babel preset in a project not built with Create React App, you can install it with the following steps.
|
|---|
| 16 |
|
|---|
| 17 | First, [install Babel](https://babeljs.io/docs/setup/).
|
|---|
| 18 |
|
|---|
| 19 | Then install babel-preset-react-app.
|
|---|
| 20 |
|
|---|
| 21 | ```sh
|
|---|
| 22 | npm install babel-preset-react-app --save-dev
|
|---|
| 23 | ```
|
|---|
| 24 |
|
|---|
| 25 | Then create a file named `.babelrc` with following contents in the root folder of your project:
|
|---|
| 26 |
|
|---|
| 27 | ```json
|
|---|
| 28 | {
|
|---|
| 29 | "presets": ["react-app"]
|
|---|
| 30 | }
|
|---|
| 31 | ```
|
|---|
| 32 |
|
|---|
| 33 | This preset uses the `useBuiltIns` option with [transform-object-rest-spread](https://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](https://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled.
|
|---|
| 34 |
|
|---|
| 35 | ## Usage with Flow
|
|---|
| 36 |
|
|---|
| 37 | Make sure you have a `.flowconfig` file at the root directory. You can also use the `flow` option on `.babelrc`:
|
|---|
| 38 |
|
|---|
| 39 | ```json
|
|---|
| 40 | {
|
|---|
| 41 | "presets": [["react-app", { "flow": true, "typescript": false }]]
|
|---|
| 42 | }
|
|---|
| 43 | ```
|
|---|
| 44 |
|
|---|
| 45 | ## Usage with TypeScript
|
|---|
| 46 |
|
|---|
| 47 | Make sure you have a `tsconfig.json` file at the root directory. You can also use the `typescript` option on `.babelrc`:
|
|---|
| 48 |
|
|---|
| 49 | ```json
|
|---|
| 50 | {
|
|---|
| 51 | "presets": [["react-app", { "flow": false, "typescript": true }]]
|
|---|
| 52 | }
|
|---|
| 53 | ```
|
|---|
| 54 |
|
|---|
| 55 | ## Absolute Runtime Paths
|
|---|
| 56 |
|
|---|
| 57 | Absolute paths are enabled by default for imports. To use relative paths instead, set the `absoluteRuntime` option in `.babelrc` to `false`:
|
|---|
| 58 |
|
|---|
| 59 | ```
|
|---|
| 60 | {
|
|---|
| 61 | "presets": [["react-app", { "absoluteRuntime": false }]]
|
|---|
| 62 | }
|
|---|
| 63 | ```
|
|---|