Aprenda React 18: Passando dados com adereços

Trabalhar com software significa que você terá que lidar com dados. Você pegará alguns dados de entrada, fará algum processamento e, opcionalmente, produzirá o resultado final.

No React, usamos principalmente props para passar dados para nossos componentes. A palavra props é basicamente um termo mais curto usado para propriedades. Você os viu em ação nos últimos tutoriais onde criamos componentes para exibir informações sobre países.

Neste tutorial, vamos nos concentrar em aprender sobre props em mais detalhes. Este tutorial cobrirá simplesmente o básico e, em seguida, passaremos para tópicos mais avançados posteriormente na série.

Adereços são como atributos

A maneira mais fácil de entender props é pensar neles como os atributos que você pode passar para os elementos HTML durante o desenvolvimento web. No entanto, props são muito mais avançados.

Algum prop terá dois elementos. O primeiro é o nome do prop, que é simplesmente o nome do atributo. O segundo é o valor prop, que é o valor desse atributo. Você pode atribuir quantos props ao seu componente como desejar.

Existem duas regras que você deve seguir ao atribuir um nome a diferentes adereços.

1. O nome do prop não pode ser uma palavra-chave reservada do JavaScript. Isso ocorre porque o JSX que escrevemos será convertido em JavaScript e o uso de palavras-chave reservadas atrapalhará as coisas. É por isso que usamos className ao invés de class e htmlFor ao invés de for como nome do prop.
2. Os nomes das props devem estar em camelCase.

Como eu disse anteriormente, você pode passar quantos adereços para um componente desejar. No entanto, um componente não é necessário para usar todos os adereços.

Você pode pensar em passar props para componentes como passar parâmetros para funções. Componentes são como funções nesse sentido e assim como você pode passar qualquer tipo de valor como parâmetro para funções, você pode passar qualquer tipo de valor como prop.

/* let countryElement = (
  
); */

let countryElement = Country({name: "United States", capital: "Washington D.C.", population: "332 million"});

let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(countryElement);

No exemplo acima, substituímos o JSX pelo nosso Country componente com uma chamada de função para Country e armazenou o resultado dentro countryElement. No entanto, renderizando countryElement no final nos deu o mesmo resultado.

Os adereços devem ser somente leitura

Um componente não deve modificar o valor de suas props. As funções ou classes que definimos para criar nosso componente devem manter as props como somente leitura. Esse comportamento é aplicado quando você cria um aplicativo React executando o comando:

npx create-react-app your-app

Nesses casos, o código a seguir fornecerá um erro sobre o “nome” ser somente leitura.

function Country(props) {

    props.name = "Australia";

    return (
      

        
Country Name: {props.name}
        
Population: {props.population}
        
Area: {props.area} km2
      
    );
}

export default Country;

A razão pela qual os adereços devem ser imutáveis ​​é porque os componentes devem usá-los para obter informações de seus pais. Se você realmente deseja modificar algumas informações em um componente, usar state é sua melhor aposta. O estado é basicamente os dados mantidos dentro do componente e o React atualizará automaticamente o DOM com base em quaisquer alterações no estado. Vamos aprender mais sobre isso mais tarde na série.

Tenha em mente que os dados no React fluem de pai para filho e assim por diante na lista.

Pensamentos finais

Espero que agora você tenha um entendimento básico de adereços no React. Em tutoriais posteriores, discutiremos como validar props ou fornecer valores padrão para eles.