From 0fd5aac92caec2968efd9f0d313b85c2b52d398a Mon Sep 17 00:00:00 2001
From: Eric Murta <ericmurta@hotmail.com>
Date: Sun, 17 Feb 2019 21:33:46 -0300
Subject: [PATCH 1/6] Translate jsx-in-depth to pt-BR

---
 content/docs/jsx-in-depth.md | 172 +++++++++++++++++------------------
 1 file changed, 86 insertions(+), 86 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 3dcf2ac26..60cca9dc1 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -13,31 +13,31 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
+Fundamentalmente, JSX é somente um syntatic sugar para a função `React.createElement(component, props, ...children)`. O código JSX:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
-  Click Me
+  Clique aqui
 </MyButton>
 ```
 
-compiles into:
+é compilado para:
 
 ```js
 React.createElement(
   MyButton,
   {color: 'blue', shadowSize: 2},
-  'Click Me'
+  'Clique aqui'
 )
 ```
 
-You can also use the self-closing form of the tag if there are no children. So:
+Você também pode fechar a tag imediatamente se não tiver elementos filhos. Então:
 
 ```js
 <div className="sidebar" />
 ```
 
-compiles into:
+é compilado para:
 
 ```js
 React.createElement(
@@ -47,19 +47,19 @@ React.createElement(
 )
 ```
 
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+Se você quer testar como um JSX em específico é convertido em JavaScript você pode user [o compliador online do Babel](babel://jsx-simple-example).
 
-## Specifying The React Element Type {#specifying-the-react-element-type}
+## Especificando o Tipo do Elemento React {#specifying-the-react-element-type}
 
-The first part of a JSX tag determines the type of the React element.
+A primeira parte de uma tag JSX determina o tipo do elemento React.
 
-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
+Tipos começando com letra maiúscula se referem a um componente React. Essas tags são compiladas para uma referência direta da variável nomeada, então se você usar a expressão JSX `<Foo />`, `Foo` tem que estar no escopo.
 
-### React Must Be in Scope {#react-must-be-in-scope}
+### React Tem Que Estar no Escopo{#react-must-be-in-scope}
 
-Since JSX compiles into calls to `React.createElement`, the `React` library must also always be in scope from your JSX code.
+Já que JSX compila para chamadas para `React.createElement`, a biblioteca `React` também tem sempre que estar no escopo do seu código JSX.
 
-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
+Por exemplo, os dois imports são necessários nesse código, apesar de que `React` e `CustomButton` não são referenciados diretamente pelo JavaScript:
 
 ```js{1,2,5}
 import React from 'react';
@@ -71,69 +71,69 @@ function WarningButton() {
 }
 ```
 
-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
+Se você não usa um bundler JavaScript e carrega o React de uma tag `<script>`, ele já estará no escopo global como `React`.
 
-### Using Dot Notation for JSX Type {#using-dot-notation-for-jsx-type}
+### Usando Notação Pontuada (_dot-notation_) Para Tipos JSX {#using-dot-notation-for-jsx-type}
 
-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
+Você também pode se referir a um componente React usando notação pontuada no próprio JSX. Isso é conveniente se você tem um único módulo que exporta vários componentes React. Por exemplo, se `MyComponents.DatePicker` é um componente, você pode usá-lo diretamente no JSX como:
 
 ```js{10}
 import React from 'react';
 
 const MyComponents = {
   DatePicker: function DatePicker(props) {
-    return <div>Imagine a {props.color} datepicker here.</div>;
+    return <div>Imagine um datepicker {props.color} aqui.</div>;
   }
 }
 
 function BlueDatePicker() {
-  return <MyComponents.DatePicker color="blue" />;
+  return <MyComponents.DatePicker color="azul" />;
 }
 ```
 
-### User-Defined Components Must Be Capitalized {#user-defined-components-must-be-capitalized}
+### Componentes Defindos pelo Usuário Precisam Começar com Letras Maiúsculas {#user-defined-components-must-be-capitalized}
 
-When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string `'div'` or `'span'` passed to `React.createElement`. Types that start with a capital letter like `<Foo />` compile to `React.createElement(Foo)` and correspond to a component defined or imported in your JavaScript file.
+Quando um tipo elemento começar com uma letra minúscula, ele se refere a um componente interno `<div>` ou `<span>` e resulta na string `'div'` ou `'span'` passada para `React.createElement`. Tipos que começam com letra maiúscula como `<Foo />` são compilados para `React.createElement(Foo)` e correspondem a um componente definido ou importado no seu arquivo JavaScript.
 
-We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
+Nós recomendamos nomear componentes com letras maiúsculas. Se você realmente tiver um componente que comece com letra minúscula, guarde-o em uma variável que comece com letra maiúscula antes de usá-lo no JSX.
 
-For example, this code will not run as expected:
+Por exemplo, esse código não vai rodar como esperado:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Wrong! This is a component and should have been capitalized:
+// Errado! Isso é um componente e devia começar com letra maiúscula:
 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Correto! Esse uso da <div> é legítimo porque div é uma tag HTML válida:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
+  // Errado! React pensa que <hello /> é uma tag HTML porque não começa com letra maiúscula:
   return <hello toWhat="World" />;
 }
 ```
 
-To fix this, we will rename `hello` to `Hello` and use `<Hello />` when referring to it:
+Para consertar isso, nós vamos renomear `hello` para `Hello` e usar `<Hello />` quando nos referirmos a ele::
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Correct! This is a component and should be capitalized:
+// Correto! Isso é um componente e deve começar com letra maiúscula:
 function Hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Correto! Esse uso da <div> é legítimo porque div é uma tag HTML válida:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Correct! React knows <Hello /> is a component because it's capitalized.
+  // Correto! React sabe que <Hello /> é um componente porque ele começa com letra maiúscula.
   return <Hello toWhat="World" />;
 }
 ```
 
-### Choosing the Type at Runtime {#choosing-the-type-at-runtime}
+### Escolhendo o Tipo em Tempo de Execução {#choosing-the-type-at-runtime}
 
-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
+Você não pode usar uma expressão genérica como tipo do elemento React. Se você realmente quiser usar uma expressão genérica para indicar tipo do elemento, guarde-a em uma variável que comece com letra maiúscula primeiro. Isso geralmente é usado quando você quer renderizar um componente diferente baseado em uma prop:
 
 ```js{10,11}
 import React from 'react';
