facebook · zpao · Sep 26, 2015 · Sep 10, 2015 · Sep 11, 2015 · Sep 11, 2015
diff --git a/docs/_js/jsx-compiler.js b/docs/_js/jsx-compiler.js
diff --git a/docs/css/react.scss b/docs/css/react.scss
@@ -481,38 +481,6 @@ section.black content {
   padding-bottom: 40px;
 }
 
-/* JSX Compiler */
-
-.jsxCompiler {
-  margin: 0 auto;
-  padding-top: 20px;
-  width: 1220px;
-
-  label.compiler-option {
-    display: block;
-    margin-top: 5px;
-  }
-
-  #jsxCompiler {
-    margin-top: 20px;
-  }
-
-  .playgroundPreview {
-    padding: 0;
-    width: 600px;
-
-    pre {
-      @include code-typography;
-    }
-  }
-
-  .playgroundError {
-    // The compiler view kills padding in order to render the CodeMirror code
-    // more nicely. For the error view, put a padding back
-    padding: 15px 20px;
-  }
-}
-
 /* Button */
 
 .button {

diff --git a/docs/docs/02-displaying-data.ja-JP.md b/docs/docs/02-displaying-data.ja-JP.md
@@ -20,11 +20,11 @@ UIについて、最も基本的なことは、いくつかのデータを表示
     <meta charset="UTF-8" />
     <title>Hello React</title>
     <script src="https://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
 
       // ** コードをここに書きます！ **
 

diff --git a/docs/docs/02-displaying-data.ko-KR.md b/docs/docs/02-displaying-data.ko-KR.md
@@ -19,11 +19,11 @@ UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하
     <meta charset="UTF-8" />
     <title>Hello React</title>
     <script src="https://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
 
       // ** 코드는 여기에 작성하면 됩니다! **
 

diff --git a/docs/docs/02-displaying-data.md b/docs/docs/02-displaying-data.md
@@ -20,11 +20,11 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
     <meta charset="UTF-8" />
     <title>Hello React</title>
     <script src="https://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
 
       // ** Your code goes here! **
 
@@ -92,11 +92,11 @@ With JSX this becomes:
 
 We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
 
-JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html).
+JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [the Babel REPL](https://babeljs.io/repl/).
 
 JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
 
-The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](https://www.npmjs.com/package/react-tools) package.
+[Babel exposes a number of ways to get started using JSX](http://babeljs.io/docs/setup/), ranging from command line tools to Ruby on Rails integrations. Choose the tool that works best for you.
 
 
 ## React without JSX

diff --git a/docs/docs/02-displaying-data.zh-CN.md b/docs/docs/02-displaying-data.zh-CN.md
@@ -21,11 +21,11 @@ next: jsx-in-depth-zh-CN.html
     <meta charset="UTF-8" />
     <title>Hello React</title>
     <script src="https://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
 
       // ** 在这里替换成你的代码 **
 

diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md
@@ -82,7 +82,7 @@ var Nav = React.createClass({ });
 var Nav = React.createClass({displayName: "Nav", });
 ```
 
-Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
+Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it
 desugars into native JavaScript, and the
 [HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
 JSX.

diff --git a/docs/docs/06-transferring-props.md b/docs/docs/06-transferring-props.md
@@ -51,7 +51,7 @@ But what about the `name` prop? Or the `title` prop? Or `onMouseOver`?
 
 > NOTE:
 >
-> In the example below, the `--harmony ` flag is required as this syntax is an experimental ES7 syntax. If using the in-browser JSX transformer, simply open your script with `<script type="text/jsx;harmony=true">`. See the [Rest and Spread Properties ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) section below for more details.
+> The `...` syntax is part of the Object Rest Spread proposal. This proposal is on track to become a standard. See the [Rest and Spread Properties ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) section below for more details.
 
 Sometimes it's fragile and tedious to pass every property along. In that case you can use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) with rest properties to extract a set of unknown properties.
 
@@ -143,7 +143,7 @@ z; // { a: 3, b: 4 }
 
 > Note:
 >
-> Use the [JSX command-line tool](https://www.npmjs.com/package/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.
+> This proposal has reached stage 2 and is now enabled by default in Babel. Older versions of Babel may need to explicitly enable this transform with `babel --optional es7.objectRestSpread`
 
 ## Transferring with Underscore
 

diff --git a/docs/docs/getting-started.ja-JP.md b/docs/docs/getting-started.ja-JP.md
@@ -32,11 +32,11 @@ React でのハッキングを始めるにあたり、一番簡単なものと
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <script src="build/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       React.render(
         <h1>Hello, world!</h1>,
         document.getElementById('example')
@@ -62,7 +62,7 @@ React.render(
 それが終わったら、`helloworld.js` への参照を `helloworld.html` に書き込みましょう。
 
 ```html{10}
-<script type="text/jsx" src="src/helloworld.js"></script>
+<script type="text/babel" src="src/helloworld.js"></script>
 ```
 
 ### オフラインでの変換
@@ -99,7 +99,7 @@ React.render(
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <!-- JSXTransformer は必要ありません！ -->
+    <!-- Babel は必要ありません！ -->
   </head>
   <body>
     <div id="example"></div>

diff --git a/docs/docs/getting-started.ko-KR.md b/docs/docs/getting-started.ko-KR.md
@@ -32,11 +32,11 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <script src="build/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       React.render(
         <h1>Hello, world!</h1>,
         document.getElementById('example')
@@ -62,7 +62,7 @@ React.render(
 그다음 `helloworld.html`에서 참조합니다:
 
 ```html{10}
-<script type="text/jsx" src="src/helloworld.js"></script>
+<script type="text/babel" src="src/helloworld.js"></script>
 ```
 
 크롬 같은 몇몇 브라우저에서는 HTTP를 통해 제공되는 파일이 아니면 로드에 실패하므로 주의하세요.
@@ -99,7 +99,7 @@ React.render(
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <!-- JSXTransformer는 이제 불필요합니다! -->
+    <!-- Babel는 이제 불필요합니다! -->
   </head>
   <body>
     <div id="example"></div>

diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md
@@ -31,11 +31,11 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <script src="build/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       React.render(
         <h1>Hello, world!</h1>,
         document.getElementById('example')
@@ -45,7 +45,7 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo
 </html>
 ```
 
-The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/react/docs/jsx-in-depth.html) to learn more about it. In order to translate it to vanilla JavaScript we use `<script type="text/jsx">` and include `JSXTransformer.js` to actually perform the transformation in the browser.
+The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/react/docs/jsx-in-depth.html) to learn more about it. In order to translate it to vanilla JavaScript we use `<script type="text/babel">` and include Babel to actually perform the transformation in the browser.
 
 ### Separate File
 
