From 8cbc4a45b1446ac6a205982ecd012cd1d3460463 Mon Sep 17 00:00:00 2001
From: Everton Braga <evertonr.braga@gmail.com>
Date: Wed, 14 Aug 2019 19:41:35 -0300
Subject: [PATCH] Explanation about React components (#24963)

The main concept about componentization in React.
---
 guide/portuguese/react/components/index.md | 56 +++++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/guide/portuguese/react/components/index.md b/guide/portuguese/react/components/index.md
index d3d69d259b..f509eaa30c 100644
--- a/guide/portuguese/react/components/index.md
+++ b/guide/portuguese/react/components/index.md
@@ -5,7 +5,61 @@ localeTitle: Componentes
 # Componentes
 
 Componentes são os blocos de construção do React.
+Os componentes basicamente dividem a nossa aplicação várias outras partes menores.
+Há inúmeros benefícios nessa abordagem, tais como:
+- Maior reuso;
+- Mais organização;
+- Melhor manutenção;
+- Entre outros
+
+##Reuso
+
+A seguir vamos ver um exemplo de como funcionaria a componentização de um formulário.
+Primeiro criamos os itens dos formulários:
+
+```jsx
+class Login extends React.Component { 
+  render() { 
+    return( 
+      <input type='text' /> 
+    ); 
+  } 
+} 
+
+class Password extends React.Component { 
+  render() { 
+    return( 
+      <input type='password' /> 
+    ); 
+  } 
+} 
+
+class Button extends React.Component { 
+  render() { 
+    return( 
+      <button type='submit'>Clique aqui!</button> 
+    ); 
+  } 
+} 
+```
+Depois chamamos estes componentes-filho dentro de um componente-pai.
+
+```jsx
+class Form extends React.Component { 
+  render() { 
+    return( 
+      <div> 
+        <Login />
+        <Password />
+        <Button>
+      </div> 
+    ); 
+  } 
+ } 
+```
+
+Note que tudo está envolvido por uma `<div>`. O React só trabalha com um único retorno, sendo assim, se quisermos retornar mais de um elemento precisamos agrupá-los em uma única tag.
 
 ### Mais Informações:
 
-[Componentes e Adereços](https://reactjs.org/docs/components-and-props.html)
\ No newline at end of file
+[Componentes e Adereços](https://reactjs.org/docs/components-and-props.html)