From 411ed31cb1d74759d0e913f1d89f832b8d43289f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Thu, 10 Sep 2015 10:26:20 -0700 Subject: [PATCH 1/5] [docs] Stop supporting our JSX compiler page Link to Babel REPL directly instead. --- docs/_js/jsx-compiler.js | 46 --------------------------------- docs/css/react.scss | 32 ----------------------- docs/docs/02-displaying-data.md | 2 +- docs/docs/02.1-jsx-in-depth.md | 2 +- docs/jsx-compiler.md | 15 ++++------- docs/tips/03-if-else-in-JSX.md | 2 +- 6 files changed, 8 insertions(+), 91 deletions(-) delete mode 100644 docs/_js/jsx-compiler.js diff --git a/docs/_js/jsx-compiler.js b/docs/_js/jsx-compiler.js deleted file mode 100644 index bd1f2d8a1c5..00000000000 --- 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 75df4d3e6bc..3400c9af9ae 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.md b/docs/docs/02-displaying-data.md index f4f00123d28..f9a0b8d2651 100644 --- a/docs/docs/02-displaying-data.md +++ b/docs/docs/02-displaying-data.md @@ -92,7 +92,7 @@ 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. diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md index eb723fe8827..d1c91b8f2a2 100644 --- 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/jsx-compiler.md b/docs/jsx-compiler.md index 3c0482f1787..bcfa64302c6 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 024dfb5cd50..f659b423d10 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/). From 097b32b7d2d0314e0ac71336d56cc06d6031fb0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Thu, 10 Sep 2015 17:43:58 -0700 Subject: [PATCH 2/5] [docs] Remove mentions of react-tools/jsx command --- docs/docs/02-displaying-data.md | 2 +- docs/docs/06-transferring-props.md | 4 ++-- docs/docs/getting-started.md | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/docs/02-displaying-data.md b/docs/docs/02-displaying-data.md index f9a0b8d2651..4ae3d086ea6 100644 --- a/docs/docs/02-displaying-data.md +++ b/docs/docs/02-displaying-data.md @@ -96,7 +96,7 @@ JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in 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/06-transferring-props.md b/docs/docs/06-transferring-props.md index f2f30ace012..70cbe3852f7 100644 --- 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 ` - +
- - +
- - +
- - +
- - +
- + ``` ### オフラインでの変換 @@ -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 81d68aa6ad9..ec120b9e2b5 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 e5e568f9813..e8f9c2da05a 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. @@ -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 9b2961bfe13..3bdd850cdc8 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! - +
From bef8942cb7d3fff8347340c67951511bbaefb22c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Thu, 10 Sep 2015 18:19:48 -0700 Subject: [PATCH 4/5] [docs] Remove JSXTransformer from tutorial --- docs/docs/tutorial.ja-JP.md | 6 +++--- docs/docs/tutorial.ko-KR.md | 6 +++--- docs/docs/tutorial.md | 8 ++++---- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/docs/tutorial.ja-JP.md b/docs/docs/tutorial.ja-JP.md index 2856f7d83f1..932e56dc4bf 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 d394d77bfd0..0ed9415a64b 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 a4cef86f8f9..0c405841c5c 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 - + From 105554fe5c37a9ee2bc0f408266a6a6848abb264 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Thu, 10 Sep 2015 18:21:03 -0700 Subject: [PATCH 5/5] [docs] Remove JSXTransformer, react-tools from downloads page --- docs/downloads.md | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/docs/downloads.md b/docs/downloads.md index 6b8f61bf166..eb5da226e87 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