We have instructions for building from master in our GitHub repository. We build a tree of CommonJS modules under build/modules which you can drop into any environment or packaging tool that supports CommonJS.
If you like using JSX, we provide an in-browser JSX transformer for development on our download page. Simply include a <script type="text/jsx"> tag to engage the JSX transformer.
If you like using JSX, babel provides an in-browser ES6 and JSX transformer for development called browser.js that can be included from a babel-core npm release or from CDNJS. Include a <script type="text/babel"> tag to engage the JSX transformer.
Note:
@@ -418,12 +418,39 @@The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.
If you have npm, 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/.
If you have npm, 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.
By default JSX files with a .js extension are transformed. Use jsx --extension jsx src/ build/ to transform files with a .jsx extension.
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/.
Run jsx --help for more information on how to use this tool.
By default JSX files with a .js extension are transformed. Run babel --help for more information on how to use babel.
Example output:
+$ cat test.jsx
+var HelloMessage = React.createClass({
+ render: function() {
+ return <div>Hello {this.props.name}</div>;
+ }
+});
+
+React.render(<HelloMessage name="John" />, mountNode);
+$ babel test.jsx
+"use strict";
+
+var HelloMessage = React.createClass({
+ displayName: "HelloMessage",
+
+ render: function render() {
+ return React.createElement(
+ "div",
+ null,
+ "Hello ",
+ this.props.name
+ );
+ }
+});
+
+React.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
+The open-source community has built tools that integrate JSX with several editors and build systems. See JSX integrations for the full list.