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( + + ); + } +} + +class Password extends React.Component { + render() { + return( + + ); + } +} + +class Button extends React.Component { + render() { + return( + + ); + } +} +``` +Depois chamamos estes componentes-filho dentro de um componente-pai. + +```jsx +class Form extends React.Component { + render() { + return( +
+ + +
+ ); + } + } +``` + +Note que tudo está envolvido por uma `
`. 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)