Props e State
Props e State são conceitos fundamentais em React.js. Props são atributos que passamos para componentes, enquanto State representa dados internos de um componente.
Props
São utilizados para transmitir dados de um componente pai para um componente filho. Por exemplo, imagine um componente de botão que recebe a propriedade “texto” para exibir o rótulo do botão:
function Botao(props) {
return <button>{props.texto}</button>;
}
<Botao texto="Clique Aqui" />;
State
É utilizado para representar o estado interno de um componente. Por exemplo, um componente de contador pode ter um estado que controla o número de cliques:
import React, { useState } from 'react';
function Contador() {
const [cliques, setCliques] = useState(0);
return (
<div>
<p>Clicou {cliques} vezes</p>
<button onClick={() => setCliques(cliques + 1)}>Clique Aqui</button>
</div>
);
}
<Contador />;
Importância
Props e State permitem que os componentes sejam dinâmicos e reutilizáveis, tornando o desenvolvimento mais eficiente e organizado.
Conclusão
Compreender como usar Props e State é essencial para construir aplicações React.js robustas e escaláveis. Esses conceitos são a base para a criação de componentes flexíveis e interativos.