Merge branch 'composition-vs-inheritance' of https://github.com/welll…

…/pt-BR.reactjs.org into composition-vs-inheritance

content/docs/composition-vs-inheritance.md

@@ -8,15 +8,15 @@ prev: lifting-state-up.html
 next: thinking-in-react.html
 ---
 
-O React tem um poderoso modelo de composição, e recomendamos o uso de composição ao invés de herança para reutilizar código entre componentes.
+O React tem um poderoso modelo de composição, e por isso recomendamos o uso de composição ao invés de herança para reutilizar código entre componentes.
 
-Nesta seção, iremos demonstrar alguns problemas encontrados pelos desenvolvedores que estão iniciando com o React e esbarram em situações com herança, e iremos mostrar como podemos resolver utilizando composição.
+Nesta seção, iremos demonstrar alguns problemas encontrados pelos desenvolvedores que estão iniciando com o React e esbarram em situações com herança, e mostraremos como podemos resolver utilizando composição.
 
 ## Contenção {#containment}
 
-Alguns componentes desconhecem seus elementos filhos antes do tempo. Isso é muito comum para componentes como por exemplo `SideBar` ou `Dialog` que representam "caixas" genéricas.
+Alguns componentes não tem como saber quem serão seus elementos filhos. Isso é muito comum para componentes como o `SideBar` ou `Dialog` que representam "caixas" genéricas.
 
-Nós recomendamos que esses componentes utilizem a prop especial `children` para passar os elementos filhos diretos para sua respectiva saída:
+Recomendamos que esses componentes utilizem a prop especial `children` para passar os elementos filhos diretos para sua respectiva saída:
 ```js{4}
 function FancyBorder(props) {
   return (
@@ -27,13 +27,13 @@ function FancyBorder(props) {
 }
 ```
 
-Isso vai permitir outros componentes passar elementos filhos no próprio JSX:
+Isso permite outros componentes passar elementos filhos no próprio JSX:
 ```js{4-9}
 function WelcomeDialog() {
   return (
     <FancyBorder color="blue">
       <h1 className="Dialog-title">
-        Bem vindo
+        Bem-vindo
       </h1>
       <p className="Dialog-message">
         Obrigado por visitar a nossa espaçonave!
@@ -46,7 +46,7 @@ function WelcomeDialog() {
 **[Experimente no CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
 Qualquer conteúdo dentro da tag JSX do componente `<FancyBorder>` vai ser passado ao componente `FancyBorder` como prop `children`. Desde que `FancyBorder` renderize a `{props.children}` dentro de uma `<div>`, os elementos serão renderizados no resultado final.
 
-Mesmo que menos comum, as vezes pode ser que você precise de diversos "espaços" no componente. Em alguns casos você pode criar sua própria convenção ao invés de utilizar `children`:
+Mesmo que seja incomum, as vezes pode ser que você precise de diversos "buracos" no componente. Em alguns casos você pode criar sua própria convenção e não utilizar a prop `children`:
 
 ```js{5,8,18,21}
 function SplitPane(props) {
@@ -81,9 +81,9 @@ Os elementos React como `<Contacts/>` e `<Chat/>` são apenas objetos, e você p
 
 ## Especialização {#specialization}
 
-Algumas vezes acabamos pensando em componentes como "casos especiais" de outros componentes, por exemplos, podemos dizer que o component `WelcomeDialog` é um caso especial de `Dialog`. 
+Algumas vezes acabamos pensando em componentes como "casos especiais" de outros componentes, por exemplo, podemos dizer que o component `WelcomeDialog` é um caso especial de `Dialog`. 
 
-No React, isto também pode ser obtido através da composição, um componente específico renderiza um componente mais "genérico" e o configura com suas respectivas props:
+No React, isto também pode ser obtido através do uso de composição, um componente específico renderiza um componente mais "genérico" e o configura com as suas respectivas props:
 
 
 ```js{5,8,16-18}
@@ -103,15 +103,15 @@ function Dialog(props) {
 function WelcomeDialog() {
   return (
     <Dialog
-      title="Bem Vindo"
+      title="Bem-vindo"
       message="Obrigado por visitar a nossa espaçonave!" />
   );
 }
 ```
 
 [**Experimente no CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
 
-Composição também irá funcionar para componentes escritos utilizando classe:
+A composição também irá funcionar para componentes escritos utilizando classe:
 
 ```js{10,27-31}
 function Dialog(props) {
@@ -154,17 +154,17 @@ class SignUpDialog extends React.Component {
   }
 
   handleSignUp() {
-    alert(`Welcome aboard, ${this.state.login}!`);
+    alert(`Bem-vindo a bordo, ${this.state.login}!`);
   }
 }
 ```
 
 [**Experimente no CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
 
-## E sobre herança? {#so-what-about-inheritance}
+## E sobre a herança? {#so-what-about-inheritance}
 
 No Facebook, nós usamos o React em milhares de componentes, e não encontramos nenhum caso que recomendaríamos criar componentes utilizando hierarquia de herança.
 
-O uso de props e composição irá te dar toda flexibilidade que você precisa para customizar o comportamento e aparência dos componentes, de uma maneira explícita e segura. Lembre-se que que os componentes podem aceitar um número variável de props, incluindo valores primitivos, como int, array, boolean; assim como elementos Reacts e funções.
+O uso de props e composição irá te dar toda flexibilidade que você precisa para customizar o comportamento e aparência dos componentes, de uma maneira explícita e segura. Lembre-se de que os componentes podem aceitar um número variável de props, incluindo valores primitivos, como int, array, boolean; assim como elementos Reacts e funções.
 
 E se você desejar reutilizar funcionalidades (não gráficas) entre componentes, sugerimos que você a extraia em módulos JavaScript. Os componentes podem importar essa função, objeto ou classe sem precisar estender.