Ei! Se você acompanha, criou com sucesso seu primeiro componente de reação – aquele que diz “Olá, mundo!” Foi um ótimo primeiro passo, mas esse componente é estático. Sempre dirá a mesma coisa, não importa o quê. Neste artigo, vamos desbloquear a verdadeira magia do React. Vamos mergulhar em adereços, que são a chave para tornar seus componentes dinâmicos e reutilizáveis. Pense nos adereços como uma maneira de transmitir dados para um componente, assim como você passa argumentos em uma função. No final deste artigo, você saberá como criar um componente e, em seguida, usá -lo repetidamente com dados diferentes para exibir o que quiser. Responda à importação anterior do problema de casa ‘./app.css’ App () {return (<>

Olá, mundo! H1> // Substitua o código abaixo pelo seu nome real

Seu NameH1 >>)} Exportar aplicativo padrão Digite Modo de tela Full Salt Modo de tela cheia Vamos mergulhar e começar a passar dados! O problema dos componentes estáticos no último artigo, você criou com sucesso seu primeiro componente de reação-um simples que é um problema para a criação de um aplicativo do mundo real. Pense em um feed de mídia social. Cada postagem tem um nome de usuário diferente, imagem de perfil e texto. Você não gostaria de criar um componente novo para cada postagem. Isso seria incrivelmente ineficiente e bagunçado. Então, como resolvemos isso? Como criamos um componente e depois o usamos repetidamente com dados diferentes? A resposta é adereços. Você pode pensar em um componente REACT sem adereços como uma simples função JavaScript, sem argumentos; Ele sempre retorna o mesmo valor. Os adereços, que representam “propriedades”, são como os argumentos que você passa para uma função. Eles permitem que você personalize a saída de um componente sem alterar seu código principal, tornando -o reutilizável e dinâmico. Assim como uma função pode levar argumentos diferentes para produzir um resultado diferente, um componente pode receber adereços diferentes para renderizar dados diferentes. Esse conceito simples é a chave para criar aplicações poderosas e flexíveis. O que exatamente são adereços? Vamos obter uma definição clara e concisa de adereços. O termo adereços é abreviado para propriedades. No seu mais básico, eles são um mecanismo para transmitir dados de um componente pai para um componente filho. Pense nos seus componentes como uma árvore genealógica. Os dados podem fluir do pai (APP) para seus filhos (bem -vindo), mas não o contrário. Um componente pode receber adereços de seus pais e usar essas informações para decidir o que renderizar. Uma regra crucial para lembrar sobre os adereços é que eles são somente leitura. Um componente filho recebe os dados, mas não pode alterá -los. Você não pode modificar adereços dentro do componente que os recebe. Essa regra é uma parte central da filosofia de design da React, pois garante que seu fluxo de dados seja previsível e fácil de raciocinar. Em suma, os adereços são como você fornece instruções aos seus componentes sobre o que eles devem exibir e como eles devem se comportar. Seu primeiro componente com adereços é hora da parte prática! Vamos construir um componente de boas -vindas reutilizáveis ​​que possa exibir uma saudação com qualquer nome que damos. Crie um novo arquivo: Dentro da sua pasta SRC, crie um novo arquivo e nomeie -o bem -vindo.jsx. É aqui que escreveremos o código para o nosso novo componente. Adicione o código do componente: Abra o arquivo Walmm.jsx e cole o código a seguir nele. importar reagem de ‘react’; função bem -vindo (adereços) {return

Olá, {props.name}!

; } exportação de boas -vindas; Digite o modo de saída do modo de tela cheia de tela cheia, entendendo o código: a função de boas -vindas agora recebe um argumento chamado adereços. Este é um objeto JavaScript que conterá todos os dados passados ​​para o nosso componente. Dentro da instrução Return, usamos aparelhos encaracolados {} para incorporar JavaScript diretamente em nosso JSX. Quando o React renderiza isso, ele substituirá {props.name} pelo valor real da propriedade Name. Também adicionamos uma instrução padrão de exportação. Isso disponibiliza nosso componente bem -vindo para outros arquivos (como o App.jsx ou similar) para importar e usar. Agora você criou com sucesso um componente reutilizável que está pronto para receber e exibir dados! Na próxima etapa, veremos como transmitir esses dados a partir do componente do aplicativo. Usando seu novo componente de suporte agora que temos nosso componente de boas-vindas pronto para receber dados, vamos ver como o usamos. Trabalharemos dentro do arquivo app.jsx, pois este é o componente pai que transmitirá dados para seus filhos. Importe o novo componente: na parte superior do seu arquivo app.jsx, adicione uma instrução de importação para o nosso novo componente. importação de boas -vindas de ‘./welcome’; Digite o modo de saída de tela cheia de tela cheia de tela cheia de ligue para o componente com adereços: agora, limpe o conteúdo existente dentro da instrução Return no seu arquivo app.jsx. Vamos substituí -lo pelo nosso novo componente de boas -vindas e passar um suporte de nome.

