Explanation about React components (#24963)
The main concept about componentization in React.
This commit is contained in:
committed by
Randell Dawson
parent
2784c83782
commit
8cbc4a45b1
@ -5,6 +5,60 @@ localeTitle: Componentes
|
|||||||
# Componentes
|
# Componentes
|
||||||
|
|
||||||
Componentes são os blocos de construção do React.
|
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:
|
### Mais Informações:
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user