From ac591bc96bb90230e9db41563318ed7023126529 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Mon, 2 Nov 2015 13:10:40 -0800 Subject: [PATCH] [docs] Update tooling integration for more babel 6 --- docs/09-tooling-integration.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/09-tooling-integration.md b/docs/09-tooling-integration.md index e220f6e2..fe187061 100644 --- a/docs/09-tooling-integration.md +++ b/docs/09-tooling-integration.md @@ -30,13 +30,18 @@ If you like using JSX, Babel provides an [in-browser ES6 and JSX transformer for ### Productionizing: Precompiled JSX -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. +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. 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/`. -> Note: -> -> 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-cli`, then `npm i babel-preset-react` and finally 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/) +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/). + +Here is an example of what you will do if using ES2015 syntax and React: + +``` +npm install babel-preset-es2015 babel-preset-react +babel --presets es2015,react --watch src/ --out-dir lib/ +``` By default JSX files with a `.js` extension are transformed. Run `babel --help` for more information on how to use Babel.