Component Props no React

Tempo de leitura: 2 minutos

Component Props no React: React JS é uma biblioteca JavaScript para construção de interfaces de usuário, mantida pelo Facebook e uma comunidade de desenvolvedores individuais e empresas.

Um dos principais conceitos em React é o uso de props (abreviação de propriedades) para passar dados de um componente para outro. Neste artigo, vamos explorar as props de componentes em React.

O que são Props?

Em React, um componente pode aceitar entradas arbitrárias chamadas props. Em termos simples, props são argumentos que você passa para uma função JavaScript.

No contexto do React, você pode pensar em props como os atributos que você passa para um componente.

function BemVindo(props) {
  return <h1>Olá, {props.nome}</h1>;
}

const elemento = <BemVindo nome="Sara" />;
ReactDOM.render(elemento, document.getElementById('root'));

Neste exemplo, BemVindo é um componente que aceita props como entrada e retorna um bloco JSX. A prop nome é passada para o componente BemVindo.

Passando e Acessando Props

Você pode passar diferentes tipos de dados para um componente através de props, incluindo números, strings, objetos, arrays e até mesmo outras funções JavaScript.

function Saudacao(props) {
  return <h1>{props.saudacao}, {props.nome}</h1>;
}

const elemento = <Saudacao saudacao="Olá" nome="Sara" />;
ReactDOM.render(elemento, document.getElementById('root'));

Neste exemplo, passamos duas props (saudacao e nome) para o componente Saudacao.

Props são Somente Leitura

É importante notar que as props são somente leitura. Isso significa que um componente não deve modificar seus próprios props. Toda função ou componente React deve agir como uma função pura em relação às suas props.

function Soma(props) {
  return <h1>{props.a + props.b}</h1>;
}

const elemento = <Soma a={1} b={2} />;
ReactDOM.render(elemento, document.getElementById('root'));

Neste exemplo, o componente Soma recebe duas props (a e b) e retorna a soma dessas props. Ele não tenta alterar as props de qualquer maneira.

Conclusão

Component Props no React: As props são uma parte essencial do React que permitem que você passe dados de um componente para outro. Elas tornam seus componentes reutilizáveis e ajudam a manter seu código DRY (Don’t Repeat Yourself).

Compreender como as props funcionam e como usá-las efetivamente é fundamental para se tornar um desenvolvedor React eficaz. Pratique e experimente esses conceitos por conta própria para obter uma compreensão mais profunda de como eles funcionam.

E para que você continue estudando e evoluindo nada melhor do que um computador com os melhores preços, marcas renomadas e confiança na entrega que só a Amazon oferece. Clique aqui é veja as melhores promoções das melhores marcas de notebooks e com a melhor entrega do mercado!!!

E para você que já adquiriu seu novo notebook para estudar, precisará validar seus códigos, e para isso você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!