@@ -145,12 +145,12 @@ const components = {
 };
 
 function Story(props) {
-  // Wrong! JSX type can't be an expression.
+  // Errado! O tipo JSX type não pode ser uma expressão.
   return <components[props.storyType] story={props.story} />;
 }
 ```
 
-To fix this, we will assign the type to a capitalized variable first:
+Para consertar isso, nós vamos guardar o tipo em uma variável começando com letra maiúscula primeiro:
 
 ```js{10-12}
 import React from 'react';
@@ -162,45 +162,45 @@ const components = {
 };
 
 function Story(props) {
-  // Correct! JSX type can be a capitalized variable.
+  // Correcto! O tipo JSX pode ser uma varíavel começando com letra maiúscula.
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }
 ```
 
-## Props in JSX {#props-in-jsx}
+## Props no JSX {#props-in-jsx}
 
-There are several different ways to specify props in JSX.
+Existem várias maneiras de especificar uma prop em JSX.
 
-### JavaScript Expressions as Props {#javascript-expressions-as-props}
+### Expressões JavaScript como prop {#javascript-expressions-as-props}
 
-You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX:
+Você pode passar qualquer expressão JavaScript como prop, colocando ela em volta de `{}`. Por exemplo, nesse JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-For `MyComponent`, the value of `props.foo` will be `10` because the expression `1 + 2 + 3 + 4` gets evaluated.
+Para `MyComponent`, o valor de `props.foo` será `10` porque a expressão `1 + 2 + 3 + 4` é avaliada.
 
-`if` statements and `for` loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:
+Declarações `if` e loops `for` não são expressões em JavaScript, então elas não podem ser usadas no JSX diretamente. Ao invés disso, você pode coloca-las no código ao redor. Por exemplo:
 
 ```js{3-7}
 function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
-    description = <strong>even</strong>;
+    description = <strong>par</strong>;
   } else {
-    description = <i>odd</i>;
+    description = <i>ímpar</i>;
   }
-  return <div>{props.number} is an {description} number</div>;
+  return <div>{props.number} é um número {description} </div>;
 }
 ```
 
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
+Você pode aprender mais sobre [renderização condicional](/docs/conditional-rendering.html) e [loops](/docs/lists-and-keys.html) nas seções correspondentes.
 
-### String Literals {#string-literals}
+### Strings Literais {#string-literals}
 
-You can pass a string literal as a prop. These two JSX expressions are equivalent:
+Você pode passar uma string literal como uma prop. Essas duas expressões JSX são equivalentes:
 
 ```js
 <MyComponent message="hello world" />
@@ -208,7 +208,7 @@ You can pass a string literal as a prop. These two JSX expressions are equivalen
 <MyComponent message={'hello world'} />
 ```
 
-When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
+Quando você passa uma string literals, seu valor é um HTML não escapado. Então essas duas expressões são equivalentes:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,11 +216,11 @@ When you pass a string literal, its value is HTML-unescaped. So these two JSX ex
 <MyComponent message={'<3'} />
 ```
 
