Skip to content

Commit 86ded13

Browse files
committed
Merge pull request facebook#5370 from zpao/babel6docs
Update docs for Babel 6 (cherry picked from commit b4bc708)
1 parent 1454ea4 commit 86ded13

2 files changed

Lines changed: 23 additions & 9 deletions

File tree

docs/docs/09-tooling-integration.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,18 @@ If you like using JSX, Babel provides an [in-browser ES6 and JSX transformer for
3030
3131
### Productionizing: Precompiled JSX
3232

33-
If you have [npm](https://www.npmjs.com/), you can run `npm install -g babel`. Babel has built-in support for React v0.12+. Tags are automatically transformed to their equivalent `React.createElement(...)`, `displayName` is automatically inferred and added to all React.createClass calls.
33+
If you have [npm](https://www.npmjs.com/), you can run `npm install -g babel-cli`. Babel has built-in support for React v0.12+. Tags are automatically transformed to their equivalent `React.createElement(...)`, `displayName` is automatically inferred and added to all `React.createClass` calls.
3434

3535
This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `babel --watch src/ --out-dir lib/`.
3636

37-
> Note:
38-
>
39-
> If you are using babel 6.x, you will need to install the relevant preset/plugins. To get started, you can run `npm install -g babel babel-preset-react` and then run `babel --presets react --watch src/ --out-dir lib/`. For more information: check out the [babel 6 blog post](http://babeljs.io/blog/2015/10/29/6.0.0/)
37+
Beginning with Babel 6, there are no transforms included by default. This means that options must be specified when running the `babel` command, or a `.babelrc` must specify options. Additional packages must also be installed which bundle together a number of transforms, called presets. The most common use when working with React will be to include the `es2015` and `react` presets. More information about the changes to Babel can be found in [their blog post announcing Babel 6](http://babeljs.io/blog/2015/10/29/6.0.0/).
38+
39+
Here is an example of what you will do if using ES2015 syntax and React:
40+
41+
```
42+
npm install babel-preset-es2015 babel-preset-react
43+
babel --presets es2015,react --watch src/ --out-dir lib/
44+
```
4045

4146
By default JSX files with a `.js` extension are transformed. Run `babel --help` for more information on how to use Babel.
4247

docs/docs/getting-started.md

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,15 @@ ReactDOM.render(
3030
To install React DOM and build your bundle after installing browserify:
3131

3232
```sh
33-
$ npm install --save react react-dom
34-
$ browserify -t babelify main.js -o bundle.js
33+
$ npm install --save react react-dom babelify babel-preset-react
34+
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
3535
```
3636

37+
> Note:
38+
>
39+
> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.
40+
41+
3742
## Quick Start Without npm
3843

3944
If you're not ready to use npm yet, you can download the starter kit which includes prebuilt copies of React and React DOM.
@@ -94,16 +99,20 @@ Note that some browsers (Chrome, e.g.) will fail to load the file unless it's se
9499
First install the [Babel](http://babeljs.io/) command-line tools (requires [npm](https://www.npmjs.com/)):
95100

96101
```
97-
npm install --global babel
102+
npm install --global babel-cli
103+
npm install babel-preset-react
98104
```
99105

100106
Then, translate your `src/helloworld.js` file to plain JavaScript:
101107

102108
```
103-
babel src --watch --out-dir build
104-
109+
babel --presets react src --watch --out-dir build
105110
```
106111

112+
> Note:
113+
>
114+
> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.
115+
107116
The file `build/helloworld.js` is autogenerated whenever you make a change. Read the [Babel CLI documentation](http://babeljs.io/docs/usage/cli/) for more advanced usage.
108117

109118
```javascript{2}

0 commit comments

Comments
 (0)