Digite Modo de tela cheia de saída de tela completa Modo seu app.jsx deve ficar assim: importar ‘./app.css’ importação bem -vindo de ‘./welcome.jsx’ function app () {return (<>

>

)} Exportar aplicativo padrão Digite o modo de tela cheia de tela FullScreen Você pode reutilizar seu componente de boas -vindas quantas vezes quiser, passando um suporte de nome diferente a cada vez. Experimente você mesmo adicionando mais algumas linhas. Atualize o arquivo App.jsx com o seguinte código: importar ‘./app.css’ Import Welcome from ‘./welcome’ Função app () {return (<>

>)} exportar aplicativo padrão; Digite o modo de saída do modo de tela completa Os resultados devem ser assim: erros mais comuns com adereços (até mesmo eu cometi isso, às vezes o faz agora) 1. Tentando alterar uma regra de reação da chave propa é que os adereços são somente leitura. Você não pode alterar o valor de um suporte dentro do componente que o recebe. Tentar isso resultará em um erro ou comportamento inesperado. Maneira incorreta: // Na função de componente filho bem-vindo (adereços) {// Este é um grande não-não! props.name = “novo nome”; retornar

Olá, {props.name} h1>; } Digite Modo de tela cheia de tela FullScreen Mode maneira correta: se um componente precisar alterar seus próprios dados, esses dados devem ser gerenciados com o estado, não os adereços. 2. Passando números e booleanos como cordas Quando comecei a usar adereços, cometi um erro muito comum: passei tudo como uma corda. Um dia, eu tinha um componente que deveria renderizar apenas quando um suporte era verdadeiro, mas continuava se tornando mesmo quando eu o passei “falso”. Depois de muito arranhão na cabeça, encontrei meu erro: em JavaScript, todas as cordas não vazias são consideradas verdadeiras. Isso significa “falso”, “0” e “” são todos tratados como verdadeiros em um contexto booleano. Esta é uma lição crucial para aprender desde o início. Na JSX, tudo o que você coloca no Double Quotes “” é tratado como uma corda literal. Se você deseja passar um valor de JavaScript – como um número, um booleano, uma matriz ou um objeto – você deve envolvê -lo em aparelhos encaracolados {}. Aqui está uma comparação das maneiras incorretas e corretas de passar esses valores. Maneira incorreta: // app.jsx

// usercard.jsx // props.age será a string “25”, não o número 25. function usercard (adereços) {return

Idade: {props.age} p>; } Digite modo de tela cheia de saída de tela completa Modo correto: // app.jsx

// usercard.jsx // props.age é o número 25. function usercard (adereços) {return

Idade: {props.age} p>; } Digite o modo de saída de tela cheia de tela cheia 3. Não destruindo o propswhile Não é tecnicamente um erro, esse é um padrão comum que torna o código verboso e menos legível. Lembro -me do meu primeiro componente que levou mais de dois adereços. O componente necessário para exibir o nome do usuário, idade, localização e uma biografia curta. Comecei a escrever o código usando props.name, props.age, props.location e props.bio. O código funcionou, mas começou a se sentir confuso. A repetição era tediosa, e eu constantemente tive que olhar para o topo do arquivo para lembrar os nomes exatos dos suporte. Às vezes, digitava props.UserLocation em vez de props.location, levando a um bug rápido e confuso. O código funcionou, mas foi apenas muita bagunça. É aqui que a destruição entra como uma solução mais limpa e eficiente. Antigo Caminho: Const UserProfile = (Props) => {return (