@@ -61,27 +61,27 @@ React.render(
 Then reference it from `helloworld.html`:
 
 ```html{10}
-<script type="text/jsx" src="src/helloworld.js"></script>
+<script type="text/babel" src="src/helloworld.js"></script>
 ```
 
 Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.
 
 ### Offline Transform
 
-First install the command-line tools (requires [npm](https://www.npmjs.com/)):
+First install the [Babel](http://babeljs.io/) command-line tools (requires [npm](https://www.npmjs.com/)):
 
 ```
-npm install -g react-tools
+npm install --global babel
 ```
 
 Then, translate your `src/helloworld.js` file to plain JavaScript:
 
 ```
-jsx --watch src/ build/
+babel src --watch --out-dir build
 
 ```
 
-The file `build/helloworld.js` is autogenerated whenever you make a change.
+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}
 React.render(
@@ -100,7 +100,7 @@ Update your HTML file as below:
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <!-- No need for JSXTransformer! -->
+    <!-- No need for Babel! -->
   </head>
   <body>
     <div id="example"></div>

diff --git a/docs/docs/getting-started.zh-CN.md b/docs/docs/getting-started.zh-CN.md
@@ -32,11 +32,11 @@ redirect_from: "docs/index-zh-CN.html"
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <script src="build/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       React.render(
         <h1>Hello, world!</h1>,
         document.getElementById('example')
@@ -62,7 +62,7 @@ React.render(
 然后在 `helloworld.html` 引用该文件：
 
 ```html{10}
-<script type="text/jsx" src="src/helloworld.js"></script>
+<script type="text/babel" src="src/helloworld.js"></script>
 ```
 
 ### 离线转换
@@ -98,7 +98,7 @@ React.render(
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <!-- 不需要 JSXTransformer！ -->
+    <!-- 不需要 Babel！ -->
   </head>
   <body>
     <div id="example"></div>

diff --git a/docs/docs/tutorial.ja-JP.md b/docs/docs/tutorial.ja-JP.md
@@ -42,12 +42,12 @@ next: thinking-in-react-ja-JP.html
     <meta charset="UTF-8" />
     <title>Hello React</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   <body>
     <div id="content"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       // ここにコードが入ります
     </script>
   </body>
@@ -223,7 +223,7 @@ Markdown はインラインでテキストをフォーマットする簡単な
   <meta charset="UTF-8" />
   <title>Hello React</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/JSXTransformer.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
 </head>

diff --git a/docs/docs/tutorial.ko-KR.md b/docs/docs/tutorial.ko-KR.md
@@ -42,12 +42,12 @@ next: thinking-in-react-ko-KR.html
     <meta charset="UTF-8" />
     <title>Hello React</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   <body>
     <div id="content"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       // 여기에 코드를 작성합니다
     </script>
   </body>
@@ -226,7 +226,7 @@ Markdown은 텍스트를 포맷팅하는 간단한 방식입니다. 예를 들
   <meta charset="UTF-8" />
   <title>Hello React</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/JSXTransformer.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
 </head>