diff --git a/docs/getting-started.html b/docs/getting-started.html index ca81c66f48..80b87868f4 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -421,9 +421,15 @@ );

To install React DOM and build your bundle after installing browserify:

-
$ npm install --save react react-dom
-$ browserify -t babelify main.js -o bundle.js
-

Quick Start Without npm #

+
$ 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.

+
+

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.

@@ -467,11 +473,18 @@

Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.

Offline Transform #

First install the Babel command-line tools (requires npm):

-
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 for more advanced usage.

 
ReactDOM.render(
   React.createElement('h1', null, 'Hello, world!'),
diff --git a/docs/tooling-integration.html b/docs/tooling-integration.html
index b44299ddd0..df9242d5d1 100644
--- a/docs/tooling-integration.html
+++ b/docs/tooling-integration.html
@@ -416,16 +416,16 @@
 
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.

 
 
Productionizing: Precompiled JSX #

-
If you have npm, 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, 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 babel-preset-react and then run babel --presets react --watch src/ --out-dir lib/. For more information: check out the babel 6 blog post

-

+
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.

 
+
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.

 
 
Example output: