Merge pull request reactjs#141 from reactjs/sync-8803c637

Sync with reactjs.org @ 8803c63

Author: Jhon Mike

content/docs/code-splitting.md

@@ -102,7 +102,7 @@ import("./math").then(math => {
 
 When Webpack comes across this syntax, it automatically starts code-splitting
 your app. If you're using Create React App, this is already configured for you
-and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
+and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
 out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
 
 If you're setting up Webpack yourself, you'll probably want to read Webpack's

content/languages.yml

@@ -1,7 +1,7 @@
 # Status enums indicate what percentage of "core" content has been translated:
-# 0: Incomplete (0–49%)
-# 1: Partially complete (50–94%)
-# 2: Complete (95–100%)
+# 0: Incomplete (0-49%)
+# 1: Partially complete (50-99%)
+# 2: Complete (100%)
 
 - name: English
   translated_name: English
@@ -27,6 +27,10 @@
   translated_name: Deutsch
   code: de
   status: 0
+- name: Greek
+  translated_name: Ελληνικά
+  code: el
+  status: 0
 - name: Spanish
   translated_name: Español
   code: es
@@ -38,6 +42,10 @@
 - name: French
   translated_name: Français
   code: fr
+  status: 1
+- name: Gujarati
+  translated_name: ગુજરાતી
+  code: gu
   status: 0
 - name: Hebrew
   translated_name: עברית
@@ -62,11 +70,23 @@
 - name: Japanese
   translated_name: 日本語
   code: ja
-  status: 1
+  status: 2
+- name: Central Khmer
+  translated_name: ភាសាខ្មែរ
+  code: km
+  status: 0
 - name: Korean
   translated_name: 한국어
   code: ko
   status: 0
+- name: Kurdish
+  translated_name: کوردی‎
+  code: ku
+  status: 0
+- name: Lithuanian
+  translated_name: Lietuvių kalba
+  code: lt
+  status: 0
 - name: Malayalam
   translated_name: മലയാളം
   code: ml
@@ -98,7 +118,7 @@
 - name: Russian
   translated_name: Русский
   code: ru
-  status: 0
+  status: 1
 - name: Sinhala
   translated_name: සිංහල
   code: si
@@ -107,13 +127,21 @@
   translated_name: தமிழ்
   code: ta
   status: 0
+- name: Telugu
+  translated_name: తెలుగు
+  code: te
+  status: 0
 - name: Turkish
   translated_name: Türkçe
   code: tr
   status: 0
 - name: Ukrainian
   translated_name: Українська
   code: uk
+  status: 1
+- name: Urdu
+  translated_name: اردو
+  code: ur
   status: 0
 - name: Uzbek
   translated_name: Oʻzbekcha
@@ -126,7 +154,7 @@
 - name: Simplified Chinese
   translated_name: 简体中文
   code: zh-hans
-  status: 0
+  status: 1
 - name: Traditional Chinese
   translated_name: 繁體中文
   code: zh-hant

content/tutorial/tutorial.md

@@ -31,8 +31,6 @@ O tutorial está dividido em várias seções:
 
 Você não precisa completar todas as seções de uma vez para entender tudo que o tutorial tem a oferecer. Tente chegar o mais longe possível, mesmo que seja uma ou duas seções.
 
-Não há problema em copiar e colar o código enquanto você acompanha o tutorial. Mas, recomendamos que você o digite à mão. Isso ajudará você a desenvolver uma memória muscular e ter um entendimento mais forte.
-
 ### O que estamos construindo? {#what-are-we-building}
 
 Neste tutorial, mostraremos como criar um jogo interativo de jogo-da-velha com React.
@@ -190,6 +188,8 @@ O componente Square renderiza um único `<button>` e o Board renderiza 9 squares
 
 Para aquecer, vamos tentar passar alguns dados do nosso componente Board para o nosso componente Square.
 
+É altamente recomendável digitar o código manualmente, enquanto você está trabalhando no tutorial e não usando copiar/colar. Isso ajudará você a desenvolver a memória muscular e um melhor entendimento.
+
 No método `renderSquare` do Board, altere o código para passar um prop chamado `value` para o Square:
 
 ```js{3}
@@ -242,7 +242,7 @@ class Square extends React.Component {
 }
 ```
 
-Se clicarmos em um quadrado agora, devemos receber um alerta em nosso navegador.
+Se você clicar em um quadrado agora, deverá ver um alerta no seu navegador.
 
 >Nota
 >
@@ -260,7 +260,7 @@ Se clicarmos em um quadrado agora, devemos receber um alerta em nosso navegador.
 >}
 >```
 >
->Note que com `onClick = {() => alert ('click')}`, estamos passando *uma função* como prop `onClick`. Ela só é acionada após um clique. Esquecer o `() =>` e escrever somente `onClick = {alert ('click')}` é um erro comum, e dispararia o alerta toda vez que o componente fosse renderizado novamente.
+>Note que com `onClick = {() => alert ('click')}`, estamos passando *uma função* como prop `onClick`. O React só chamará essa função depois de um clique. Esquecendo `() =>` e escrevendo somente `onClick = {alert ('click')}` é um erro comum, e dispararia o alerta toda vez que o componente fosse renderizado novamente.
 
 Como próximo passo, queremos que o componente Square "lembre" que foi clicado e preencha com um "X". Para "lembrar" as coisas, os componentes usam o **estado (_state_)**.
 
@@ -294,8 +294,8 @@ class Square extends React.Component {
 Agora vamos mudar o método `render` do componente Square para exibir o valor do estado (_state_) atual quando clicado:
 
 * Substitua `this.props.value` por` this.state.value` dentro da tag `<button>`.
-* Substitua o manipulador de eventos `() => alert ()` por `() => this.setState ({value: 'X'})`.
-* Coloque `className` e` onClick` em linhas separadas para melhor legibilidade.
+* Substitua o `onClick={...}` event handler por `onClick={() => this.setState({value: 'X'})}`.
+* Coloque `className` e` onClick` props em linhas separadas para melhor legibilidade.
 
 Após estas mudanças, a tag `<button>` que é retornada pelo método `render` do Square deve se parecer com isto:
 
@@ -356,7 +356,9 @@ We may think that Board should just ask each Square for the Square's state. Alth
 
 **To collect data from multiple children, or to have two child components communicate with each other, you need to declare the shared state in their parent component instead. The parent component can pass the state back down to the children by using props; this keeps the child components in sync with each other and with the parent component.**
 
-Lifting state into a parent component is common when React components are refactored -- let's take this opportunity to try it out. We'll add a constructor to the Board and set the Board's initial state to contain an array with 9 nulls. These 9 nulls correspond to the 9 squares:
+Lifting state into a parent component is common when React components are refactored -- let's take this opportunity to try it out.
+
+Add a constructor to the Board and set the Board's initial state to contain an array of 9 nulls corresponding to the 9 squares:
 
 ```javascript{2-7}
 class Board extends React.Component {
@@ -370,35 +372,9 @@ class Board extends React.Component {
   renderSquare(i) {
     return <Square value={i} />;
   }
-
-  render() {
-    const status = 'Next player: X';
-
-    return (
-      <div>
-        <div className="status">{status}</div>
-        <div className="board-row">
-          {this.renderSquare(0)}
-          {this.renderSquare(1)}
-          {this.renderSquare(2)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(3)}
-          {this.renderSquare(4)}
-          {this.renderSquare(5)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(6)}
-          {this.renderSquare(7)}
-          {this.renderSquare(8)}
-        </div>
-      </div>
-    );
-  }
-}
 ```
 
-When we fill the board in later, the board will look something like this:
+When we fill the board in later, the `this.state.squares` array will look something like this:
 
 ```javascript
 [
@@ -432,7 +408,7 @@ Each Square will now receive a `value` prop that will either be `'X'`, `'O'`, or
 
 Next, we need to change what happens when a Square is clicked. The Board component now maintains which squares are filled. We need to create a way for the Square to update the Board's state. Since state is considered to be private to a component that defines it, we cannot update the Board's state directly from Square.
 
-To maintain the Board's state's privacy, we'll pass down a function from the Board to the Square. This function will get called when a Square is clicked. We'll change the `renderSquare` method in Board to:
+Instead, we'll pass down a function from the Board to the Square, and we'll have Square call that function when a square is clicked. We'll change the `renderSquare` method in Board to:
 
 ```javascript{5}
   renderSquare(i) {
@@ -478,11 +454,11 @@ When a Square is clicked, the `onClick` function provided by the Board is called
 2. When the button is clicked, React will call the `onClick` event handler that is defined in Square's `render()` method.
 3. This event handler calls `this.props.onClick()`. The Square's `onClick` prop was specified by the Board.
 4. Since the Board passed `onClick={() => this.handleClick(i)}` to Square, the Square calls `this.handleClick(i)` when clicked.
-5. We have not defined the `handleClick()` method yet, so our code crashes.
+5. We have not defined the `handleClick()` method yet, so our code crashes. If you click a square now, you should see a red error screen saying something like "this.handleClick is not a function".
 
 >Note
 >
->The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. We could name the Square's `onClick` prop or Board's `handleClick` method differently. In React, however, it is a convention to use `on[Event]` names for props which represent events and `handle[Event]` for the methods which handle the events.
+>The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. We could give any name to the Square's `onClick` prop or Board's `handleClick` method, and the code would work the same. In React, it's conventional to use `on[Event]` names for props which represent events and `handle[Event]` for the methods which handle the events.
 
 When we try to click a Square, we should get an error because we haven't defined `handleClick` yet. We'll now add `handleClick` to the Board class:
 
@@ -539,7 +515,7 @@ class Board extends React.Component {
 
 **[View the full code at this point](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
 
-After these changes, we're again able to click on the Squares to fill them. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.
+After these changes, we're again able to click on the Squares to fill them, the same as we had before. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.
 
 Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they're clicked. In React terms, the Square components are now **controlled components**. The Board has full control over them.
 
@@ -581,7 +557,7 @@ Detecting changes in mutable objects is difficult because they are modified dire
 
 Detecting changes in immutable objects is considerably easier. If the immutable object that is being referenced is different than the previous one, then the object has changed.
 
-#### Determining When to Re-render in React {#determining-when-to-re-render-in-react}
+#### Determining When to Re-Render in React {#determining-when-to-re-render-in-react}
 
 The main benefit of immutability is that it helps you build _pure components_ in React. Immutable data can easily determine if changes have been made which helps to determine when a component requires re-rendering.
 
@@ -611,7 +587,7 @@ Nos modificamos `this.props` para `props` nas duas vezes que ela aparece.
 
 >Nota
 >
->Quando modificamos Square para ser um componente funcional, também modificamos `onClick={() => this.props.onClick()}` para uma versão mais curta: `onClick={props.onClick}` (note a ausência dos parenteses em *ambos* os lados). Em uma classe, nós utilizamos uma arrow function para acessar o valor correto de `this`, mas para um componente funcional não precisamos nos preocupar com `this`.
+>Quando modificamos Square para ser um componente funcional, também modificamos `onClick={() => this.props.onClick()}` para uma versão mais curta: `onClick={props.onClick}` (note a ausência dos parenteses em *ambos* os lados).
 
 ### Trocando Turnos {#taking-turns}
 
@@ -643,7 +619,9 @@ Sempre que um jogador fizer uma jogada, `xIsNext` (um boolean) será trocado par
   }
 ```
 
-Com esse mudança,"X"s e "O"s podem trocar os turnos. Também vamos modificar o texto de "status" na função `render` do Board para que ela passe a exibir quem jogará o próximo turno. 
+Com esse mudança,"X"s e "O"s podem trocar os turnos. Tente!
+
+Também vamos modificar o texto de "status" na função `render` do Board para que ela passe a exibir quem jogará o próximo turno.
 
 ```javascript{2}
   render() {
@@ -714,7 +692,7 @@ class Board extends React.Component {
 
 ### Declarando um Vencedor {#declaring-a-winner}
 
-Agora que mostramos quem jogará o próximo turno, também deveríamos mostrar quando o jogo foi vencido e que não há mais turnos a serem jogados. Podemos determinar um vencedor adicionando essa função auxiliar ao final do arquivo:
+Agora que mostramos quem jogará o próximo turno, também deveríamos mostrar quando o jogo foi vencido e que não há mais turnos a serem jogados. Copie essa função auxiliar e cole-a no final do arquivo:
 
 ```javascript
 function calculateWinner(squares) {
@@ -738,6 +716,8 @@ function calculateWinner(squares) {
 }
 ```
 
+Dado um array de 9 quadrados, esta função irá verificar se há um vencedor e retornará `'X'`, `'O'` ou `null` conforme apropriado
+
 Chamaremos `calculateWinner(squares)` na função `render` do Board para checar se um jogador venceu. Caso tenha vencido, podemos mostrar um texto como "Winner: X" ou "Winner: O". Vamos substituir a declaração de `status` na função `render` com esse código:
 
 ```javascript{2-8}
@@ -777,6 +757,7 @@ Parabéns! Você agora tem um Jogo da Velha funcionando! E também acaba de apre
 ## Adicionando a Viagem no Tempo (Time Travel){#adding-time-travel}
 
 Como um último exercício, vamos tornar possível fazer uma "volta no tempo" até as jogadas anteriores que aconteceram no jogo.
+
 ### Armazenando um Histórico de Jogadas {#storing-a-history-of-moves}
 
 Se nós tivéssemos modificado o array `squares`, a implementação da volta no tempo seria muito difícil.