diff --git a/docs/_js/jsx-compiler.js b/docs/_js/jsx-compiler.js deleted file mode 100644 index bd1f2d8a1c57..000000000000 --- a/docs/_js/jsx-compiler.js +++ /dev/null @@ -1,46 +0,0 @@ -var HELLO_COMPONENT = "\ -var HelloMessage = React.createClass({\n\ - render: function() {\n\ - return
Hello {this.props.name}
;\n\ - }\n\ -});\n\ -\n\ -React.render(, mountNode);\ -"; - -function transformer(harmony, code) { - return JSXTransformer.transform(code, {harmony: harmony}).code; -} - -var CompilerPlayground = React.createClass({ - getInitialState: function() { - return {harmony: false}; - }, - handleHarmonyChange: function(e) { - this.setState({harmony: e.target.checked}); - }, - render: function() { - return ( -
- - -
- ); - } -}); -React.render( - , - document.getElementById('jsxCompiler') -); diff --git a/docs/css/react.scss b/docs/css/react.scss index 75df4d3e6bc0..3400c9af9ae9 100644 --- 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 index ef946dcb6078..47e860e2a1bf 100644 --- a/docs/docs/02-displaying-data.ja-JP.md +++ b/docs/docs/02-displaying-data.ja-JP.md @@ -20,11 +20,11 @@ UIについて、最も基本的なことは、いくつかのデータを表示 Hello React - +
- - +
- - +
- - +
- - +
- + ``` ### オフラインでの変換 @@ -99,7 +99,7 @@ React.render( Hello React! - +
diff --git a/docs/docs/getting-started.ko-KR.md b/docs/docs/getting-started.ko-KR.md index 81d68aa6ad9e..ec120b9e2b5f 100644 --- a/docs/docs/getting-started.ko-KR.md +++ b/docs/docs/getting-started.ko-KR.md @@ -32,11 +32,11 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예 Hello React! - +
- + ``` 크롬 같은 몇몇 브라우저에서는 HTTP를 통해 제공되는 파일이 아니면 로드에 실패하므로 주의하세요. @@ -99,7 +99,7 @@ React.render( Hello React! - +
diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md index 40049bbf9d74..e8f9c2da05ad 100644 --- 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 Hello React! - +
- + ``` 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: Hello React! - +
diff --git a/docs/docs/getting-started.zh-CN.md b/docs/docs/getting-started.zh-CN.md index 9b2961bfe13f..3bdd850cdc85 100644 --- 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" Hello React! - +
- + ``` ### 离线转换 @@ -98,7 +98,7 @@ React.render( Hello React! - +
diff --git a/docs/docs/tutorial.ja-JP.md b/docs/docs/tutorial.ja-JP.md index 2856f7d83f15..932e56dc4bf9 100644 --- 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 Hello React - +
- @@ -223,7 +223,7 @@ Markdown はインラインでテキストをフォーマットする簡単な Hello React - + diff --git a/docs/docs/tutorial.ko-KR.md b/docs/docs/tutorial.ko-KR.md index d394d77bfd0c..0ed9415a64b3 100644 --- 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 Hello React - +
- @@ -226,7 +226,7 @@ Markdown은 텍스트를 포맷팅하는 간단한 방식입니다. 예를 들 Hello React - + diff --git a/docs/docs/tutorial.md b/docs/docs/tutorial.md index a4cef86f8f9f..0c405841c5cd 100644 --- a/docs/docs/tutorial.md +++ b/docs/docs/tutorial.md @@ -41,13 +41,13 @@ For this tutorial, we're going to make it as easy as possible. Included in the s React Tutorial - +
- - + @@ -226,7 +226,7 @@ First, add the third-party library **marked** to your application. This is a Jav React Tutorial - + diff --git a/docs/downloads.md b/docs/downloads.md index 6b8f61bf1661..eb5da226e87f 100644 --- a/docs/downloads.md +++ b/docs/downloads.md @@ -48,25 +48,10 @@ The compressed, production version of React with [add-ons](/react/docs/addons.ht ``` -#### JSX Transformer -The JSX transformer used to support [XML syntax](/react/docs/jsx-in-depth.html) in JavaScript. - -```html - -``` - All scripts are also available via [CDNJS](https://cdnjs.com/libraries/react/). ## npm -To install the JSX transformer on your computer, run: - -```sh -$ npm install -g react-tools -``` - -For more info about the `jsx` binary, see the [Getting Started](/react/docs/getting-started.html#offline-transform) guide. - If you're using an npm-compatible packaging system like browserify or webpack, you can use the `react` package. After installing it using `npm install react` or adding `react` to `package.json`, you can use React: ```js diff --git a/docs/jsx-compiler.md b/docs/jsx-compiler.md index 3c0482f17872..bcfa64302c69 100644 --- a/docs/jsx-compiler.md +++ b/docs/jsx-compiler.md @@ -1,14 +1,9 @@ --- -layout: default +layout: single title: JSX Compiler Service id: jsx-compiler --- -
-

JSX Compiler

-

- This tool demonstrates how JSX syntax - is desugared into native JavaScript. -

-
- -
+ +**_This tool has been removed as JSXTransformer has been deprecated._** + +We recommend using another tool such as [the Babel REPL](https://babeljs.io/repl/). diff --git a/docs/tips/03-if-else-in-JSX.md b/docs/tips/03-if-else-in-JSX.md index 024dfb5cd50b..f659b423d109 100644 --- a/docs/tips/03-if-else-in-JSX.md +++ b/docs/tips/03-if-else-in-JSX.md @@ -78,4 +78,4 @@ return ( > > In the example above, an ES6 [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) is utilized to lexically bind the value of `this`. -Try using it today with the [JSX compiler](/react/jsx-compiler.html). +Try using it today with the [Babel REPL](https://babeljs.io/repl/).