mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
[docs] Update script mimetypes: text/jsx -> text/babel
This commit is contained in:
@@ -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">
|
||||
|
||||
// ** コードをここに書きます! **
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
// ** 코드는 여기에 작성하면 됩니다! **
|
||||
|
||||
|
||||
@@ -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! **
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
// ** 在这里替换成你的代码 **
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,7 +61,7 @@ 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.
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user