Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
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
13 changes: 9 additions & 4 deletions docs/docs/09-tooling-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

TIL that space has higher precedence than comma in my brain so I parse this wrong when skimming.

```

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

Expand Down
19 changes: 14 additions & 5 deletions docs/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,15 @@ ReactDOM.render(
To install React DOM and build your bundle after installing browserify:

```sh
$ npm install --save react react-dom
$ browserify -t babelify main.js -o bundle.js
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
```

> Note:
>
> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I would've just included it, but this is also good.



## Quick Start Without npm

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

```
npm install --global babel
npm install --global babel-cli
npm install babel-preset-react
```

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

```
babel src --watch --out-dir build

babel --presets react src --watch --out-dir build
```

> Note:
>
> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.

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.

```javascript{2}
Expand Down