Skip to content

Commit cd268fd

Browse files
committed
Merge pull request facebook#4546 from rgbkrk/patch-1
Update tooling docs to suggest babel
2 parents 5fa72c2 + 009902b commit cd268fd

File tree

1 file changed

+34
-4
lines changed

1 file changed

+34
-4
lines changed

docs/docs/09-tooling-integration.md

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ We have instructions for building from `master` [in our GitHub repository](https
2323

2424
### In-browser JSX Transform
2525

26-
If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer.
26+
If you like using JSX, babel provides an [in-browser ES6 and JSX transformer for development](http://babeljs.io/docs/usage/browser/) called browser.js that can be included from a `babel-core` npm release or from [CDNJS](http://cdnjs.com/libraries/babel-core). Include a `<script type="text/babel">` tag to engage the JSX transformer.
2727

2828
> Note:
2929
>
@@ -32,11 +32,41 @@ If you like using JSX, we provide an in-browser JSX transformer for development
3232

3333
### Productionizing: Precompiled JSX
3434

35-
If you have [npm](https://www.npmjs.com/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. 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: `jsx --watch src/ build/`.
35+
If you have [npm](https://www.npmjs.com/), you can run `npm install -g babel`. `babel` has built-in support for React v0.12 and v0.13. Tags are automatically transformed to their equivalent `React.createElement(...)`, `displayName` is automatically inferred and added to all React.createClass calls.
3636

37-
By default JSX files with a `.js` extension are transformed. Use `jsx --extension jsx src/ build/` to transform files with a `.jsx` extension.
37+
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/`.
3838

39-
Run `jsx --help` for more information on how to use this tool.
39+
By default JSX files with a `.js` extension are transformed. Run `babel --help` for more information on how to use `babel`.
40+
41+
Example output:
42+
43+
```
44+
$ cat test.jsx
45+
var HelloMessage = React.createClass({
46+
render: function() {
47+
return <div>Hello {this.props.name}</div>;
48+
}
49+
});
50+
51+
React.render(<HelloMessage name="John" />, mountNode);
52+
$ babel test.jsx
53+
"use strict";
54+
55+
var HelloMessage = React.createClass({
56+
displayName: "HelloMessage",
57+
58+
render: function render() {
59+
return React.createElement(
60+
"div",
61+
null,
62+
"Hello ",
63+
this.props.name
64+
);
65+
}
66+
});
67+
68+
React.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
69+
```
4070

4171

4272
### Helpful Open-Source Projects

0 commit comments

Comments
 (0)