-This behavior is usually not relevant. It's only mentioned here for completeness.
+O comportamento geralmente não é relevante. Ele só é mencionado aqui pela completude.
 
-### Props Default to "True" {#props-default-to-true}
+### Props com Valor Padrão "True" {#props-default-to-true}
 
-If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
+Se você não passar nenhum valor para a prop, seu valor padrão será `true`. Essas duas expressões JSX são equivalentes:
 
 ```js
 <MyTextBox autocomplete />
@@ -228,11 +228,11 @@ If you pass no value for a prop, it defaults to `true`. These two JSX expression
 <MyTextBox autocomplete={true} />
 ```
 
-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
+No geral, nós não recomendamos seu uso porque pode ser confundido com [abreviação de objeto do ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` que é a abreviação de `{foo: foo}` em vez de `{foo: true}`. Esse comportamente só está ai para estar de acordo com o comportamento do HTML.
 
-### Spread Attributes {#spread-attributes}
+### Atributos com Spread {#spread-attributes}
 
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
+Se você já tiver `props` como um objeto, e você quer passá-la no JSX, você pode usar  `...` como um operador "spread" para passar todo o objeto props. Esses dois componentes são equivalentes:
 
 ```js{7}
 function App1() {
@@ -245,7 +245,7 @@ function App2() {
 }
 ```
 
-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+Você também pode escolher props específicas que seu componente irá consumir enquanto passa todas as outras props usando o operador spread.
 
 ```js{2}
 const Button = props => {
@@ -265,30 +265,30 @@ const App = () => {
 };
 ```
 
-In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
-All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.
+No exemplo acima, a prop `kind` é consumida em segurança *e não* é passada para o elemento `<button>` no DOM.
+Todas as outras props são passadas pelo objeto `...other` tornando esse componente bastante flexível. Você pode ver que ele passa as props `onClick` e `children`.
 
-Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.  
+Atributos spread podem ser utéis mas eles faciltam a passagem de props desnecessárias para componentes que não precisar delas ou a passagem de atributos HTML inválidos para o DOM. Nós recomendamos usá-lo com moderação.  
 
-## Children in JSX {#children-in-jsx}
+## Elementos Filhos em JSX {#children-in-jsx}
 
-In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
+Nas expressões JSX que contêm tags para abrir e tags para fechar, o contéudo entre essas tags é passado na forma de uma prop especial `props.children`. Existem diversas formas diferentes de passar essa prop children:
 
-### String Literals {#string-literals-1}
+### Strings Literais {#string-literals-1}
 
-You can put a string between the opening and closing tags and `props.children` will just be that string. This is useful for many of the built-in HTML elements. For example:
+Você pode por uma string entre tags que abrem e tags que fecham e `props.children` será essa string. Isso é útil para vários dos elementos HTML internos. Por exemplo:
 
 ```js
 <MyComponent>Hello world!</MyComponent>
 ```
 
-This is valid JSX, and `props.children` in `MyComponent` will simply be the string `"Hello world!"`. HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:
+Esse é um JSX válido, e `props.children` em `MyComponent` será a string `"Hello world!"`. O HTML não é escapado, então você pode escrever JSX da mesma maneira que você escreveria HTML:
 
 ```html
-<div>This is valid HTML &amp; JSX at the same time.</div>
+<div>Esse é um HTML válido &amp; e JSX ao mesmo tempo.</div>
 ```
 
-JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:
+O JSX remove espaços em branco no início e no final da linha. Ele também remove linhas vazias. Linhas novas adjacentes a tags são removidas; novas linhas que ocorrem no meio de uma strnig literal são condensadas em um único espaço. Então todos esses são renderizados da mesma forma:
 
 ```js
 <div>Hello World</div>
@@ -308,9 +308,9 @@ JSX removes whitespace at the beginning and ending of a line. It also removes bl
 </div>
 ```
 
-### JSX Children {#jsx-children}
+### Elemento Filhos JSX {#jsx-children}
 
-You can provide more JSX elements as the children. This is useful for displaying nested components:
+Você pode fornecer mais elementos JSX como elementos filhos. Isso é útil para exibir componentes aninhados:
 
 ```js
 <MyContainer>
@@ -319,11 +319,11 @@ You can provide more JSX elements as the children. This is useful for displaying
 </MyContainer>
 ```
 
-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
+Você pode misturar elementos filhos de tipos diferentes, então você pode usar string literais com elementos filhos JSX. Essa é outra forma em que o JSX é como o HTML, então isso é ao mesmo tempo um HTML e um JSX válido:
 
 ```html
 <div>
-  Here is a list:
+  Aqui está uma lista:
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
@@ -331,11 +331,11 @@ You can mix together different types of children, so you can use string literals
 </div>
 ```
 
-A React component can also return an array of elements:
+Um componente React pode retornar um array de elementos:
 
 ```js
 render() {
-  // No need to wrap list items in an extra element!
+  // Não há necessidade de envolver uma lista de itens em um elemento extra!
   return [
     // Don't forget the keys :)
     <li key="A">First item</li>,
@@ -345,9 +345,9 @@ render() {
 }
 ```
 
-### JavaScript Expressions as Children {#javascript-expressions-as-children}
+### Expressões Javascript como Elementos Filhos {#javascript-expressions-as-children}
 
-You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent:
+Você pode passar expressões JavaScript como elementos filhos, envolvendo elas com `{}`. Por exemplo, essas expressões são equivalentes:
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -355,7 +355,7 @@ You can pass any JavaScript expression as children, by enclosing it within `{}`.
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
+Isso é geralmente útil para renderizar uma lista de expressões JSX de um tamanho arbitrário. Por exemplo, isso renderiza uma lista HTML:
 
 ```js{2,9}
 function Item(props) {
@@ -372,7 +372,7 @@ function TodoList() {
 }
 ```
 
-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
+Expressões JavaScript podem ser misturadas com outros tipos de elementos filhos. Isso é geralmente útil para templates de string:
 
 ```js{2}
 function Hello(props) {
@@ -380,12 +380,12 @@ function Hello(props) {
 }
 ```
 
-### Functions as Children {#functions-as-children}
+### Funções como Elementos Filhos {#functions-as-children}
 
-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
+Normalmente, expressões JavaScript inseridas no JSX vão ser avaliadas em uma string, um elemento React, ou uma lista dessas coisas. No entando, `props.children` funciona como qualquer outra prop podendo passar qualquer tipo de dado, não somente os tipos que o React sabe renderizar. Por exemplo, se você tem um componente customizado, você pode fazê-lo receber um callback na forma de um `props.children`:
 
 ```js{4,13}
-// Calls the children callback numTimes to produce a repeated component
+// Chama o callback do elemento filho numTimes para produzir um componente repetido
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {
@@ -397,17 +397,17 @@ function Repeat(props) {
 function ListOfTenThings() {
   return (
     <Repeat numTimes={10}>
-      {(index) => <div key={index}>This is item {index} in the list</div>}
+      {(index) => <div key={index}>Esse é o item {index} na lista </div>}
     </Repeat>
   );
 }
 ```
 
-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
+Elementos filhos passados a um componente customizado podem ser qualquer coisa, contato que aquele componente transforme-os em algo que o React possa entender antes de renderiza-lo. Esse tipo de uso não é comum, mas funciona se você quiser extender o que o JSX é capaz.
 
-### Booleans, Null, and Undefined Are Ignored {#booleans-null-and-undefined-are-ignored}
+### Booleans, Null, e Undefined são Ignorados {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
+`false`, `null`, `undefined`, e `true` são elementos filhos válidos. Eles somente não renderizam. Essas expressões JSX vão todas renderizar da mesma forma::
 
 ```js
 <div />
@@ -423,7 +423,7 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```
 
-This can be useful to conditionally render React elements. This JSX only renders a `<Header />` if `showHeader` is `true`:
+Isso pode ser útil para renderizar condicionalmente elementos React. Esse JSX só renderiza um `<Header />` se `showHeader` for `true`:
 
 ```js{2}
 <div>
@@ -432,7 +432,7 @@ This can be useful to conditionally render React elements. This JSX only renders
 </div>
 ```
 
-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+Um problema é que alguns [valores "falsy"](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), como o número `0`, ainda são renderizados pelo React. Por exemplo, esse código não vai se comportar como você espera porque `0` será printado quando `props.messages` for um array vazio:
 
 ```js{2}
 <div>
@@ -442,7 +442,7 @@ One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/doc
 </div>
 ```
 
-To fix this, make sure that the expression before `&&` is always boolean:
+Para consertar isso, tenha certeza de que a expressão antes do `&&` é sempre booleana:
 
 ```js{2}
 <div>
@@ -452,10 +452,10 @@ To fix this, make sure that the expression before `&&` is always boolean:
 </div>
 ```
 
-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
+De modo inverso, se você quer que um valor como `false`, `true`, `null`, ou `undefined` apareça na saída, você tem que [convertê-lo para uma string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) primeiro:
 
 ```js{2}
 <div>
-  My JavaScript variable is {String(myVariable)}.
+  Minha variável JavaScript é {String(myVariable)}.
 </div>
 ```

From a0c223e89d24fa72a48b9eba5b130a7bb596a414 Mon Sep 17 00:00:00 2001
From: Eric Murta <ericmurta@hotmail.com>
Date: Mon, 18 Feb 2019 21:19:04 -0300
Subject: [PATCH 2/6] Apply suggestions from code review

Co-Authored-By: murtinha <ericmurta@hotmail.com>
---
 content/docs/jsx-in-depth.md | 44 ++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 60cca9dc1..bb8a89fe6 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -47,7 +47,7 @@ React.createElement(
 )
 ```
 
-Se você quer testar como um JSX em específico é convertido em JavaScript você pode user [o compliador online do Babel](babel://jsx-simple-example).
+Se você quer testar como um JSX em específico é convertido em JavaScript você pode user [o compilador online do Babel](babel://jsx-simple-example).
 
 ## Especificando o Tipo do Elemento React {#specifying-the-react-element-type}
 
@@ -55,9 +55,9 @@ A primeira parte de uma tag JSX determina o tipo do elemento React.
 
 Tipos começando com letra maiúscula se referem a um componente React. Essas tags são compiladas para uma referência direta da variável nomeada, então se você usar a expressão JSX `<Foo />`, `Foo` tem que estar no escopo.
 
-### React Tem Que Estar no Escopo{#react-must-be-in-scope}
+### O React Tem Que Estar no Escopo{#react-must-be-in-scope}
 
-Já que JSX compila para chamadas para `React.createElement`, a biblioteca `React` também tem sempre que estar no escopo do seu código JSX.
+Já que JSX compila em chamadas para `React.createElement`, a biblioteca `React` também tem sempre que estar no escopo do seu código JSX.
 
 Por exemplo, os dois imports são necessários nesse código, apesar de que `React` e `CustomButton` não são referenciados diretamente pelo JavaScript:
 
@@ -73,7 +73,7 @@ function WarningButton() {
 
 Se você não usa um bundler JavaScript e carrega o React de uma tag `<script>`, ele já estará no escopo global como `React`.
 
-### Usando Notação Pontuada (_dot-notation_) Para Tipos JSX {#using-dot-notation-for-jsx-type}
+### Usando Notação Pontuada (_Dot Notation_) Para Tipos JSX {#using-dot-notation-for-jsx-type}
 
 Você também pode se referir a um componente React usando notação pontuada no próprio JSX. Isso é conveniente se você tem um único módulo que exporta vários componentes React. Por exemplo, se `MyComponents.DatePicker` é um componente, você pode usá-lo diretamente no JSX como:
 
@@ -87,7 +87,7 @@ const MyComponents = {
 }
 
 function BlueDatePicker() {
-  return <MyComponents.DatePicker color="azul" />;
+  return <MyComponents.DatePicker color="blue" />;
 }
 ```
 
@@ -109,12 +109,12 @@ function hello(props) {
 }
 
 function HelloWorld() {
-  // Errado! React pensa que <hello /> é uma tag HTML porque não começa com letra maiúscula:
+  // Errado! O React pensa que <hello /> é uma tag HTML porque não começa com letra maiúscula:
   return <hello toWhat="World" />;
 }
 ```
 
-Para consertar isso, nós vamos renomear `hello` para `Hello` e usar `<Hello />` quando nos referirmos a ele::
+Para consertar isso, nós vamos renomear `hello` para `Hello` e usar `<Hello />` quando nos referirmos a ele:
 
 ```js{3,4,10,11}
 import React from 'react';
@@ -126,7 +126,7 @@ function Hello(props) {
 }
 
 function HelloWorld() {
-  // Correto! React sabe que <Hello /> é um componente porque ele começa com letra maiúscula.
+  // Correto! O React sabe que <Hello /> é um componente porque ele começa com letra maiúscula.
   return <Hello toWhat="World" />;
 }
 ```
@@ -145,7 +145,7 @@ const components = {
 };
 
 function Story(props) {
-  // Errado! O tipo JSX type não pode ser uma expressão.
+  // Errado! O tipo do JSX não pode ser uma expressão.
   return <components[props.storyType] story={props.story} />;
 }
 ```
@@ -162,7 +162,7 @@ const components = {
 };
 
 function Story(props) {
-  // Correcto! O tipo JSX pode ser uma varíavel começando com letra maiúscula.
+  // Correto! O tipo JSX pode ser uma variável começando com letra maiúscula.
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }
@@ -172,7 +172,7 @@ function Story(props) {
 
 Existem várias maneiras de especificar uma prop em JSX.
 
-### Expressões JavaScript como prop {#javascript-expressions-as-props}
+### Expressões JavaScript como Props {#javascript-expressions-as-props}
 
 Você pode passar qualquer expressão JavaScript como prop, colocando ela em volta de `{}`. Por exemplo, nesse JSX:
 
@@ -180,19 +180,19 @@ Você pode passar qualquer expressão JavaScript como prop, colocando ela em vol
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-Para `MyComponent`, o valor de `props.foo` será `10` porque a expressão `1 + 2 + 3 + 4` é avaliada.
+Para `MyComponent`, o valor de `props.foo` será `10` porque a expressão `1 + 2 + 3 + 4` é calculada.
 
-Declarações `if` e loops `for` não são expressões em JavaScript, então elas não podem ser usadas no JSX diretamente. Ao invés disso, você pode coloca-las no código ao redor. Por exemplo:
+Declarações `if` e loops `for` não são expressões em JavaScript, então elas não podem ser usadas no JSX diretamente. Ao invés disso, você pode colocá-las no código ao redor. Por exemplo:
 
 ```js{3-7}
 function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
-    description = <strong>par</strong>;
+    description = <strong>even</strong>;
   } else {
-    description = <i>ímpar</i>;
+    description = <i>odd</i>;
   }
-  return <div>{props.number} é um número {description} </div>;
+  return <div>{props.number} is an {description} number</div>;
 }
 ```
 
@@ -232,7 +232,7 @@ No geral, nós não recomendamos seu uso porque pode ser confundido com [abrevia
 
 ### Atributos com Spread {#spread-attributes}
 
-Se você já tiver `props` como um objeto, e você quer passá-la no JSX, você pode usar  `...` como um operador "spread" para passar todo o objeto props. Esses dois componentes são equivalentes:
+Se você já tiver `props` como um objeto, e você quer passá-la no JSX, você pode usar `...` como um operador "spread" para passar todo o objeto props. Esses dois componentes são equivalentes:
 
 ```js{7}
 function App1() {
@@ -268,11 +268,11 @@ const App = () => {
 No exemplo acima, a prop `kind` é consumida em segurança *e não* é passada para o elemento `<button>` no DOM.
 Todas as outras props são passadas pelo objeto `...other` tornando esse componente bastante flexível. Você pode ver que ele passa as props `onClick` e `children`.
 
-Atributos spread podem ser utéis mas eles faciltam a passagem de props desnecessárias para componentes que não precisar delas ou a passagem de atributos HTML inválidos para o DOM. Nós recomendamos usá-lo com moderação.  
+Atributos spread podem ser úteis mas eles facilitam a passagem de props desnecessárias para componentes que não precisam delas ou a passagem de atributos HTML inválidos para o DOM. Nós recomendamos usá-lo com moderação.  
 
 ## Elementos Filhos em JSX {#children-in-jsx}
 
-Nas expressões JSX que contêm tags para abrir e tags para fechar, o contéudo entre essas tags é passado na forma de uma prop especial `props.children`. Existem diversas formas diferentes de passar essa prop children:
+Nas expressões JSX que contêm tags para abrir e tags para fechar, o conteúdo entre essas tags é passado na forma de uma prop especial `props.children`. Existem diversas formas diferentes de passar essa prop children:
 
 ### Strings Literais {#string-literals-1}
 
@@ -288,7 +288,7 @@ Esse é um JSX válido, e `props.children` em `MyComponent` será a string `"Hel
 <div>Esse é um HTML válido &amp; e JSX ao mesmo tempo.</div>
 ```
 
-O JSX remove espaços em branco no início e no final da linha. Ele também remove linhas vazias. Linhas novas adjacentes a tags são removidas; novas linhas que ocorrem no meio de uma strnig literal são condensadas em um único espaço. Então todos esses são renderizados da mesma forma:
+O JSX remove espaços em branco no início e no final da linha. Ele também remove linhas vazias. Linhas novas adjacentes a tags são removidas; novas linhas que ocorrem no meio de uma string literal são condensadas em um único espaço. Então todos esses são renderizados da mesma forma:
 
 ```js
 <div>Hello World</div>
@@ -337,7 +337,7 @@ Um componente React pode retornar um array de elementos:
 render() {
   // Não há necessidade de envolver uma lista de itens em um elemento extra!
   return [
-    // Don't forget the keys :)
+    // Não esqueça das keys :)
     <li key="A">First item</li>,
     <li key="B">Second item</li>,
     <li key="C">Third item</li>,
@@ -403,7 +403,7 @@ function ListOfTenThings() {
 }
 ```
 
-Elementos filhos passados a um componente customizado podem ser qualquer coisa, contato que aquele componente transforme-os em algo que o React possa entender antes de renderiza-lo. Esse tipo de uso não é comum, mas funciona se você quiser extender o que o JSX é capaz.
+Elementos filhos passados a um componente customizado podem ser qualquer coisa, contanto que aquele componente transforme-os em algo que o React possa entender antes de renderizá-lo. Esse tipo de uso não é comum, mas funciona se você quiser estender o que o JSX é capaz.
 
 ### Booleans, Null, e Undefined são Ignorados {#booleans-null-and-undefined-are-ignored}
 

From ab255200f6fdef6bfd68f5a1b630f41b7f2b6cf1 Mon Sep 17 00:00:00 2001
From: Eric Murta <ericmurta@hotmail.com>
Date: Mon, 18 Feb 2019 21:33:35 -0300
Subject: [PATCH 3/6] Some small translation changes

---
 content/docs/jsx-in-depth.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index bb8a89fe6..6cfcec8dc 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -13,7 +13,7 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fundamentalmente, JSX é somente um syntatic sugar para a função `React.createElement(component, props, ...children)`. O código JSX:
+Fundamentalmente, JSX é somente um açúcar sintático (syntatic sugar) para a função `React.createElement(component, props, ...children)`. O código JSX:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
@@ -198,7 +198,7 @@ function NumberDescriber(props) {
 
 Você pode aprender mais sobre [renderização condicional](/docs/conditional-rendering.html) e [loops](/docs/lists-and-keys.html) nas seções correspondentes.
 
-### Strings Literais {#string-literals}
+### String Literals {#string-literals}
 
 Você pode passar uma string literal como uma prop. Essas duas expressões JSX são equivalentes:
 
@@ -274,7 +274,7 @@ Atributos spread podem ser úteis mas eles facilitam a passagem de props desnece
 
 Nas expressões JSX que contêm tags para abrir e tags para fechar, o conteúdo entre essas tags é passado na forma de uma prop especial `props.children`. Existem diversas formas diferentes de passar essa prop children:
 
-### Strings Literais {#string-literals-1}
+### String Literals {#string-literals-1}
 
 Você pode por uma string entre tags que abrem e tags que fecham e `props.children` será essa string. Isso é útil para vários dos elementos HTML internos. Por exemplo:
 
@@ -319,7 +319,7 @@ Você pode fornecer mais elementos JSX como elementos filhos. Isso é útil para
 </MyContainer>
 ```
 
-Você pode misturar elementos filhos de tipos diferentes, então você pode usar string literais com elementos filhos JSX. Essa é outra forma em que o JSX é como o HTML, então isso é ao mesmo tempo um HTML e um JSX válido:
+Você pode misturar elementos filhos de tipos diferentes, então você pode usar string literals com elementos filhos JSX. Essa é outra forma em que o JSX é como o HTML, então isso é ao mesmo tempo um HTML e um JSX válido:
 
 ```html
 <div>

From f804a639954ee05bf51cd42189b18cfd0d3df20f Mon Sep 17 00:00:00 2001
From: Halian Vilela <halianlian@gmail.com>
Date: Mon, 25 Feb 2019 22:26:20 -0300
Subject: [PATCH 4/6] Update content/docs/jsx-in-depth.md

Co-Authored-By: murtinha <ericmurta@hotmail.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 6cfcec8dc..c802b69cd 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -13,7 +13,7 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fundamentalmente, JSX é somente um açúcar sintático (syntatic sugar) para a função `React.createElement(component, props, ...children)`. O código JSX:
+Fundamentalmente, JSX é somente um açúcar sintático (syntactic sugar) para a função `React.createElement(component, props, ...children)`. O código JSX:
 
 ```js
 <MyButton color="blue" shadowSize={2}>

From a289fadc3819aa0b1991bde842b4a594a1065ba9 Mon Sep 17 00:00:00 2001
From: Glaucia Lemos <glaucia_lemos86@hotmail.com>
Date: Fri, 8 Mar 2019 09:06:50 -0300
Subject: [PATCH 5/6] Update content/docs/jsx-in-depth.md

Co-Authored-By: murtinha <ericmurta@hotmail.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index c802b69cd..cb40ff2b3 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -47,7 +47,7 @@ React.createElement(
 )
 ```
 
-Se você quer testar como um JSX em específico é convertido em JavaScript você pode user [o compilador online do Babel](babel://jsx-simple-example).
+Se você quiser testar como um JSX em específico é convertido em JavaScript, você pode usar [o compilador online do Babel](babel://jsx-simple-example).
 
 ## Especificando o Tipo do Elemento React {#specifying-the-react-element-type}
 

From ec6acee7296816c85accac6e3982af32f0684cae Mon Sep 17 00:00:00 2001
From: Eric Murta <ericmurta@hotmail.com>
Date: Fri, 8 Mar 2019 09:10:43 -0300
Subject: [PATCH 6/6] Apply suggestions from code review

Co-Authored-By: murtinha <ericmurta@hotmail.com>
---
 content/docs/jsx-in-depth.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index cb40ff2b3..8b452cf4e 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -53,7 +53,7 @@ Se você quiser testar como um JSX em específico é convertido em JavaScript, v
 
 A primeira parte de uma tag JSX determina o tipo do elemento React.
 
-Tipos começando com letra maiúscula se referem a um componente React. Essas tags são compiladas para uma referência direta da variável nomeada, então se você usar a expressão JSX `<Foo />`, `Foo` tem que estar no escopo.
+Tipos que começam com letra maiúscula se referem a um componente React. Essas tags são compiladas para uma referência direta da variável nomeada, então se você usar a expressão JSX `<Foo />`, `Foo` tem que estar no escopo.
 
 ### O React Tem Que Estar no Escopo{#react-must-be-in-scope}
 
@@ -208,7 +208,7 @@ Você pode passar uma string literal como uma prop. Essas duas expressões JSX s
 <MyComponent message={'hello world'} />
 ```
 
-Quando você passa uma string literals, seu valor é um HTML não escapado. Então essas duas expressões são equivalentes:
+Quando você passa uma string literal, seu valor é um HTML não escapado. Então essas duas expressões são equivalentes:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,7 +216,7 @@ Quando você passa uma string literals, seu valor é um HTML não escapado. Ent
 <MyComponent message={'<3'} />
 ```
 
-O comportamento geralmente não é relevante. Ele só é mencionado aqui pela completude.
+O comportamento geralmente não é relevante. Ele só é mencionado aqui pela integridade.
 
 ### Props com Valor Padrão "True" {#props-default-to-true}
 
@@ -232,7 +232,7 @@ No geral, nós não recomendamos seu uso porque pode ser confundido com [abrevia
 
 ### Atributos com Spread {#spread-attributes}
 
-Se você já tiver `props` como um objeto, e você quer passá-la no JSX, você pode usar `...` como um operador "spread" para passar todo o objeto props. Esses dois componentes são equivalentes:
+Se você já tiver `props` como um objeto e quiser passar em JSX, você pode usar `...` como um operador "spread" para passar todo o objeto props. Esses dois componentes são equivalentes:
 
 ```js{7}
 function App1() {
@@ -282,7 +282,7 @@ Você pode por uma string entre tags que abrem e tags que fecham e `props.childr
 <MyComponent>Hello world!</MyComponent>
 ```
 
-Esse é um JSX válido, e `props.children` em `MyComponent` será a string `"Hello world!"`. O HTML não é escapado, então você pode escrever JSX da mesma maneira que você escreveria HTML:
+Esse é um JSX válido e `props.children` em `MyComponent` será a string `"Hello world!"`. O HTML não é escapado, então você pode escrever JSX da mesma maneira que você escreveria HTML:
 
 ```html
 <div>Esse é um HTML válido &amp; e JSX ao mesmo tempo.</div>
@@ -319,7 +319,7 @@ Você pode fornecer mais elementos JSX como elementos filhos. Isso é útil para
 </MyContainer>
 ```
 
-Você pode misturar elementos filhos de tipos diferentes, então você pode usar string literals com elementos filhos JSX. Essa é outra forma em que o JSX é como o HTML, então isso é ao mesmo tempo um HTML e um JSX válido:
+Você pode misturar elementos filhos de tipos diferentes, assim você pode usar string literals com elementos filhos JSX. Essa é outra forma em que o JSX é como o HTML, então isso é ao mesmo tempo um HTML e um JSX válido:
 
 ```html
 <div>
@@ -382,7 +382,7 @@ function Hello(props) {
 
 ### Funções como Elementos Filhos {#functions-as-children}
 
-Normalmente, expressões JavaScript inseridas no JSX vão ser avaliadas em uma string, um elemento React, ou uma lista dessas coisas. No entando, `props.children` funciona como qualquer outra prop podendo passar qualquer tipo de dado, não somente os tipos que o React sabe renderizar. Por exemplo, se você tem um componente customizado, você pode fazê-lo receber um callback na forma de um `props.children`:
+Normalmente, expressões JavaScript inseridas no JSX vão ser avaliadas em uma string, um elemento React ou uma lista dessas coisas. No entando, `props.children` funciona como qualquer outra prop podendo passar qualquer tipo de dado, não somente os tipos que o React sabe renderizar. Por exemplo, se você tem um componente customizado, você pode fazê-lo receber um callback na forma de um `props.children`:
 
 ```js{4,13}
 // Chama o callback do elemento filho numTimes para produzir um componente repetido