-
{% for subitem in item.subitems %}
- - {{ subitem | sidebar_item_link}} + {{ subitem | docs_sidebar_link }} {% endfor %}
{{ section.title }}
{% endfor %} - - {% for section in site.data.nav_tips %} - - {% endfor %} - {% for section in site.data.nav_contributing %} {% endfor %} + diff --git a/docs/_includes/nav_tutorial.html b/docs/_includes/nav_tutorial.html new file mode 100644 index 0000000000000..2a720cbdd0bd7 --- /dev/null +++ b/docs/_includes/nav_tutorial.html @@ -0,0 +1,24 @@ + diff --git a/docs/_includes/navigation.html b/docs/_includes/navigation.html new file mode 100644 index 0000000000000..4632047aec8fe --- /dev/null +++ b/docs/_includes/navigation.html @@ -0,0 +1,23 @@ +
+
diff --git a/docs/_layouts/community.html b/docs/_layouts/community.html
new file mode 100644
index 0000000000000..9fda4ceb60c45
--- /dev/null
+++ b/docs/_layouts/community.html
@@ -0,0 +1,29 @@
+---
+layout: default
+sectionid: community
+---
+
+
+
+ 
+ React
+
+
+
+
+ React
+
+
+ {{ page.title }}
{{ page.description }}
@@ -20,4 +18,6 @@ {{ page.title }}
{% endif %}' | remove: '
' %} +{% else %} +{% assign type = 'website' %} +{% assign sectionTitle = 'React' %} +{% assign description = 'A JavaScript library for building user interfaces' %} +{% endif %} +{% assign title = page.title | append: ' - ' | append: sectionTitle %} -
-
-
+
-
-
-
-
-
-
-
-
-```
-
-Nel resto della documentazione, ci concentreremo soltanto sul codice JavaScript e assumeremo che sia inserito in un modello come quello qui sopra. Sostituisci il commento segnaposto qui sopra con il seguente codice JSX:
-
-```javascript
-var HelloWorld = React.createClass({
- render: function() {
- return (
-
-
-
- {% if page.id == 'home' %}
-
-
-
- React
-
-
-
-
-
-
- React
-
-
-
-
-
-
- {% endif %}
+ {% include navigation.html %}
{{ content }}
-
+ {% include footer.html %}
-
- React
-
- A JavaScript library for building user interfaces
-
-
-
- - Ciao, ! - È il {this.props.date.toTimeString()} -
- ); - } -}); - -setInterval(function() { - ReactDOM.render( -- Hello, ! - It is {this.props.date.toTimeString()} -
- ); - } -}); - -setInterval(function() { - ReactDOM.render( -- 안녕, ! - 지금 시간은 {this.props.date.toTimeString()} 입니다. -
- ); - } -}); - -setInterval(function() { - ReactDOM.render( -- Hello, ! - It is {this.props.date.toTimeString()} -
- ); - } -} - -function tick() { - ReactDOM.render( -- Hello, ! - It is {this.props.date.toTimeString()} -
- ); - } -}); - -setInterval(function() { - ReactDOM.render( -- Hello, ! - It is {this.props.date.toTimeString()} -
- ); - } -}); - -setInterval(function() { - ReactDOM.render( -- Hello, ! - It is {this.props.date.toTimeString()} -
- ); - } -}); - -setInterval(function() { - ReactDOM.render( -Primo · Secondo
-```
-
-Se desideri visualizzare un'entità HTML all'interno di un contenuto dinamico, avrai problemi con il doppio escape, poiché React effettua in maniera predefinita l'escape di tutte le stringhe visualizzate per prevenire un'ampia gamma di attacchi XSS.
-
-```javascript
-// Male: Mostra "Primo · Secondo"
-{'Primo · Secondo'}
-```
-
-Esistono molte maniere di aggirare questo problema. La più facile è scrivere i caratteri Unicode direttamente in JavaScript. Dovrai assicurarti che il file sia salvato come UTF-8 e che le appropriate direttive UTF-8 siano impostate in modo che il browser li visualizzi correttamente.
-
-```javascript
-{'Primo · Secondo'}
-```
-
-Un'alternativa più sicura consiste nel trovare il [codice Unicode corrispondente all'entità](http://www.fileformat.info/info/unicode/char/b7/index.htm) e usarlo all'interno di una stringa JavaScript.
-
-```javascript
-{'Primo \u00b7 Secondo'}
-{'Primo ' + String.fromCharCode(183) + ' Secondo'}
-```
-
-Puoi usare array misti con stringhe ed elementi JSX.
-
-```javascript
-{['Primo ', ·, ' Secondo']}
-```
-
-Come ultima risorsa, puoi sempre [inserire HTML nativo](/react/tips/dangerously-set-inner-html.html).
-
-```javascript
-
-```
-
-
-## Attributi HTML Personalizzati
-
-Se passi proprietà che non esistono nella specifica HTML ad elementi HTML nativi, React li ignorerà. Se vuoi usare un attributo personalizzato, devi prefiggerlo con `data-`.
-
-```javascript
-
-```
-
-Gli attributi per [l'Accessibilità del Web](http://www.w3.org/WAI/intro/aria) che iniziano per `aria-` saranno gestiti correttamente.
-
-```javascript
-
-```
diff --git a/docs/docs/02.3-jsx-gotchas.ja-JP.md b/docs/docs/02.3-jsx-gotchas.ja-JP.md
deleted file mode 100644
index 18b202483f6ce..0000000000000
--- a/docs/docs/02.3-jsx-gotchas.ja-JP.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: jsx-gotchas
-title: JSXの理解
-permalink: docs/jsx-gotchas-ja-JP.html
-prev: jsx-spread-ja-JP.html
-next: interactivity-and-dynamic-uis-ja-JP.html
-
----
-
-JSXはHTMLに似ていますが、重要な違いがいくつかあります。
-
-> 注意:
-> インラインの `style` 属性のようなDOMの違いについては、[こちら](/react/docs/dom-differences.html)を確認してください。
-
-## HTMLのエンティティ
-
-以下のように、JSXの文字のテキストの中にHTMLのエンティティを挿入することができます。
-
-```javascript
-First · Second
-```
-
-動的なコンテンツとしてHTMLのエンティティを表示する際に、ダブルエスケープを書いてしまうことがあるかと思いますが、Reactはデフォルトで広い範囲のXSS攻撃を防ぐために表示しようとしている全ての文字列をエスケープします。
-
-```javascript
-// 悪い例: 以下は "First · Second" を表示します。
-{'First · Second'}
-```
-
-この問題を防止するためにはいくつかの方法があります。最も簡単な方法は、unicodeの文字を直でJavaScriptに記述する方法です。その際には、ファイルがUTF-8で保存されていることと、ブラウザが正しく表示できるように、UTF-8で表示する命令が正しくセットされていることを確認してください。
-
-```javascript
-{'First · Second'}
-```
-
-さらに安全な代替の方法は、[エンティティに対応するunicodeの数値](http://www.fileformat.info/info/unicode/char/b7/index.htm)を見つけて、JavaScriptの文字列の中でそれを使うことです。
-
-```javascript
-{'First \u00b7 Second'}
-{'First ' + String.fromCharCode(183) + ' Second'}
-```
-
-配列と文字列とJSXの要素を混ぜて使うこともできます。
-
-```javascript
-{['First ', ·, ' Second']}
-```
-
-最後の手段として、常に[生のHTMLを挿入](/react/tips/dangerously-set-inner-html.html)することもできます。
-
-```javascript
-
-```
-
-
-## カスタムされたHTMLの属性
-
-HTMLの仕様書に存在しない要素をネイティブなHTML要素に渡した場合は、Reactはそれらをレンダリングしません。カスタムした属性を使う場合は、 `data-` を頭につけてください。
-
-```javascript
-
-```
-
-`aria-` から始まる[Webアクセシビリティ](http://www.w3.org/WAI/intro/aria)属性はプロパティをレンダリングします。
-
-```javascript
-
-```
diff --git a/docs/docs/02.3-jsx-gotchas.ko-KR.md b/docs/docs/02.3-jsx-gotchas.ko-KR.md
deleted file mode 100644
index a2900cd583d78..0000000000000
--- a/docs/docs/02.3-jsx-gotchas.ko-KR.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: jsx-gotchas-ko-KR
-title: JSX Gotchas
-permalink: docs/jsx-gotchas-ko-KR.html
-prev: jsx-spread-ko-KR.html
-next: interactivity-and-dynamic-uis-ko-KR.html
----
-
-JSX는 HTML처럼 보이지만, 작업하다 보면 마주치게 될 몇 가지 중요한 차이점이 있습니다.
-
-> 주의:
->
-> 인라인 `style` 어트리뷰트 같은 DOM과의 차이점은 [여기](/react/tips/dangerously-set-inner-html-ko-KR.html)를 보세요.
-
-## HTML 엔티티
-
-JSX의 리터럴 텍스트에 HTML 엔티티를 넣을 수 있습니다.
-
-```javascript
-First · Second
-```
-
-동적 콘텐츠 안에 HTML 엔티티를 표시하려 할 때, React에서는 XSS 공격을 광범위하게 막기 위해서 기본적으로 모든 표시하는 문자열을 이스케이프 하기 때문에 더블 이스케이프 문제에 부딪히게 됩니다.
-
-```javascript
-// 나쁨: "First · Second"를 표시
-{'First · Second'}
-```
-
-이 이슈를 피해 갈 방법은 여럿 있지만, 가장 쉬운 방법은 유니코드 문자를 JavaScript에 직접 쓰는 것입니다. 브라우저가 올바르게 표시하도록 파일이 UTF-8으로 저장되어 있고 올바른 UTF-8 지시자를 사용하고 있는지 확인해야 합니다.
-
-```javascript
-{'First · Second'}
-```
-
-더 안전한 대안으로 [엔티티에 대응하는 유니코드 숫자](http://www.fileformat.info/info/unicode/char/b7/index.htm)를 찾아 JavaScript 문자열 안에서 사용하는 방법도 있습니다.
-
-```javascript
-{'First \u00b7 Second'}
-{'First ' + String.fromCharCode(183) + ' Second'}
-```
-
-문자열과 JSX 엘리먼트를 혼합한 배열을 사용할 수도 있습니다.
-
-```javascript
-{['First ', ·, ' Second']}
-```
-
-최후의 수단으로, 항상 [생 HTML을 삽입](/react/docs/dom-differences-ko-KR.html)할 수 있습니다.
-
-```javascript
-
-```
-
-
-## 커스텀 HTML 어트리뷰트
-
-프로퍼티를 HTML 사양에는 없는 네이티브 HTML 엘리먼트에 넘기면, React는 그 프로퍼티를 렌더하지 않습니다. 커스텀 어트리뷰트를 사용하고 싶다면, 접두사로 `data-`를 붙이셔야 합니다.
-
-```javascript
-
-```
-
-`aria-`로 시작하는 [Web 접근성](http://www.w3.org/WAI/intro/aria) 어트리뷰트는 제대로 렌더될 것입니다.
-
-```javascript
-
-```
diff --git a/docs/docs/02.3-jsx-gotchas.md b/docs/docs/02.3-jsx-gotchas.md
deleted file mode 100644
index 8d167bbd9a963..0000000000000
--- a/docs/docs/02.3-jsx-gotchas.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: jsx-gotchas
-title: JSX Gotchas
-permalink: docs/jsx-gotchas.html
-prev: jsx-spread.html
-next: interactivity-and-dynamic-uis.html
----
-
-JSX looks like HTML but there are some important differences you may run into.
-
-> Note:
->
-> For DOM differences, such as the inline `style` attribute, check [here](/react/docs/dom-differences.html).
-
-## HTML Entities
-
-You can insert HTML entities within literal text in JSX:
-
-```javascript
-First · Second
-```
-
-If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
-
-```javascript
-// Bad: It displays "First · Second"
-{'First · Second'}
-```
-
-There are various ways to work-around this issue. The easiest one is to write Unicode characters directly in JavaScript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
-
-```javascript
-{'First · Second'}
-```
-
-A safer alternative is to find the [unicode number corresponding to the entity](http://www.fileformat.info/info/unicode/char/b7/index.htm) and use it inside of a JavaScript string.
-
-```javascript
-{'First \u00b7 Second'}
-{'First ' + String.fromCharCode(183) + ' Second'}
-```
-
-You can use mixed arrays with strings and JSX elements. Each JSX element in the array needs a unique key.
-
-```javascript
-{['First ', ·, ' Second']}
-```
-
-As a last resort, you always have the ability to [insert raw HTML](/react/tips/dangerously-set-inner-html.html).
-
-```javascript
-
-```
-
-
-## Custom HTML Attributes
-
-If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with `data-`.
-
-```javascript
-
-```
-
-However, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
-
-```javascript
-First · Second
-```
-
-如果想在 JSX 表达式中显示 HTML 实体，可以会遇到二次转义的问题，因为 React 默认会转义所有字符串，为了防止各种 XSS 攻击。
-
-```javascript
-// 错误: 会显示 “First · Second”
-{'First · Second'}
-```
-
-有多种绕过的方法。最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。
-
-```javascript
-{'First · Second'}
-```
-
-安全的做法是先找到 [实体的 Unicode 编号](http://www.fileformat.info/info/unicode/char/b7/index.htm) ，然后在 JavaScript 字符串里使用。
-
-```javascript
-{'First \u00b7 Second'}
-{'First ' + String.fromCharCode(183) + ' Second'}
-```
-
-可以在数组里混合使用字符串和 JSX 元素。
-
-```javascript
-{['First ', ·, ' Second']}
-```
-
-万不得已，可以直接[插入原始HTML](/react/tips/dangerously-set-inner-html.html)。
-
-```javascript
-
-```
-
-
-## 自定义 HTML 属性
-
-如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 `data-` 前缀。
-
-```javascript
-
-```
-
-然而，在自定义元素中任意的属性都是被支持的 （那些在tag名里带有连接符或者 `is="..."` 属性的）
-
-```javascript
-- You {text} this. Click to toggle. -
- ); - } -}); - -ReactDOM.render( -- You {text} this. Click to toggle. -
- ); - } -}); - -ReactDOM.render( -- You {text} this. Click to toggle. -
- ); - } -}); - -ReactDOM.render( -
- You {text} this. Click to toggle.
-
- );
- }
-}
-
-ReactDOM.render(
- - You {text} this. Click to toggle. -
- ); - } -}); - -ReactDOM.render( -- You {text} this. Click to toggle. -
- ); - } -}); - -ReactDOM.render( -
-
- );
- }
-});
-
-var ProfilePic = React.createClass({
- render: function() {
- return (
- Paragrafo 1
-Paragrafo 2
-Paragrafo 2
-Paragrafo 1
` è stato rimosso. Invece, React riconcilierà il DOM cambiando il testo contenuto nel primo figlio e distruggerà l'ultimo figlio. React reconcilia secondo l'*ordine* dei figli. - - -### Figli Dotati di Stato - -Per molti componenti, questo non è un grande problema. Tuttavia, per i componenti dotati di stato che mantengono dati in `this.state` attraverso le diverse passate di rendering, questo può essere problematico. - -In molti casi, questo problema può essere aggirato nascondendo gli elementi anziché distruggendoli: - -```html -// Prima passata di rendering -Paragrafo 1
-Paragrafo 2
-Paragrafo 1
-Paragrafo 2
--
- {results.map(function(result) {
- return
- {result.text} ; - })} -
-
- {this.props.results.map(function(result) {
- return
-
- {this.props.results.map(function(result) {
- return
-
- );
- }
-});
-
-var ProfilePic = React.createClass({
- render: function() {
- return (
- Paragraph 1
-Paragraph 2
-Paragraph 2
-Paragraph 1
` が削除されたように思えます。代わりに、Reactは1つ目の子要素のテキストコンテンツを変更し、最後の子要素を削除するという変更を加えることでDOMを調和させます。Reactは子要素の *順序* に従って調和するのです。 - - - -### ステートフルな子要素 - -多くのコンポーネントにとって、これは大きな処理ではありません。しかし、レンダリングのパスを超えて、 `this.state` にデータを保持しているステートフルなコンポーネントにとっては、これはとても問題になり得ます。 - -多くのケースにおいては、以下のように、削除する代わりに要素を隠すことで回避することがあります。 - -```html -// パス1のレンダリング -Paragraph 1
-Paragraph 2
-Paragraph 1
-Paragraph 2
--
- {results.map(function(result) {
- return
- {result.text} ; - })} -
-
- {this.props.results.map(function(result) {
- return
-
- {this.props.results.map(function(result) {
- return
-
- );
- }
-});
-
-var ProfilePic = React.createClass({
- render: function() {
- return (
- Paragraph 1
-Paragraph 2
-Paragraph 2
-Paragraph 1
`가 없어졌습니다만 그러는 대신에, React는 첫 번째 자식의 텍스트를 비교조정하고 마지막 자식을 파괴하도록 DOM을 비교조정할 것입니다. React는 자식들의 *순서*에 따라 비교조정합니다. - -### 상태기반(Stateful) 자식 - -대부분의 컴포넌트에서는, 이것은 큰 문제가 아닙니다. 하지만 렌더 패스 간에 `this.state`를 유지하는 상태기반의 컴포넌트에서는 매우 문제가 될 수 있습니다. - -대부분의 경우, 이 문제는 엘리먼트를 파괴하지 않고 숨김으로써 피해갈 수 있습니다. - -```html -// Render Pass 1 -Paragraph 1
-Paragraph 2
-Paragraph 1
-Paragraph 2
--
- {results.map(function(result) {
- return
- {result.text} ; - })} -
-
- {this.props.results.map(function(result) {
- return
-
- {this.props.results.map(function(result) {
- return
-
- );
- }
-}
-
-class PagePic extends React.Component {
- render() {
- return (
- Paragraph 1
-Paragraph 2
-Paragraph 2
-Paragraph 1
` was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the *order* of the children. - -### Stateful Children - -For most components, this is not a big deal. However, for stateful components that maintain data in `this.state` across render passes, this can be very problematic. - -In most cases, this can be sidestepped by hiding elements instead of destroying them: - -```html -// Render Pass 1 -Paragraph 1
-Paragraph 2
-Paragraph 1
-Paragraph 2
--
- {this.props.results.map((result) => (
-
- {result.text} - ))} -
-
- {this.props.results.map((result) => (
-
-
- {this.props.results.map((result) => (
-
-
- );
- }
-});
-
-var PagePic = React.createClass({
- render: function() {
- return (
- Paragraph 1
-Paragraph 2
-Paragraph 2
-Paragraph 1
`。事实上，React 先更新第一个子级的内容，然后删除最后一个组件。React 是根据子级的*顺序*来校正的。 - -### 子组件状态管理 - -对于大多数组件，这没什么大碍。但是，对于使用 `this.state` 来在多次渲染过程中里维持数据的状态化组件，这样做潜在很多问题。 - -多数情况下，可以通过隐藏组件而不是删除它们来绕过这些问题。 - -```html -// 第一次渲染 -Paragraph 1
-Paragraph 2
-Paragraph 1
-Paragraph 2
--
- {results.map(function(result) {
- return
- {result.text} ; - })} -
-
- {this.props.results.map(function(result) {
- return
-
- {this.props.results.map(function(result) {
- return
- {this.props.children} // Questo deve essere esattamente un elemento oppure lancerà un'eccezione.
-
- );
- }
-
-});
-```
-
-## Mixin
-
-I componenti sono la maniera migliore di riutilizzare il codice in React, ma a volte componenti molto diversi possono condividere funzionalità comune. Questi sono a volte chiamate [responsabilità trasversali](https://en.wikipedia.org/wiki/Cross-cutting_concern). React fornisce i `mixin` per risolvere questo problema.
-
-Un caso d'uso comune è un componente che desidera aggiornarsi ad intervalli di tempo. È facile usare `setInterval()`, ma è anche importante cancellare la chiamata ripetuta quando non è più necessaria per liberare memoria. React fornisce dei [metodi del ciclo di vita](/react/docs/working-with-the-browser.html#component-lifecycle) che ti permettono di sapere quando un componente sta per essere creato o distrutto. Creiamo un semplice mixin che usa questi metodi per fornire una facile funzione `setInterval()` che sarà automaticamente rimossa quando il tuo componente viene distrutto.
-
-```javascript
-var SetIntervalMixin = {
- componentWillMount: function() {
- this.intervals = [];
- },
- setInterval: function() {
- this.intervals.push(setInterval.apply(null, arguments));
- },
- componentWillUnmount: function() {
- this.intervals.forEach(clearInterval);
- }
-};
-
-var TickTock = React.createClass({
- mixins: [SetIntervalMixin], // Usa il mixin
- getInitialState: function() {
- return {seconds: 0};
- },
- componentDidMount: function() {
- this.setInterval(this.tick, 1000); // Chiama un metodo del mixin
- },
- tick: function() {
- this.setState({seconds: this.state.seconds + 1});
- },
- render: function() {
- return (
- - React has been running for {this.state.seconds} seconds. -
- ); - } -}); - -ReactDOM.render( -Ciao {this.props.name}
;
- }
-}
-ReactDOM.render(
- Click: {this.state.count}
-
- );
- }
-}
-Counter.propTypes = { initialCount: React.PropTypes.number };
-Counter.defaultProps = { initialCount: 0 };
-```
-
-### Niente Binding Automatico
-
-I metodi seguono la stessa semantica delle classi ES6 regolari, ciò significa che non effettuano il binding automatico di `this` all'istanza. Dovrai pertanto usare esplicitamente `.bind(this)` oppure [le funzioni freccia](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`.
-
-### Niente Mixin
-
-Sfortunatamente, ES6 è stato lanciato senza alcun supporto per i mixin. Di conseguenza non vi è alcun supporto per i mixin quando usi React con le classi ES6. Stiamo lavorando per rendere più semplice il supporto dei relativi casi d'uso senza ricorrere ai mixin.
-
-
-
-## Funzioni Prive di Stato
-
-Puoi anche definire le tue classi React come semplici funzioni JavaScript. Ad esempio usando la sintassi della funzione priva di stato:
-
-```javascript
-function HelloMessage(props) {
- return Ciao {props.name}
;
-}
-ReactDOM.render(Ciao {props.name}
;
-ReactDOM.render(
- {this.props.children} // これは1つの要素でなくてはなりません。さもなければエラーがthrowされます。
-
- );
- }
-
-});
-```
-
-## ミックスイン
-
-コンポーネントはReactでコードを再利用する最良の方法ですが、全く異なったコンポーネントが共通の機能性を共有することもあります。それらは[横断的関心事](https://en.wikipedia.org/wiki/Cross-cutting_concern)と呼ばれることもあります。Reactはこの問題を解決するために、 `mixins` を提供しています。
-
-共通のユースケースとしては、時間の間隔によって、コンポーネントにそれ自身をアップデートさせたい場合があります。 `setInterval()` を使うのは簡単ですが、メモリをセーブするためにもう必要でなくなった場合にはインターバルをキャンセルすることが重要です。Reactは[ライフサイクルメソッド](/react/docs/working-with-the-browser.html#component-lifecycle)を提供しており、コンポーネントが作成されようとしたり削除されようとした時にそれを検知することができます。コンポーネントが削除されたときに自動的にクリーンアップしてくれる、簡単な `setInterval()` 関数を提供する以下のようなメソッドを使って単純なミックスインを作成してみましょう。
-
-```javascript
-var SetIntervalMixin = {
- componentWillMount: function() {
- this.intervals = [];
- },
- setInterval: function() {
- this.intervals.push(setInterval.apply(null, arguments));
- },
- componentWillUnmount: function() {
- this.intervals.forEach(clearInterval);
- }
-};
-
-var TickTock = React.createClass({
- mixins: [SetIntervalMixin], // ミックスインを使う
- getInitialState: function() {
- return {seconds: 0};
- },
- componentDidMount: function() {
- this.setInterval(this.tick, 1000); // ミックスインのメソッドを呼ぶ
- },
- tick: function() {
- this.setState({seconds: this.state.seconds + 1});
- },
- render: function() {
- return (
- - React has been running for {this.state.seconds} seconds. -
- ); - } -}); - -ReactDOM.render( -Hello {this.props.name}
;
- }
-}
-ReactDOM.render(
- Clicks: {this.state.count}
-
- );
- }
-}
-Counter.propTypes = { initialCount: React.PropTypes.number };
-Counter.defaultProps = { initialCount: 0 };
-```
-
-### オートバインディングしません
-
-メソッドは標準のES6のクラスと同じ仕様です。それは、 `this` をインスタンスに自動的にバインドしないことを意味します。明確に `.bind(this)` を使うか [アロー関数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/) `=>` を使ってください。
-
-### ミックスインはありません
-
-不幸なことに、ES6はミックスインのサポートを行いません。それゆえ、ReactをES6のクラスと一緒に使う際にはミックスインのサポートはありません。代わりに、ミックスインに頼ることなくそれらのユースケースをサポートするのが簡単になるよう努力しています。
diff --git a/docs/docs/05-reusable-components.ko-KR.md b/docs/docs/05-reusable-components.ko-KR.md
deleted file mode 100644
index 3f6bba4212b75..0000000000000
--- a/docs/docs/05-reusable-components.ko-KR.md
+++ /dev/null
@@ -1,256 +0,0 @@
----
-id: reusable-components-ko-KR
-title: 재사용가능한 컴포넌트
-permalink: docs/reusable-components-ko-KR.html
-prev: multiple-components-ko-KR.html
-next: transferring-props-ko-KR.html
----
-
-인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포넌트 등.)을 잘 정의된 인터페이스의 재사용 가능한 컴포넌트로 분해합니다. 이런 방법으로 다음에 UI를 구축할 때에는 훨씬 적은 코드로 만들 수 있습니다. 이 말은 더 빠른 개발 시간, 더 적은 버그, 더 적은 용량으로 할 수 있다는 뜻이죠.
-
-## Prop 검증
-
-앱의 규모가 커지면 컴포넌트들이 바르게 사용되었는지 확인하는게 도움이 됩니다. 확인은 `propTypes`를 명시해서 할 수 있습니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 다양한 검증자(validator)를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발 모드에서만 검사됩니다. 다음은 제공되는 검증자를 설명하는 예제입니다.
-
-```javascript
-React.createClass({
- propTypes: {
- // 특정 JavaScript 프리미티브 타입에 대한 prop을 명시할 수 있습니다.
- // 기본적으로 이것들은 모두 선택적입니다.
- optionalArray: React.PropTypes.array,
- optionalBool: React.PropTypes.bool,
- optionalFunc: React.PropTypes.func,
- optionalNumber: React.PropTypes.number,
- optionalObject: React.PropTypes.object,
- optionalString: React.PropTypes.string,
- optionalSymbol: React.PropTypes.symbol,
-
- // 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소
- // 이것들을 포함하는 배열(이나 프래그먼트)
- optionalNode: React.PropTypes.node,
-
- // React 엘리먼트
- optionalElement: React.PropTypes.element,
-
- // 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof
- // 연산자를 사용합니다.
- optionalMessage: React.PropTypes.instanceOf(Message),
-
- // 열거형처럼 특정 값들로만 prop을 제한해서 사용할 수 있습니다.
- optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
-
- // 많은 타입들 중 하나로 사용할 수 있는 객체가 될 수도 있습니다.
- optionalUnion: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.number,
- React.PropTypes.instanceOf(Message)
- ]),
-
- // 특정 타입의 배열
- optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
-
- // 특정 타입의 속성값을 갖는 객체
- optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
-
- // 특정한 형태(shape)의 객체
- optionalObjectWithShape: React.PropTypes.shape({
- color: React.PropTypes.string,
- fontSize: React.PropTypes.number
- }),
-
- // 위에 언급된 것들을 `isRequired`로 연결해서 prop이 제공되지 않을 때 경고를
- // 띄우도록 할 수도 있습니다.
- requiredFunc: React.PropTypes.func.isRequired,
-
- // 어떤 데이터 타입도 가능
- requiredAny: React.PropTypes.any.isRequired,
-
- // 물론 사용자 정의 검증자도 지정할 수 있습니다. 이는 검증이 실패했을 때
- // Error 객체를 리턴해야합니다. `console.warn`을 이나 throw를 하면 안됩니다.
- // 그렇게하면 `oneOfType` 안에서 작동하지 않습니다.
- customProp: function(props, propName, componentName) {
- if (!/matchme/.test(props[propName])) {
- return new Error('Validation failed!');
- }
- }
- },
- /* ... */
-});
-```
-
-## 기본 Prop 값
-
-React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다.
-
-```javascript
-var ComponentWithDefaultProps = React.createClass({
- getDefaultProps: function() {
- return {
- value: 'default value'
- };
- }
- /* ... */
-});
-```
-
-`getDefaultProps()`의 결과값은 캐시가 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록 해주는데 사용됩니다.`getDefaultProps()`를 사용하면 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용할 수 있습니다.
-
-## Prop 전달하기: 단축
-
-React 컴포넌트의 흔히 그냥 기본 HTML 엘리먼트를 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다.
-
-```javascript
-var CheckLink = React.createClass({
- render: function() {
- // 모든 prop을 받아서 CheckLink에 넘기고 에 복사합니다.
- return {'√ '}{this.props.children};
- }
-});
-
-ReactDOM.render(
-
- {this.props.children} // 정확히 한 엘리먼트여야만 하며, 아니면 에러가 발생합니다.
-
- );
- }
-
-});
-```
-
-## 믹스인
-
-컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다.
-
-예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser-ko-KR.html#컴포넌트-생명주기)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
-
-```javascript
-var SetIntervalMixin = {
- componentWillMount: function() {
- this.intervals = [];
- },
- setInterval: function() {
- this.intervals.push(setInterval.apply(null, arguments));
- },
- componentWillUnmount: function() {
- this.intervals.forEach(clearInterval);
- }
-};
-
-var TickTock = React.createClass({
- mixins: [SetIntervalMixin], // 믹스인 사용
- getInitialState: function() {
- return {seconds: 0};
- },
- componentDidMount: function() {
- this.setInterval(this.tick, 1000); // 믹스인에 있는 메소드를 호출
- },
- tick: function() {
- this.setState({seconds: this.state.seconds + 1});
- },
- render: function() {
- return (
- - React has been running for {this.state.seconds} seconds. -
- ); - } -}); - -ReactDOM.render( -Hello {this.props.name}
;
- }
-}
-ReactDOM.render(
- Clicks: {this.state.count}
-
- );
- }
-}
-Counter.propTypes = { initialCount: React.PropTypes.number };
-Counter.defaultProps = { initialCount: 0 };
-```
-
-### 자동 바인딩 안됨
-
-메소드는 일반 ES6 클래스와 동일한 시멘틱을 따릅니다. `this`를 인스턴스에 자동으로 바인딩하지 않는다는 이야기입니다. 명시적으로 `.bind(this)`나 [화살표 함수(arrow function)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`를 사용하세요.
-
-### 믹스인 안됨
-
-불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다.
-
-## 상태를 가지지 않는 함수
-
-React 클래스를 일반 JavaScript 함수로 작성할 수도 있습니다. 상태를 가지지 않는 함수 문법을 사용하는 예제입니다.
-
-```javascript
-function HelloMessage(props) {
- return Hello {props.name}
;
-}
-ReactDOM.render(Hello {props.name}
;
-ReactDOM.render(Hello, {this.props.name}
- ); - } -} - -Greeting.propTypes = { - name: React.PropTypes.string -}; -``` - -Here is an example documenting the different validators provided: - -```javascript -MyComponent.propTypes = { - // You can declare that a prop is a specific JS primitive. By default, these - // are all optional. - optionalArray: React.PropTypes.array, - optionalBool: React.PropTypes.bool, - optionalFunc: React.PropTypes.func, - optionalNumber: React.PropTypes.number, - optionalObject: React.PropTypes.object, - optionalString: React.PropTypes.string, - optionalSymbol: React.PropTypes.symbol, - - // Anything that can be rendered: numbers, strings, elements or an array - // (or fragment) containing these types. - optionalNode: React.PropTypes.node, - - // A React element. - optionalElement: React.PropTypes.element, - - // You can also declare that a prop is an instance of a class. This uses - // JS's instanceof operator. - optionalMessage: React.PropTypes.instanceOf(Message), - - // You can ensure that your prop is limited to specific values by treating - // it as an enum. - optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), - - // An object that could be one of many types - optionalUnion: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.instanceOf(Message) - ]), - - // An array of a certain type - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - - // An object with property values of a certain type - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - - // An object taking on a particular shape - optionalObjectWithShape: React.PropTypes.shape({ - color: React.PropTypes.string, - fontSize: React.PropTypes.number - }), - - // You can chain any of the above with `isRequired` to make sure a warning - // is shown if the prop isn't provided. - requiredFunc: React.PropTypes.func.isRequired, - - // A value of any data type - requiredAny: React.PropTypes.any.isRequired, - - // You can also specify a custom validator. It should return an Error - // object if the validation fails. Don't `console.warn` or throw, as this - // won't work inside `oneOfType`. - customProp: function(props, propName, componentName) { - if (!/matchme/.test(props[propName])) { - return new Error( - 'Invalid prop `' + propName + '` supplied to' + - ' `' + componentName + '`. Validation failed.' - ); - } - }, - - // You can also supply a custom validator to `arrayOf` and `objectOf`. - // It should return an Error object if the validation fails. The validator - // will be called for each key in the array or object. The first two - // arguments of the validator are the array or object itself, and the - // current item's key. - customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { - if (!/matchme/.test(propValue[key])) { - return new Error( - 'Invalid prop `' + propFullName + '` supplied to' + - ' `' + componentName + '`. Validation failed.' - ); - } - }) -}; -``` - -### Single Child - -With `React.PropTypes.element` you can specify that only a single child can be passed to a component as children. - -```javascript -class MyComponent extends React.Component { - render() { - // This must be exactly one element or it will warn. - var children = this.props.children; - return ( -
- {children}
-
- );
- }
-}
-
-MyComponent.propTypes = {
- children: React.PropTypes.element.isRequired
-};
-```
-
-## Default Prop Values
-
-React lets you define default values for your `props` in a very declarative way:
-
-```javascript
-class Greeting extends React.Component {
- render() {
- return (
- Hello, {this.props.name}
- ); - } -} - -// Specifies the default values for props: -Greeting.defaultProps = { - name: 'Stranger' -}; - -// Renders "Hello, Stranger": -ReactDOM.render( -Hello, {props.name}
; -} - -ReactDOM.render( -Hello, {props.name}
-); - -ReactDOM.render( -Hello, {props.name}
- ); -} - -Greeting.propTypes = { - name: React.PropTypes.string -}; - -Greeting.defaultProps = { - name: 'John Doe' -}; - -ReactDOM.render( -Hello, {this.props.name}
; - } -} -``` - -If you don't use ES6 yet, you may use [`React.createClass`](/react/docs/top-level-api.html#react.createclass) helper instead: - - -```javascript -var Greeting = React.createClass({ - render: function() { - returnHello, {this.props.name}
; - } -}); -``` - -The API of ES6 classes is similar to [`React.createClass`](/react/docs/top-level-api.html#react.createclass) with a few exceptions. - -### Declaring Prop Types and Default Props - -With functions and ES6 classes, `propTypes` and `defaultProps` are defined as properties on the components themselves: - -```javascript -class Greeting extends React.Component { - // ... -} - -Greeting.propTypes = { - name: React.PropTypes.string -}; - -Greeting.defaultProps = { - name: 'Mary' -}; -``` - -With `React.createClass()`, you need to define `propTypes` as a property on the passed object, and `getDefaultProps()` as a function on it: - -```javascript -var Greeting = React.createClass({ - propTypes: { - name: React.PropTypes.string - }, - - getDefaultProps: function() { - return { - name: 'Mary' - }; - }, - - // ... - -}); -``` - -### Setting the Initial State - -In ES6 classes, you can define the initial state by assigning `this.state` in the constructor: - -```javascript -class Counter extends React.Component { - constructor(props) { - super(props); - this.state = {count: props.initialCount}; - } - // ... -} -``` - -With `React.createClass()`, you have to provide a separate `getInitialState` method that returns the initial state: - -```javascript -var Counter = React.createClass({ - getInitialState: function() { - return {count: this.props.initialCount}; - }, - // ... -}); -``` - -### Autobinding - -In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor: - -```javascript -class SayHello extends React.Component { - constructor(props) { - super(props); - // This line is important! - this.handleClick = this.handleClick.bind(this); - } - - handleClick() { - alert('Hello!'); - } - - render() { - // Because `this.handleClick` is bound, we can use it as an event handler. - return ( - - ); - } -} -``` - -With `React.createClass()`, this is not necessary because it binds all methods: - -```javascript -var SayHello = React.createClass({ - handleClick: function() { - alert('Hello!'); - }, - - render: function() { - return ( - - ); - } -}); -``` - -This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications. - -If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel: - - -```javascript -class SayHello extends React.Component { - // WARNING: this syntax is experimental! - // Using an arrow here binds the method: - handleClick = () => { - alert('Hello!'); - } - - render() { - return ( - - ); - } -} -``` - -Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language. - -If you'd rather play it safe, you have a few options: - -* Bind methods in the constructor. -* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)})`. -* Keep using `React.createClass()`. - -### Mixins - ->**Note:** -> ->ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. -> ->**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/react/blog/2016/07/13/mixins-considered-harmful.html).** -> ->This section exists only for the reference. - -Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). [`React.createClass`](/react/docs/top-level-api.html#react.createclass) lets you use a legacy `mixins` system for that. - -One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/react/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed. - -```javascript -var SetIntervalMixin = { - componentWillMount: function() { - this.intervals = []; - }, - setInterval: function() { - this.intervals.push(setInterval.apply(null, arguments)); - }, - componentWillUnmount: function() { - this.intervals.forEach(clearInterval); - } -}; - -var TickTock = React.createClass({ - mixins: [SetIntervalMixin], // Use the mixin - getInitialState: function() { - return {seconds: 0}; - }, - componentDidMount: function() { - this.setInterval(this.tick, 1000); // Call a method on the mixin - }, - tick: function() { - this.setState({seconds: this.state.seconds + 1}); - }, - render: function() { - return ( -- React has been running for {this.state.seconds} seconds. -
- ); - } -}); - -ReactDOM.render( -
- {this.props.children} // 这里必须是一个元素否则就会警告
-
- );
- }
-
-});
-```
-
-## 默认 Prop 值
-
-React 支持以声明式的方式来定义 `props` 的默认值。
-
-```javascript
-var ComponentWithDefaultProps = React.createClass({
- getDefaultProps: function() {
- return {
- value: 'default value'
- };
- }
- /* ... */
-});
-```
-
-当父级没有传入 props 时，`getDefaultProps()` 可以保证 `this.props.value` 有默认值，注意 `getDefaultProps` 的结果会被 *缓存*。得益于此，你可以直接使用 props，而不必写手动编写一些重复或无意义的代码。
-
-## 传递 Props：捷径
-
-有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想复制任何传进你的组件的HTML属性到底层的HTML元素上。为了减少输入，你可以用 JSX _spread_ 语法来完成：
-
-```javascript
-var CheckLink = React.createClass({
- render: function() {
- // 这样会把 CheckList 所有的 props 复制到
- return {'√ '}{this.props.children};
- }
-});
-
-ReactDOM.render(
- - React has been running for {this.state.seconds} seconds. -
- ); - } -}); - -ReactDOM.render( -Hello {this.props.name}
;
- }
-}
-ReactDOM.render(
- Clicks: {this.state.count}
-
- );
- }
-}
-Counter.propTypes = { initialCount: React.PropTypes.number };
-Counter.defaultProps = { initialCount: 0 };
-```
-
-### 无自动绑定
-
-方法遵循正式的ES6 class的语义，意味着它们不会自动绑定`this`到实例上。你必须显示的使用`.bind(this)` or [箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`：
-
-```javascript
-// 你可以使用 bind() 来绑定 `this`
-
-
-// 或者你可以使用箭头函数
-
this.tick()}>
-```
-
-我们建议你在构造函数中绑定事件处理器，这样对于所有实例它们只需绑定一次：
-
-```javascript
-constructor(props) {
- super(props);
- this.state = {count: props.initialCount};
- this.tick = this.tick.bind(this);
-}
-```
-
-现在你可以直接使用 `this.tick` 因为它已经在构造函数里绑定过一次了。
-
-```javascript
-// 它已经在构造函数里绑定过了
-
-```
-
-这对应用的性能有帮助，特别是当你用 [浅层比较](/react/docs/shallow-compare.html) 实现 [shouldComponentUpdate()](/react/docs/component-specs.html#updating-shouldcomponentupdate) 时。
-
-### 没有 Mixins
-
-不幸的是ES6的发布没有任何mixin的支持。因此，当你在ES6 classes下使用React时不支持mixins。作为替代，我们正在努力使它更容易不依靠mixins支持这些用例。
-
-## 无状态函数
-
-你也可以用 JavaScript 函数来定义你的 React 类。例如使用无状态函数语法：
-
-```javascript
-function HelloMessage(props) {
- return
- Ciao mondo!
- ,
- document.getElementById('example')
-);
-```
-
-E se aggiungessimo una proprietà `name`? O una proprietà `title`? O `onMouseOver`?
-
-## Trasferire con `...` in JSX
-
-> NOTA:
->
-> La sintassi `...` fa parte della proposta Object Rest Spread. Questa proposta è in processo di diventare uno standard. Consulta la sezione [Proprietà Rest e Spread ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) di seguito per maggiori dettagli.
-
-A volte passare manualmente ciascuna proprietà può essere noioso e fragile. In quei casi puoi usare l'[assegnamento destrutturante](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) con le proprietà residue per estrarre un insieme di proprietà sconosciute.
-
-Elenca tutte le proprietà che desideri consumare, seguite da `...other`.
-
-```javascript
-var { checked, ...other } = props;
-```
-
-Ciò assicura che vengano passate tutte le proprietà TRANNE quelle che stai consumando tu stesso.
-
-```javascript
-function FancyCheckbox(props) {
- var { checked, ...other } = props;
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
- // `other` contiene { onClick: console.log } ma non la proprietà checked
- return (
-
- );
-}
-ReactDOM.render(
-
- Ciao mondo!
- ,
- document.getElementById('example')
-);
-```
-
-> NOTA:
->
-> Nell'esempio precedente, la proprietà `checked` è anche un attributo DOM valido. Se non utilizzassi la destrutturazione in questo modo, potresti inavvertitamente assegnarlo al `div`.
-
-Usa sempre il pattern di destrutturazione quando trasferisci altre proprietà sconosciute in `other`.
-
-```javascript
-function FancyCheckbox(props) {
- var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
- // ANTI-PATTERN: `checked` sarebbe passato al componente interno
- return (
-
- );
-}
-```
-
-## Consumare e Trasferire la Stessa Proprietà
-
-Se il tuo componente desidera consumare una proprietà, ma anche passarla ad altri, puoi passarla esplicitamente mediante `checked={checked}`. Questo è preferibile a passare l'intero oggetto `this.props` dal momento che è più facile effettuarne il linting e il refactoring.
-
-```javascript
-function FancyCheckbox(props) {
- var { checked, title, ...other } = props;
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
- var fancyTitle = checked ? 'X ' + title : 'O ' + title;
- return (
-
- );
-}
-```
-
-> NOTA:
->
-> L'ordine è importante. Mettendo il `{...other}` prima delle tue proprietà JSX ti assicuri che il consumatore del tuo componente non possa ridefinirle. Nell'esempio precedente, abbiamo garantito che l'elemento input sarà del tipo `"checkbox"`.
-
-## Proprietà Rest e Spread `...`
-
-Le proprietà Rest ti permettono di estrarre le proprietà residue di un oggetto in un nuovo oggetto. Vengono escluse tutte le altre proprietà elencate nel pattern di destrutturazione.
-
-Questa è un'implementazione sperimentale di una [proposta ES7](https://github.com/sebmarkbage/ecmascript-rest-spread).
-
-```javascript
-var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
-x; // 1
-y; // 2
-z; // { a: 3, b: 4 }
-```
-
-> Nota:
->
-> Questa proposta ha raggiunto lo stadio 2 ed è attivata in modo predefinito in Babel. Vecchie versioni di Babel potrebbero richiedere l'abilitazione esplicita di questa trasformazione con `babel --optional es7.objectRestSpread`
-
-## Trasferire con Underscore
-
-Se non usi JSX, puoi usare una libreria per ottenere il medesimo pattern. Underscore supporta `_.omit` per omettere delle proprietà ed `_.extend` per copiare le proprietà in un nuovo oggetto.
-
-```javascript
-function FancyCheckbox(props) {
- var checked = props.checked;
- var other = _.omit(props, 'checked');
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
- return (
- React.DOM.div(_.extend({}, other, { className: fancyClass }))
- );
-}
-```
diff --git a/docs/docs/06-transferring-props.ja-JP.md b/docs/docs/06-transferring-props.ja-JP.md
deleted file mode 100644
index 3ea4055d63eaf..0000000000000
--- a/docs/docs/06-transferring-props.ja-JP.md
+++ /dev/null
@@ -1,151 +0,0 @@
----
-id: transferring-props
-title: propsの移譲
-permalink: docs/transferring-props-ja-JP.html
-prev: reusable-components-ja-JP.html
-next: forms-ja-JP.html
-
----
-
-
-コンポーネントを抽象的にラップすることはReactにおいて共通のパターンです。外のコンポーネントは単純なプロパティを表示し、中ではさらに複雑なインプリメンテーションの詳細を持つようになっています。
-
-以下のように、古いpropsと追加の値を[JSXの拡張属性](/react/docs/jsx-spread-ja-JP.html)を使ってマージすることができます。
-
-```javascript
-
- Hello world!
- ,
- document.getElementById('example')
-);
-```
-
-しかし、 `name` プロパティや `title` プロパティや `onMouseOver` はどうでしょうか？
-
-## JSXにおける `...` を使った移譲
-
-> 注意:
-> 以下の例では、実験的なES7のシンタックスであることを示すために `--harmony ` フラグが必要になります。ブラウザ上でJSXトランスフォーマーを使う際には、単純に `
-
Hello {props.name}
;
-}
-ReactDOM.render(Hello {props.name}
;
-ReactDOM.render(
- {props.children}
-
- );
-}
-ReactDOM.render(
-
- {props.children}
-
- );
-}
-ReactDOM.render(
-