COMPONENTES E PROPS EM REACT

Antes de nos aprofundarmos nos componentes e props do react, vamos primeiro definir o que é react; React é uma biblioteca JavaScript focada principalmente na construção de interface de usuário (UI). Ele permite que os desenvolvedores criem componentes de interface do usuário reutilizáveis ​​e também gerenciem os dados que fluem por eles.

Agora, vamos falar sobre componentes em reagir.

Componentes em React

Um componente é uma parte da interface do usuário que representa um determinado elemento em uma página da web. Os componentes podem ser simples ou complexos e podem ser combinados para criar elementos de interface do usuário mais complexos. No React, os componentes são definidos usando funções ou classes Javascript, por exemplo;

function Welcome(props) {
  return <h1>Hello,{props.name}</h1>
}

class Welcome extends React.Component {
  render() {
   return <h1>Hello, {this.props.name}</h1>;
 }
}

Adereços em React

Props são uma maneira de passar dados de um componente pai para um componente filho (passar dados do(s) componente(s) filho(s) de volta para o componente pai neste caso não é possível). Props são passados ​​como um objeto para um componente quando ele é renderizado e podem ser acessados ​​dentro do componente usando o argumento props para componentes funcionais ou this.props para componentes de classe.

O código a seguir mostra como um componente pai pode passar uma propriedade name para um componente Welcome;

function App() {
 return (
  <div>
    <Welcome name="John" />
  </div>
  );
 };

Props também podem ser usados ​​para passar funções ou outras estruturas de dados, bem como valores simples. Por exemplo, o seguinte mostra como um componente pai pode passar uma função de retorno de chamada como um prop para um componente filho

function App() {
 const handleClick=() => {
  console.log('Button was clicked');
 };

return(
 <div>
   <Button onClick={handleClick} />
 </div>
 );
};


function Button(props) {
 return (
  <button onClick={props.onClick}>  
    Click Me
  </button>
 );
};

Em conclusão, componentes e props são conceitos fundamentais no React que permitem aos desenvolvedores criar componentes de interface do usuário reutilizáveis ​​e gerenciar os dados que fluem por eles. Usando componentes e props, os desenvolvedores podem criar interfaces de usuário complexas com facilidade e garantir que os componentes permaneçam sustentáveis ​​e escaláveis ​​à medida que o aplicativo cresce.