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.

Compartilhar

Compartilhar

Siga-me