Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4846 from zpao/docs-use-babel

Browse Source 
[docs] Remove references to react-tools, JSXTransformer, replace with Babel.
(cherry picked from commit d3d2504e72)
This commit is contained in:
Paul O’Shannessy
2015-09-25 20:24:55 -07:00
parent 64ff2ea3c6
commit d5680caefe
18 changed files with 50 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_js/jsx-compiler.js
-46
View File
@@ -1,46 +0,0 @@
var HELLO_COMPONENT = "\
var HelloMessage = React.createClass({\n\
render: function() {\n\
return <div>Hello {this.props.name}</div>;\n\
}\n\
});\n\
\n\
React.render(<HelloMessage name=\"John\" />, 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 (
<div>
<ReactPlayground
codeText={HELLO_COMPONENT}
renderCode={true}
transformer={transformer.bind(null, this.state.harmony)}
showCompiledJSTab={false}
showLineNumbers={true}
/>
<label className="compiler-option">
<input
type="checkbox"
onChange={this.handleHarmonyChange}
checked={this.state.harmony} />{' '}
Enable ES6 transforms (<code>--harmony</code>)
</label>
</div>
);
}
});
React.render(
<CompilerPlayground />,
document.getElementById('jsxCompiler')
);
docs/css/react.scss
-32
View File
@@ -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 {
docs/docs/02-displaying-data.ja-JP.md
+2 -2
View File
@@ -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">
// ** コードをここに書きます！ **
docs/docs/02-displaying-data.ko-KR.md
+2 -2
View File
@@ -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">
// ** 코드는 여기에 작성하면 됩니다! **
docs/docs/02-displaying-data.md
+4 -4
View File
@@ -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
docs/docs/02-displaying-data.zh-CN.md
+2 -2
View File
@@ -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">
// ** 在这里替换成你的代码 **
docs/docs/02.1-jsx-in-depth.md
+1 -1
View File
@@ -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.
docs/docs/06-transferring-props.md
+2 -2
View File
@@ -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
docs/docs/getting-started.ja-JP.md
+4 -4
View File
@@ -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>
docs/docs/getting-started.ko-KR.md
+4 -4
View File
@@ -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>
docs/docs/getting-started.md
+9 -9
View File
@@ -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>
docs/docs/getting-started.zh-CN.md
+4 -4
View File
@@ -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>
docs/docs/tutorial.ja-JP.md
+3 -3
View File
@@ -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>
docs/docs/tutorial.ko-KR.md
+3 -3
View File
@@ -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>
docs/docs/tutorial.md
+4 -4
View File
@@ -41,13 +41,13 @@ For this tutorial, we're going to make it as easy as possible. Included in the s
<meta charset="utf-8" />
<title>React Tutorial</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;harmony=true" src="scripts/example.js"></script>
<script type="text/jsx;harmony=true">
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
@@ -226,7 +226,7 @@ First, add the third-party library **marked** to your application. This is a Jav
<meta charset="utf-8" />
<title>React Tutorial</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>
docs/downloads.md
-15
View File
@@ -48,25 +48,10 @@ The compressed, production version of React with [add-ons](/react/docs/addons.ht
<script src="https://fb.me/react-with-addons-{{site.react_version}}.min.js"></script>
```
#### <a href="https://fb.me/JSXTransformer-{{site.react_version}}.js">JSX Transformer</a>
The JSX transformer used to support [XML syntax](/react/docs/jsx-in-depth.html) in JavaScript.
```html
<script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
```
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
docs/jsx-compiler.md
+5 -10
View File
@@ -1,14 +1,9 @@
---
layout: default
layout: single
title: JSX Compiler Service
id: jsx-compiler
---
<div class="jsxCompiler">
<h1>JSX Compiler</h1>
<p>
This tool demonstrates how <a href="/react/docs/jsx-in-depth.html">JSX syntax</a>
is desugared into native JavaScript.
</p>
<div id="jsxCompiler"></div>
<script type="text/javascript" src="js/jsx-compiler.js"></script>
</div>
**_This tool has been removed as JSXTransformer has been deprecated._**
We recommend using another tool such as [the Babel REPL](https://babeljs.io/repl/).
docs/tips/03-if-else-in-JSX.md
+1 -1
View File
@@ -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/).