react_componentes

#Componente - React

Componente React é semelhante as tags no HTML. E o componente é uma função tradicional do JS.

## Criando um novo componente:
```
<CapsLock/> -> irá deixar todo o texto em caixa alta.

<CapsLock texto="Me deixe em Caps Lock por favor"/>

 function CapsLock() {
	dentro da nova tag
}
```
A forma que a funcionalidade do componente consegue receber os valores que estão fora é através dos parâmetros da função ex: (texto="Me deixe em Caps Lock por favor").

-> props : acessa todas as propriedades.

```
	<CapsLock texto="Me deixe em Caps Lock por favor"/>

function CapsLock(props) {
	const textoInserido = props.texto // Me deixe em Caps Lock por favor
	const textoEmCapsLock = textoInserido.toUpperCase()
	return <div>{textoEmCapsLock}</div>
}
```

## Acessar uma propriedade Children de um componente:

No HTML quando um texto está envolvido por tags, ele possui um certo grau de parentesco com essa tag, ex:
```
	<strong>Texto em negrito</strong>  = o texto inserido possui parentesco com a tag : children
```

O mesmo o acontece aqui:
```
	<div> - parent (pai)
		<h3></h3>
		<p></p>     - children (filhos)
	</div>
```

Para acessar o texto (o children) da tag:
```
function CapsLock(props) {
	const textoInserido = props.children
	const textoEmCapsLock = textoInserido.toUpperCase()
	return <div>{textoEmCapsLock}</div>
}
	<CapsLock>texto em caixa alta</CapsLock> // TEXTO EM CAIXA ALTA
```

STATE -> ESTADO: fazer com que o componente tenha memória.
- Componente tenha memória dentro dele = useState() - usa estado

- <strong>useState = retorna um array </strong>

Ao executar a função useState() ela retornará duas coisas:
1. a variável
2. e a função que irá atualizar a variável

```
import {useState} from 'react'

function Contador() {
const [contador, setContador] = useState(1) // valor inicial 1
	
function adcionarContador() {
	setContador(contador + 1)
}
	return (
		<div>
			<div>{contador}</div>
			<button onClick={adcionarContador}>Adcionar</button>
		</div>
	)
}
```