Explanation about React components (#24963)

The main concept about componentization in React.
This commit is contained in:
Everton Braga
2019-08-14 19:41:35 -03:00
committed by Randell Dawson
parent 2784c83782
commit 8cbc4a45b1

View File

@ -5,6 +5,60 @@ 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: