Transcrições
1. Introdução: Minha paixão pelo desenvolvimento web, definitivamente decorre do meu amor pela resolução de problemas. Há algo muito satisfatório em pegar um problema e dobrá-lo de acordo com seus testamentos no código. Oi lá. Sou Ryan Johnson. Um desenvolvedor web do Canadá, onde eu tive o privilégio de trabalhar na indústria de tecnologia há 15 anos. Ao longo desse tempo, tive a sorte de trabalhar em uma variedade de lugares diferentes, desde pequenas startups a grandes empresas. Hoje, quero apresentá-los a uma das minhas bibliotecas favoritas com quem trabalho, React JS. Não só o React JS é apoiado pelo Facebook, mas também tem uma das comunidades de desenvolvimento mais vibrantes por aí. Comecei a usar o React há três anos e não olhei para trás desde então. Para mim, React torna o desenvolvimento da interface do usuário mais divertido. Reagir trazer alguma ordem muito necessária para o desenvolvimento de interface permitindo que você divida sua interface em componentes agradáveis e limpos. Este curso, é voltado para desenvolvedores que todos prontos têm uma boa compreensão de JavaScript, mas querem pegar Reagir. Muitos recém-chegados a reagir, tendem a ficar pendurados em dependências externas como Webpack, e Redux, e Babel, e linting, e testes, e assim por diante. Essas lições, eu vou estar evitando essas distrações e aderindo aos fundamentos do React
e, em seguida, guiá-lo através da criação do seu primeiro aplicativo. Para encerrar as coisas, farei o meu melhor para desvendar como funciona o React e o que o torna tão eficiente. Se você é como eu e gosta de entender o que está
acontecendo debaixo do capô e as ferramentas que você usa, essas lições são para você. Estou super animado para apresentá-lo a React e eu realmente espero que você goste de trabalhar com ele tanto quanto eu. Vamos em frente e começar.
2. Introduçãode Códigos: Antes de começarmos, quero apresentá-los a um poderoso editor de código on-line chamado CodeSandbox, que usaremos para a maioria dessas lições. Vou começar criando um novo projeto clicando em Create Sandbox. Como você pode ver, CodeSandbox suporta não apenas React, mas muitas outras estruturas populares também. Vou em frente e selecionar o projeto Reagir, e com um único clique, agora
tenho um aplicativo React funcionando totalmente no meu navegador. CodeSandbox me permitiu pular a configuração e focar nos fundamentos do React que estamos aqui para aprender. A primeira coisa que vou fazer, já que já tenho uma conta é entrar no CodeSandbox como minha conta do GitHub. Sinta-se livre para criar uma conta própria para que você possa acompanhar as lições. A parte final do editor do CodeSandbox é bastante padrão e funciona da mesma forma que os editores de código mais populares lá fora hoje. Você tem seu navegador de arquivos. Podemos ver todos os arquivos e diretórios do projeto. Como você pode ver, o CodeSandbox já foi em frente e criou alguns arquivos para nós. Se eu quiser adicionar um novo arquivo ou diretório, eu posso usar os botões aqui no topo. Abaixo do editor de arquivos, temos a seção Dependências. Isso exibe todas as dependências do NPM instaladas para o projeto. Você pode ver que o CodeSandbox já instalou algumas dependências do React para nós. Adicionar novas dependências também é fácil. Basta clicar em Adicionar Dependência, procurar o que você deseja
e, em seguida, clicar nele para instalar. Um único clique em um arquivo será aberto no modo de visualização, enquanto clicar duas vezes em um arquivo abrirá o arquivo no modo de edição. Você pode ter notado à direita algo que se parece com uma janela do navegador. Esta é uma visualização em tempo real do aplicativo que será recarregada automaticamente quando um arquivo for alterado. Para demonstrar, eu vou ir em frente e atualizar nosso h1 para dizer Olá Reagir Iniciantes. Agora você pode ver, assim que a atualização é feita, ela é atualizada automaticamente aqui à direita. Por último, quero mostrar-lhe a consola incorporada do CodeSandbox. Isso praticamente imita a funcionalidade do console do seu navegador. Então, se eu for em frente e sair do console, eu posso ver o console de caixas de proteção do código de audição de pares. E assim como o console do navegador, eu também posso executar comandos também. Se eu ir em frente você em Alerta que diz Olá do console, você pode ver que ele é executado e aparece aqui na parte superior do navegador. Já chega da nossa caixa de areia de código. Estamos aqui para aprender sobre React afinal. Mas dito isso, vamos em frente e começar.
3. Fundamentos: componentes: Quando se trata de reagir, é tudo sobre os componentes. Componentes são provavelmente a minha parte favorita do desenvolvimento de uma reação. Com componentes, você pode pegar qualquer interface do usuário e dividi-la em pedaços menores e
reutilizáveis que podem funcionar independentemente uns dos outros. Por exemplo, vamos pegar a interface de código Sandbox
em que estamos trabalhando e pensar em como podemos dividi-la em componentes. Ignorando as áreas de cabeçalho e rodapé, vejo o potencial para três componentes de nível superior. Um componente Navegador de
arquivos, componente Editor de arquivos e um componente Janela do navegador. Cada um desses componentes pode ser composto por seus próprios componentes também. Por exemplo, o navegador de arquivos tem um menu Acordian que pode ser seu próprio componente e cada item dentro do Accordian, também
pode ser um componente. Se você quiser ir mais longe, cada ícone de Itens pode até ser um componente também. Dividir sua interface do usuário em componentes gerenciáveis menores como este tem todos os tipos de benefícios, incluindo tornar seu código mais fácil de reutilizar e testar. Mas não podemos falar de componentes sem mencionar elementos. Um elemento é o menor bloco de construção e reagir e descreve o que você eventualmente vê na tela. Para demonstrar, vou começar criando um simples elemento H um. Dentro desse elemento eu vou ter algum texto Olá e, em seguida, eu vou incluí-lo nos componentes do aplicativo que podemos renderizar para a tela. Este é um exemplo de um elemento muito simples, mas os elementos também podem ser mais complexos. Aqui está um exemplo de elemento mais complexo chamado wrapper que é composto de uma div com algum texto de parágrafo dentro. Você pode pensar em elementos como os blocos de construção que são usados para juntar seus componentes. Então, como é um componente? Um componente em sua forma mais simples é apenas uma função. Por exemplo, digamos que tivemos uma função de adição simples que levou dois parâmetros e retornar a soma de dois valores. Você pode ver se eu passar a função adicionar dois e dois, eu recebo quatro log para o console. Se eu mudar este segundo parâmetro 10, eu recebo 12 de volta no console. Mas o que é realmente legal é que podemos facilmente converter esta função add para ser um componente reagir em vez disso. Primeiro, use um A maiúsculo para o nome da função do componente, pois todos os componentes precisam começar com uma letra maiúscula. Isso ocorre porque reagir tratará componentes que começam com letras minúsculas como marcas DOM. seguida, em vez de a função tomar dois parâmetros, eles tomarão um único parâmetro chamado adereços. Props são como você passa dados para o seu componente. Um componente é uma função imutável, significa que desde que você dê a mesma entrada e reage props
caso deve sempre receber a mesma saída. Agora eu posso pegar o componente Adicionar e ter o aplicativo renderizá-lo. Para passar os valores de a e b, basta adicioná-los como propriedades ao componente. Agora você pode ver que a soma está sendo renderizada para a tela. Quando se trata de componentes, reagir realmente fornece duas opções diferentes. O primeiro e o mais simples dos dois são componentes funcionais, que é uma função que tem um parâmetro props e retorna um elemento de reação válido. O componente Adicionar que acabamos de criar como um exemplo de um componente funcional, os componentes de segunda ou classe, e como o nome diz, o componente será uma classe em vez de uma função. Por exemplo, posso facilmente converter o componente Adicionar em um componente de classe. Comece convertendo const para classe. Em seguida, ter a extensão da classe do componente ponto reagir. Em seguida, adicione uma função de renderização e ter que retornar o elemento em vez disso. Por último, como adereços é agora uma variável de instância, adicione isso na frente dela. Aí está, um componente de classe. Mas a saída parece exatamente a mesma que antes, que levanta a pergunta por que usar um componente de classe em tudo? Acontece que há uma razão muito boa, apenas os componentes de classe têm acesso para reagir métodos de estado e ciclo de vida. Nenhum desses recursos está disponível a partir de componentes funcionais. Não se preocupe, entraremos em ambos os métodos de estado e ciclo de vida mais tarde. Outra característica agradável dos componentes é o prop das crianças. Por exemplo, digamos que eu queria criar um componente de layout de página reutilizável. A idéia é que todas as minhas páginas mostram o mesmo cabeçalho e rodapé. Mas quer passar em uma cópia de corpo diferente para cada página. Então, como faço isso? Digite adereços ponto filhos. Agora vou renderizar o componente de layout, mas em vez de uma tag de fechamento automático, vou usar uma tag de abertura e fechamento. Em seguida, vou adicionar alguns elementos de parágrafo para esta cópia de corpo layouts. Assim, podemos ver que minha cópia do corpo está sendo renderizada entre meu cabeçalho e rodapé. Você pode pensar em adereços que os filhos são um espaço reservado para qualquer conteúdo que você incluir entre as tags de abertura e fechamento ao renderizar seu componente. Eu vou para ir em frente e adicionar outro componente de layout, mas desta vez eu vou passar em uma cópia de corpo diferente. Como o layout está usando prompts dot children, eu sou capaz de passar uma cópia de corpo diferente para o mesmo componente de layout. Este é um recurso muito poderoso que permite que você escreva componentes que não requerem conhecimento das crianças lá incluindo. Você deve ter notado que quando nosso componente de layout criativo, eu envolvi em um elemento div, mesmo com o componente aplicativo quando eu adicionei o componente de segunda camada. Isso ocorre porque um componente deve ter apenas um único elemento raiz, a menos que usando algo reagir chama fragmentos. Para demonstrar que vou remover a
div wrapper do componente de layout e ver o que acontece. Você pode ver assim que eu faço isso eu recebo um erro. Elementos JSX adjacentes devem ser embrulhados em uma tag de fechamento. Praticamente isso está dizendo que eu estou esperando um componente para retornar um único elemento e você me deu três em vez disso. Agora há uma maneira de retornar vários elementos e que é usar fragmentos como o erro sugere. Isso é útil, pois evita ter que embrulhar os elementos e o que é um negócio inútil neste caso. Para atualizar fragmentos de uso de layout, eu só preciso envolver os elementos no componente fragmento de ponto de reação. Agora, quando nossa página for renderizada, não haverá um elemento div extra e nosso erro deve desaparecer. Isso encerra tudo o que eu queria cobrir nos fundamentos dos componentes. Em seguida, vou dar uma olhada na sintaxe HTML que temos usado para escrever nossos componentes chamados JSX.
4. Fundamentos de: Temos mais uma coisa para cobrir antes de começarmos a criar seu primeiro reator, JSX. Se você se lembra anteriormente mencionei JSX é um HTML como sintaxe usado para descrever elementos reagir. Embora possa se parecer muito com HTML, é realmente uma extensão de JavaScript e a maioria das pessoas acham mais fácil trabalhar com eles reage chamadas API de nível superior como reagir criar elemento. Com isso sendo dito, é importante lembrar que JSX ainda é compilado para reagir criar chamadas de elemento. Para demonstrar ou usar uma ferramenta que realmente nos mostre o que JSX é compilado para baixo. Eu vou apenas ir em frente e copiar nosso componente de aplicativo. À esquerda, você verá a versão JSX do componente e
à direita você verá a saída do compilador desse componente. Se analisarmos mais de perto a versão compilada do componente, você pode realmente ver que ele é composto de várias chamadas para react.createElement. Cada uma dessas chamadas corresponde a um elemento no componente JSX. Temos o nosso principal reagir criar elemento chamada, que é uma div, que remonta ao nosso div principal aqui. Isso tem um nome de classe de App, e então ele tem alguns elementos filho também, um h1 e h2, que em ambos vemos representados aqui por mais duas chamadas para reagir criar elemento. Ao comparar essas duas versões do mesmo componente, acho que a versão JSX muito mais fácil de ler. Eu acho que isso será verdade para a maioria dos desenvolvedores que estão familiarizados com HTML. Todas as lições a seguir serão usando JSX. Mas eu queria mostrar o que está acontecendo sob o capô quando você cria um componente JSX. A verdadeira beleza do JSX é que ele vem com todo o poder do JavaScript por trás dele. Vamos começar com alguns fundamentos JSX, primeiro, incorporando expressões. Agora tudo isso parece muito chique, mas nós já trabalhamos com uma expressão aqui. Nosso props.version que está sendo renderizado na tela é uma expressão. No JSX, suas expressões serão apenas envoltas em chaves. O conteúdo das chaves é o que realmente está sendo avaliado. Neste caso, estamos apenas enviando o valor de props.version para a tela. Antes de continuarmos eu quero fazer um par de torção rápida CodeSandbox. Vamos começar recolhendo nosso editor de arquivos clicando na aba do editor de arquivos. Então vou encolher a janela do navegador um pouco aqui à direita. Agora eu vou ir em frente e atualizar nossa expressão, que na verdade renderiza uma mensagem condicionalmente baseada no valor da versão. Se a versão for maior do que um, eu vou renderizar uma mensagem que diz versão inválida. Se a versão é menor ou igual a um, então eu vou realmente renderizar o props.version como estávamos fazendo antes. Eu ir em frente e atualizar uma versão para ser dois pontos, embora, agora
você pode ver que nós realmente temos uma nova mensagem, versão
inválida renderizada para a tela. Como pode ver, não precisávamos fazer nada especial aqui para que isto funcionasse. Este é apenas um operador ternário JavaScript antigo simples que processa uma mensagem ou outra com base em uma condição. Isto é o que eu amo no JSX, é apenas JavaScript. Não há necessidade de aprender mais uma linguagem templadora. Agora que fizemos algumas mudanças, vou continuar e salvar nosso trabalho. Você pode ter sabido assim que salvamos nosso código realmente formato automático. Isso ocorre porque CodeSandbox está realmente usando uma ferramenta chamada mais bonita, que leva o trabalho monótono de formatação de código e faz isso para você automaticamente. Agora que cobrimos expressões JSX, vamos passar para atributos. Ao especificar atributos e JSX, existem algumas diferenças importantes quando comparados aos atributos HTML. ReactDom usa maiúsculas e minúsculas para nomes de atributos. Por exemplo, minúsculas no clique torna-se camelo caso no clique, tabulação em
minúsculas torna-se índice de tabulação camelo. Ao especificar valores de atributo, você tem duas opções. O primeiro é literais de cordas, e é simples o suficiente. A segunda é expressões que permitem a criação de valores de atributos dinâmicos como esse. Só para mostrar que estava funcionando, vou abrir o console aqui. Você pode ver que isso está realmente avaliando para um índice de tabulação de dois. Tenha cuidado ao usar expressões como valores de atributo, não para envolvê-lo entre aspas. Isso resultará na expressão não sendo avaliada e sendo tratada como uma string literal. Isso conclui os conceitos básicos do JSX. Mas não se preocupe, vamos entrar em uso mais avançado do JSX nas próximas lições.
5. Crie um aplicativo: introdução: Descobri que a melhor maneira de aprender um novo quadro é realmente construir algo. Agora que temos os fundamentos cobertos, quero orientá-lo durante a criação do seu primeiro aplicativo React. Então, o que estamos construindo? Para o nosso primeiro aplicativo, vamos criar um clone simples do Google. Mas em vez de ser capaz de procurar por qualquer coisa, nosso Google vai procurar por piadas de pai e apenas piadas de pai. Se eu entrar em “gato”, clique em “Pesquisar”, eu recebo uma lista de cinco piadas de pai relacionadas com gatos. Se eu inserir um novo termo de pesquisa e clicar em “Pesquisar”, posso ver que os resultados da pesquisa são atualizados com novas piadas do pai. Por último, ao contrário do botão “I'm Feeling Lucky” do Google,
temos o botão “I'm Feeling Funny”, que retornará uma única piada de pai neste caso. Embora este aplicativo pode parecer bastante simples, vamos cobrir um monte de rosnado em criá-lo, então vamos começar. Vamos continuar usando CodeSandbox, o aplicativo de criador. Mas antes de começarmos, quero começar com uma ficha limpa. Então eu vou ir em frente e excluir nosso trabalho anterior e começar com um bom componente de aplicativo em branco, e ignorar a seta que aparece por enquanto. Para começar, vamos manter as coisas bem simples. Vamos ter um único botão que, quando clicado, gera uma piada de pai. Então eu vou começar indo em frente e criando esse botão, e eu vou rotular com “Diga-me uma piada”. Então você pode ver que temos nosso novo botão “Diga-me uma piada” sendo renderizado na tela aqui. Mas quando eu clico nele, não está acontecendo muita coisa. Para lidar com eventos de clique em Reagir, você usa o OnClick event.Let's ir em frente e adicionar um ao nosso botão aqui. O evento OnClick realmente tem uma função como seu valor. Então vamos em frente e adicionar uma função simples que faz logout de um valor quando clicado. Então vamos em frente e abrir nosso console aqui. Agora, você pode ver que toda vez que clicamos no botão “Diga-me uma piada”, a palavra “clique” é registrada no console para cada um desses cliques. Agora que sabemos que nosso evento OnClick está realmente funcionando, eu quero ir em frente e mover nosso manipulador OnClick para sua própria função. Eu vou ir em frente e chamá-lo OnTellJoke, e ele vai registrar nosso clique exatamente como está fazendo agora. Então eu vou pegar este novo OnTellJoke, e eu vou substituir a função inline que criamos anteriormente, e eu vou apenas ir em frente e salvar. Agora, quando eu clicar em “Conte-me uma piada”, ainda
devemos ver o clique desconectado. Agora este botão de piada ainda não está fazendo muito quando clicamos nele. O que realmente queremos que aconteça é toda vez que você clica no botão da piada, você recebe uma piada de volta, uma piada de pai, especificamente. Mas antes que pudéssemos fazer isso, precisamos de um lugar para fazer piadas de pai. Uma vez que há uma API para tudo nos dias de hoje, estaremos usando uma API gratuita de icanhazdadjoke.com para todas as necessidades de piadas do nosso pai. Vamos dar uma olhada nos documentos da API para ver com o que estamos lidando. Primeiro, você notaria que nenhuma autenticação é realmente necessária para essas chamadas, o que é uma coisa a menos para se preocupar. Em seguida, você verá que a API realmente suporta vários formatos de resposta. No nosso caso, estamos preocupados apenas com a opção JSON e é isso que vamos usar para o nosso tutorial. Para o nosso botão “Diga-me uma piada”, vamos usar o ponto final “Buscar uma piada de pai aleatória”. A maneira como isso vai funcionar é que cada vez que o botão é clicado, uma nova piada aleatória será gerada e enviada de volta para nós. Podemos ver um exemplo da resposta que será retornado aqui, que é um objeto que contém a piada juntamente com um ID exclusivo e um código de status HTTP. Agora que temos o nosso ponto final, vamos voltar e ligar o botão da piada. Para chamar o endpoint “Random joke”, usaremos a API Fetch do JavaScript, que permite buscar recursos em toda a rede. Estaremos passando Fetch dois parâmetros. O primeiro é o URL do recurso, que no nosso caso é o ponto final “Buscar piada aleatória”. O segundo parâmetro é um objeto de opções, mas vamos definir o método HTTP para GET uma vez que esta é uma solicitação GET. Em seguida, vamos definir o cabeçalho “Aceitar” para o tipo JSON
aplicativo para garantir que nossos dados voltem no formato JSON. Chamar “Buscar” retorna uma promessa que resolve para um objeto de resposta. Em nosso método “então”, vamos usar os objetos de resposta construídos no método JSON para analisar nossos dados de resposta. Uma vez que o método JSON também retorna uma promessa, podemos simplesmente encadear em outro método “then”. Desta vez, o retorno de chamada será passado para dados JSON analisados quando a promessa resolver apenas para garantir que as coisas estão funcionando com log out os resultados. Agora, vamos em frente e abrir o console. Agora, quando eu clico no botão de piada, você pode ver que a resposta da API da piada do pai está sendo desconectada. Como estamos usando o ponto de extremidade “Piada aleatória”, recebemos uma piada diferente se eu clicar no botão novamente. Agora que nosso botão de piada está funcionando, isso encerra essa lição. Em seguida, vamos estar olhando para um estado de componente principal do recurso React.
6. Crie um aplicativo: estado de componente: Nesta lição, eu vou fazer um mergulho mais profundo no estado do componente. Mas antes de entrarmos, vamos para onde paramos. Para recapitular, temos um botão de piada que busca uma piada toda vez que é clicada, e atualmente registramos a piada no console. Em seguida, quero atualizar nossos aplicativos para que a piada de busca seja renderizada para a tela. Para fazer isso, porém, precisaremos de um lugar para armazenar o valor da piada. Em uma configuração que não reaja, você pode pensar em armazenar o valor em uma variável assim. Quando uma nova piada é obtida, eu vou atualizar o valor da variável piada com a piada obtida. Se você chamar, a piada EPI retorna um objeto. Isso inclui ID, piada e status. Em vez de armazenar todo o objeto de piada, eu só vou armazenar a piada em si. Eu também vou fazer logout o valor dessa variável piada, só para ter certeza de que está atualizando. Finalmente, eu vou adicionar um rápido desenvolvimento em torno do nosso botão, e inserir um elemento de parágrafo,
e, em seguida, definir o conteúdo desse parágrafo para o valor da nossa variável piada. Vamos tentar e ver o que acontece. Podemos ver que nossa variável piada está sendo registrada no console toda vez que o botão é clicado, mas não estamos vendo nada de atualização na tela. Como é que? A razão pela qual não estamos vendo nenhuma atualização na tela é que React não sabe que nada realmente mudou. Um componente React só será renderizado novamente quando seus prompts ou estado tiverem sido alterados. No caso de nosso componente de aplicativo, uma renderização ocorre sempre que a função do aplicativo é executada pelo React. Vou adicionar um console que se conectou à nossa função de aplicativo. Dessa forma, podemos ver algo registrado toda vez que o componente é renderizado. Como você pode ver, a renderização é desconectada para a renderização inicial dos componentes. Mas observe que cada vez que eu clicar no botão de piada, renderização não é desconectada, mesmo que a variável de piada esteja sendo atualizada. Isso ocorre porque as alterações em nossa variável de piada não estão sendo rastreadas pelo React
e, portanto, não estão ativando uma nova renderização. Parece que se queremos aplicativo para aplicativo renderizar mudanças de piada, vamos precisar armazenar piada no estado do componente ou adereços. Qual é que usamos neste caso? props são passados para um componente e são somente leitura, que
significa que eles não podem ser alterados, onde um estado contém informações sobre o componente e pode ser atualizado. Com isso sendo dito, estado parece a escolha certa, pois
vamos precisar atualizar o valor da piada à medida que vamos. Como os componentes funcionais não têm acesso ao estado, a primeira coisa que precisamos fazer é converter o aplicativo em um componente de classe. Comece alterando a função do aplicativo para uma classe que se estende de Reagir para um componente. Em seguida, converta piada em uma propriedade de classe. Em seguida, vamos precisar converter a função OnTellJoke para ser um método de classe em vez disso. Então, por último, em vez de retornar elementos diretamente, usamos o método de renderização e retornar os elementos de lá em vez disso. Agora que OnTellJoke e piada são variáveis de classe, precisamos adicionar isso na frente deles. Parece que estamos renderizando sem erros, mas vamos tentar o botão de piada novamente. Parece que quebramos algo, e Code Sandbox é bom o suficiente para nos dizer exatamente qual é o erro, não pode definir piada de propriedade indefinida. Acontece que causamos esse erro quando mudamos a função OnTellJoke para um método de classe. Isso ocorre porque os métodos de classe não estão vinculados por padrão. Uma vez que OnTellJoke é chamado de um manipulador de cliques, a referência a isso não é mais escopo para o componente, mas para o botão, portanto, obtemos um erro ao tentar definir um valor nesta piada de pensamento. Embora existam várias soluções para esse problema, eu escolho vincular explicitamente cada método do componente no construtor. Nosso componente não tem um construtor agora, então vamos começar adicionando um. Uma vez que todos os componentes se estendem da classe de componente Reage, você precisa garantir que você chamar o método super antes de fazer qualquer outra coisa. Vou tomar este método onTellJoke, e reatribuí-lo a uma versão desse método que está vinculado ao componente. Agora, mesmo que OnTellJoke seja chamado de um manipulador de cliques, isso fará referência ao componente e não ao botão. Com isso fixo no lugar, vamos tentar um botão de piada novamente. Incrível, sem mais erros. Agora que nosso componente foi atualizado com sucesso para um componente de classe, estamos prontos para começar a usar o estado local. Vamos começar removendo nossa variável de piada antiga, já que ela não é mais necessária. Em vez disso, vamos criar uma nova variável de piada em nosso estado componente. Ao adicionar valores de estado ao seu componente, geralmente
começarei adicionando valores padrão. Isso é feito no construtor
adicionando diretamente valores à propriedade de estado do componente. Vou em frente e adicionar piada ao nosso estado e definir como nulo para começar. É importante lembrar que esta é a única vez que você deve modificar o estado do componente diretamente. Para atualizações de estado, você sempre precisa usar o método de estado de conjunto de componentes, que agora usaremos para atualizar nosso estado toda vez que uma nova piada for buscada. Vamos começar removendo nossa referência à nossa variável de piada antiga. Vamos substituir isso por uma chamada para este.set estado. Em seguida, vamos passar set state um objeto com nossos valores de estado atualizados. No nosso caso, isso vai passar no nosso novo valor de piada. Ao usar set state, é melhor pensar nele como uma solicitação,
em vez de um comando imediato para atualizar o componente. Isso ocorre porque o estado de conjunto nem sempre atualiza imediatamente o componente, ele pode agrupar ou adiar a atualização para mais tarde. Isso torna a leitura this.state logo após a chamada define armadilha potencial de dados. Para evitar essas armadilhas com o estado definido, recomendo ler Reage documentos oficiais sobre o assunto, pois é uma peça crítica ao lidar com tópicos mais avançados do React. Agora que conectamos nossas chamadas de estado definido, vamos atualizar nosso elemento de parágrafo para usar o estado de piada em vez de nosso valor de piada antigo. Vamos ver se isso fez diferença. - Legal. Agora eu vou clicar no botão de piada, nossa nova piada está sendo renderizada para a tela. Você também notará que renderiza agora sendo registrado toda vez que eu clicar no botão. Isso é esperado como cada clique no botão está acionando uma atualização de estado, e cada atualização de estado aciona uma re-renderização. Isso encerra a introdução ao estado do componente. Em seguida, vamos dar uma olhada em outro recurso importante React, métodos de ciclo de vida.
7. Crie um aplicativo: métodos de vida: Nesta lição vou introduzir métodos de ciclo de vida reage. Mas antes de fazer isso, vamos fazer uma recapitulação rápida. Na lição anterior, nós conectamos nosso botão para exibir uma nova piada toda vez que foi clicado. Mas quando nosso aplicativo é carregado pela primeira vez, nossa tela parece muito nua. Então eu estou indo para ir em frente e adicionar algumas novas funcionalidades que vai buscar e exibir uma piada logo quando o aplicativo é carregado para cima. Então, como fazemos isso? Para isso, estaremos aproveitando os métodos do ciclo de vida dos componentes. Esses métodos fornecem ganchos que permitem que você execute sua própria lógica quando um evento correspondente ocorre em um componente. No nosso caso, queremos buscar uma piada antes do componente aplicativo é renderizado para a tela. Este é um caso de uso perfeito para reage ComponentDidMount () método de ciclo de vida. Se tivermos uma olhada nos documentos oficiais de reação, ele diz, “ComponentDidMount () é chamado imediatamente após um componente ser montado.” Ele também diz: “Se você precisar carregar dados de um endpoint remoto, este é um bom lugar para instanciar a solicitação de rede.” Que é exactamente o que estávamos a fazer com a nossa FetchJoke. Então eu acho que este é um ajuste perfeito para o nosso cenário. Então vamos em frente e adicionar um método componentDidMount () ao nosso componente de aplicativo. Agora nós poderíamos apenas copiar o conteúdo do nosso manipulador de clique piada on tell em componente montou assim e que iria funcionar bem, mas ele cria um monte de duplicação que não é grande. Em vez disso, vou copiar essa lógica em um novo método e chamá-lo de FetchJoke. Agora eu vou atualizar ambos componente fez montar e em dizer piada para ambos chamar FetchJoke em vez. Com essa mudança, uma piada é buscar quando o componente do aplicativo é montado, que significa que se eu atualizar a página, eu deveria ver uma piada renderizada na página imediatamente e lá vamos nós. Ao fazer solicitações de rede assíncronas, como nossa chamada FetchJoke, é bom pensar sobre o que um usuário vê enquanto essa solicitação está sendo carregada. Minha conexão é muito rápido, então o tempo entre eu clicar no botão de piada e realmente ver uma piada é muito rápido. Mas e aqueles usuários em uma conexão mais lenta? O que é que eles vão ver? Vou continuar e simular uma conexão mais lenta usando o Chrome DevTools. Com uma conexão lenta, você pode ver que o usuário tem que esperar um pouco
antes de ver uma piada aparecer na tela e durante esse tempo, o usuário não tem nenhuma indicação do que está acontecendo. Isso não contribui para uma ótima experiência de usuário, então vamos em frente e melhorar isso. A primeira coisa que vou fazer é criar uma nova variável de estado chamada isFetchingJoke. Isso será usado para rastrear quando uma piada está sendo buscada e, por padrão, eu vou ir em frente e definir como padrão. O trabalho começará a buscar assim que FetchJoke for chamado. Então eu vou adicionar um estado definido chamado direito no início
deste método e set é buscar piada para true. Uma piada é considerado feito buscando quando recebemos uma resposta da API piada, que acontece aqui mesmo. Uma vez que já estamos chamando set state aqui, eu vou apenas ir em frente e como isFetchingJoke e defini-lo como falso. Para testar que ele está funcionando como esperado, eu vou processar o valor de isFetchingJoke para a tela. Desde isFetchingJoke é um valor booleano, eu vou chamar duas strings sobre ele, o que nos permitirá renderizar o valor para a tela. Agora, quando eu clicar no botão, você pode ver que o valor isFetching é definido como true e uma vez que a piada é retornada, isFetching volta para false. A primeira melhoria que eu quero fazer é ter um botão de piada desativado enquanto piada está sendo buscada. Isso impedirá que o usuário clique
no botão novamente se já estamos buscando uma piada. Para fazer isso funcionar, vamos usar os botões desabilitados atributo e definir o valor igual ao nosso novo valor de estado isFetchingJoke. Agora, sempre que uma piada estiver sendo obtida, o botão será automaticamente desativado e reativado quando a busca estiver concluída. Outra melhoria que podemos fazer é adicionar mensagens
melhores para o usuário enquanto uma piada está sendo buscada. Atualmente ainda só mostramos a velha piada. Em vez disso, gostaria de mostrar uma mensagem de piada de carregamento para o usuário. Para conseguir isso, vamos usar uma expressão condicional. A condição será se for buscar piada for verdadeira, então renderize a mensagem de carregamento e se for falsa, renderize a piada como estamos fazendo agora. Vamos em frente e remover nosso rótulo isFetchingJoke como não precisamos mais dele. Vamos em frente e testá-lo. Agora podemos ver que sempre que uma piada está sendo buscada, recebemos esta mensagem de carregamento agradável que nos permite saber que algo está acontecendo, isso é uma grande melhoria para aqueles usuários que podem estar usando uma conexão mais lenta. Em seguida, vamos olhar para o aprimoramento do que
fizemos aqui adicionando um formulário para uma pesquisa.
8. Crie um aplicativo: adicione um formulário de pesquisa: Agora que temos o aplicativo funcionando bem para uma piada, vamos dar um passo adiante. Em vez de apenas buscar uma piada aleatória, vamos dar ao usuário a capacidade de procurar piadas. A primeira coisa que vamos precisar é de um formulário. Vamos em frente e criar um formulário vazio para começar. Em seguida, precisamos de algum lugar para nosso usuário inserir sua pesquisa. Vamos em frente e adicionar uma entrada de texto com algum texto de espaço reservado. Por último, vou criar um botão chamado pesquisa, onde o usuário enviar nosso formulário. Agora que temos uma configuração de formulário ou me diga que um botão de piada está parecendo solitário, flutuando por aí. Por enquanto, eu vou apenas movê-lo para dentro da nossa forma como vamos usá-lo mais tarde. O que vem a seguir? Ao trabalhar em um novo recurso, acho muito útil dividi-lo em tarefas menores. Vamos em frente e criar uma lista de tarefas para rastrear o trabalho que vamos fazer para o formulário de pesquisa. Primeiro, é chamar o ponto final de piada de pesquisa e armazenar os resultados, depois salvar a consulta de pesquisa do usuário e, em
seguida, acionar a pesquisa no envio do formulário. Depois disso, renderizando os resultados da pesquisa para a tela, depois conectando o botão Estou me sentindo engraçado, seguido pela criação do componente do fórum de pesquisa. Em seguida, refatoração e limpeza de código, e por último, mas não menos importante, adicione estilos ao aplicativo. Agora que temos um plano, vamos começar com a tarefa número 1, chamando o ponto de extremidade de pesquisa e armazenando os resultados da pesquisa. A primeira coisa que precisamos é onde procurar piadas de pai. Sorte para nós, a mesma API que estávamos usando para buscar uma piada pai aleatória também fornece um endpoint de pesquisa. De acordo com os documentos da API, precisamos passar o termo de pesquisa como um prem de consulta e retornaremos os resultados da pesquisa no seguinte formato. Vou em frente e copiar o URL para o ponto final da pesquisa. Em vez de criar um novo método para pesquisa, vou redefinir o método de busca de piada existente. Começarei alterando o URL de busca do ponto de extremidade de pesquisa do usuário que copiei dos documentos. Em seguida, vamos remover a chamada SetState por agora e apenas substituí-lo por uma chamada Eu vou registrar os resultados da pesquisa para o console. Em seguida, quero renomear o método FetchJoke para algo mais apropriado. Desde FetchJoke é atualmente referenciado a vários lugares, Eu vou fazer uso de caixas de proteção código alterar todas as ocorrências opção. Isso me permite substituir rapidamente todas as referências de FetchJoke com as piadas de pesquisa de novos nomes. Por último, vou fazer uma limpeza e remover alguns itens não utilizados que não estão mais sendo usados. Certo, vamos dar uma olhada no console e ver o que está acontecendo. Você pode realmente ver que já temos uma resposta registrada no console. Isso ocorre porque as piadas pesquisadas estão sendo chamadas
no método de ciclo de vida ComponentDidMount, assim como o FetchJoke era. Você pode estar pensando, como estamos recebendo resultados de
pesquisa se nós realmente não entramos como pesquisa ainda? Se aparecermos novamente nas docks da API, você poderá ver que, se nenhum termo de pesquisa for válido, padrão será retornar todas as piadas. Isto é o que está acontecendo no nosso caso. Outra coisa que você pode notar é que uma resposta de pesquisa contém mais do que apenas resultados de pesquisa. No nosso caso, estamos realmente interessados apenas no conjunto de piadas contidas na propriedade de resultados. Por essa razão, vou simplificar as coisas e armazenar os resultados diretamente em uma variável chamada piadas. Agora podemos ver que estamos recebendo uma série de piadas de volta, o que será mais fácil de trabalhar. Agora que sabemos que nossas chamadas de pesquisa funcionam, precisamos de um lugar para armazenar os resultados. Para isso, vamos criar uma nova variável de estado chamada piadas e defini-la igual a uma matriz vazia para começar. Em seguida, vamos substituir nossa chamada console.log por uma chamada para setState e passar as piadas retornadas da pesquisa. Enquanto estamos nisso, vamos em frente e adicionar de volta nosso estado IsFetchingJoke e defini-lo como falso. Também assim como antes, devemos definir isFetchingJoke como true quando SearchJokes é chamado pela primeira vez. Por último, vamos remover a variável de estado de piada antiga já que ela não está mais sendo usada. Só para verificar se nossos resultados de pesquisa estão sendo armazenados, eu vou ir em frente e renderizá-los para a tela. Como piadas é uma matriz, nós normalmente iterar sobre os dados para renderizá-lo. Por enquanto, eu só vou chamar ToString nele para que possamos ver algo aparecer na tela. Lá vamos nós, nossos resultados de pesquisa estão mostrando, embora eles estão parecendo bem feios agora. Não se preocupe, estará dando esses resultados de pesquisa em um TLC muito necessário em breve. Por agora, porém, eu acho que isso cuida da tarefa número 1. Eu vou ir em frente e riscar isso. Vês, isso não é satisfatório? Estamos fazendo alguns progressos aqui. Em seguida, é salvar a pesquisa do usuário no estado.
9. Crie um aplicativo: salve consultas de pesquisa: Vamos começar a tarefa número 2 em nossa lista, salvando a pesquisa do usuário no estado do aplicativo. Antes de mergulharmos, quero falar um pouco mais sobre formas e reagir. Formulários são um caso único como elementos de formulário HTML
nativos já gerenciaram seu próprio estado interno. Por exemplo, se eu digitar em nossa entrada de pesquisa, o valor está sendo armazenado no estado interno de entradas. Isso levanta a questão, onde o estado do formulário deve ser gerenciado em um aplicativo React, no estado de reação, ou no estado interno de entradas. No nosso caso, vamos estar gerenciando nosso valor de entrada de pesquisa usando estado de reação. A primeira coisa que precisamos é de um lugar para armazenar o valor das entradas de pesquisa. Para isso, vou criar uma nova variável de estado chamada termo de pesquisa, e defini-la igual a uma string vazia por padrão. Em seguida, precisamos de uma maneira de ter um termo de pesquisa ficar em sincronia com o que os usuários realmente digitando na entrada de pesquisa. Para isso, podemos usar as entradas no evento Change, que como o nome diz, aciona cada vez que o valor da entrada muda. Para teste rápido, eu só vou adicionar uma função
manipulador de eventos que registra o valor de entradas. O manipulador de eventos é passado em um objeto de evento, que é muito semelhante a um evento JavaScript nativo. Mas é o que React chama de eventos sintéticos. Este evento sintético é um wrapper em torno do evento nativo do navegador. Isso segue a mesma interface, mas funciona de forma idêntica em todos os navegadores. Com isso sendo dito, podemos acessar o valor da entrada em event.target.value. Agora, se você abrir o console, e começar a digitar, podemos ver que o valor de entradas está sendo desconectado à medida que digitamos. Em seguida, vamos remover a função de teste e criar um método adequado no manipulador de alterações chamado na alteração de pesquisa. Neste método, tomaremos o event.target.value e definiremos nosso estado de termos de pesquisa igual a ele. Em seguida, atualize as entradas de pesquisa no evento Alterar para chamar o nosso novo manipulador de alterações de pesquisa. Vamos tentar digitar algo em nossa busca. Parece que nossa alteração está criando um erro que ocorre quando você digita na entrada de pesquisa. Se você se lembrar, vimos esse mesmo erro antes, e ele está ocorrendo porque esquecemos de vincular o manipulador de pesquisa no componente. Esta é a mesma coisa que tivemos que fazer para o manipulador OnTellJoke antes. Vamos em frente e consertar isso. Perfeito. Agora digitando na entrada de pesquisa funciona sem erro. Apenas para garantir que um termo de pesquisa está sendo salvo, vamos renderizá-lo temporariamente para a tela. Agora podemos ver que, à medida que digitamos, o valor do termo de pesquisa também está sendo atualizado, com o termo de pesquisa sendo salvo com sucesso no estado do aplicativo, podemos considerar essa tarefa completa. próximo é acionar em uma pesquisa para acontecer no envio do formulário.
10. Crie um aplicativo: envie Serach: Em seguida, na nossa lista de tarefas é a tarefa número 3, tendo um surto acionado quando o formulário de pesquisa é enviado. Até este ponto é formulário de pesquisa não faz muito. Se clicarmos em Pesquisar, parece que nada acontece. Vamos em frente e mudar isso. A primeira coisa que precisamos fazer é capturar quando o formulário está sendo enviado. Para fazer isso, vamos usar os formulários OnSubmit evento, que precisaremos passar nossa função manipulador de eventos para. Vou criar um novo método chamado OnSearchSubmit que toma o evento de formulário como um parâmetro e, por enquanto, apenas sair, mas o formulário está sendo enviado. Também não se esqueça de vincular este novo manipulador para o componente ou vamos receber o mesmo erro que fizemos da última vez que esquecemos de vincular nosso método manipulador. Em seguida, vamos adicionar nosso novo manipulador para o evento OnSubmit para este formulário de pesquisa, vamos ver o que acontece agora se clicarmos em Pesquisar para enviar o formulário. Estranho, não estamos vendo nada aparecer em nosso console. Acontece que o formulário está fazendo exatamente o que deveria fazer. Ele está enviando o formulário como uma solicitação GET para a página, o
que faz com que a página seja atualizada e a constante seja limpa. É por isso que não estamos vendo nosso formulário enviar mensagem sendo desconectado. No nosso caso, porém, queremos gerenciar o envio do formulário e reagir. A primeira coisa que teremos de fazer é impedir que o formulário seja enviado. Impedir envio de formulário usará a passagem de objeto de evento para o manipulador e chamará o método preventDefult nele. Uma vez no local, ele impedirá que o comportamento padrão de formulários no envio ocorra. Agora, quando enviamos o formulário, podemos ver que formulários enviar está sendo registrado no console como esperado, e a página não está mais sendo atualizada. As coisas estão bem, mas a nossa forma ainda não está à procura de nada. Vamos em frente e substituir o console.log e, em vez disso, chamar o nosso método de pesquisa de piadas. Antes de irmos em frente e testar isso, vou remover nossa chamada de piadas de pesquisa de ComponentDidMount, pois não é mais necessário. Agora vamos em frente e enviar o formulário e ver o que acontece. Parece que o formulário está funcionando, mas ainda estamos apenas renderizando a versão estringified do array de piadas, que infelizmente não fornece muitos detalhes sobre os resultados da pesquisa. Por enquanto vou registrar as piadas retornadas da busca para o console. Desta forma, podemos ter uma ideia melhor do que realmente está acontecendo. Vou em frente e enviar duas buscas de piadas diferentes. Um para gatos e outro para cães. Vamos dar uma olhada mais de perto na primeira piada retornada da nossa busca de gatos. “ Estou cansado de seguir meus sonhos. Eu só vou perguntar a eles para onde eles estão indo e me encontrar com eles mais tarde”. Agora que foi uma escolha para adicionar
piada, não tem muito a ver com gatos. Vamos dar uma olhada na primeira piada em nossa busca de cães. Não só essa piada não tem nada a ver com cachorros, é a mesma piada que fizemos na busca do gato também. Este é realmente o comportamento esperado, pois
ainda não estamos enviando a string de pesquisa para a API. Portanto, todas as chamadas de busca retornarão as mesmas listas de piadas padrão, que é o que está acontecendo com nossa busca de cães e gatos agora. Vamos refrescar nossa memória e dar uma olhada nos cães de novo. Se você lembrar, o ponto de extremidade de pesquisa requer que você passe o termo de pesquisa como um parâmetro de seqüência de caracteres de consulta, o que eles demonstram aqui. No nosso caso, estávamos substituindo o valor hipster por um valor de estado de termo de pesquisa. Agora, nessa atualização, vamos atualizar a chamada de piadas de pesquisa para usar esse parâmetro de string de consulta. Primeiro vou atualizar a URL para usar a sintaxe literal do modelo JavaScript. Desta forma, posso facilmente incorporar o nosso valor do termo de pesquisa como uma expressão. Agora que temos isso no lugar, vamos tentar fazer algumas buscas novamente, como antes, vou começar procurando por piadas de gato e então tentar uma segunda busca por piadas de cachorro. Já podemos ver que cada pesquisa retornou um número diferente de resultados, o que já é um bom sinal de que algo mudou. Agora vamos dar uma olhada mais de perto na primeira piada da busca do gato, “Apague o gato, eu não sabia que estava pegando fogo.” Isso soa mais sobre o assunto do que da última vez. Agora vamos ver a primeira piada de cachorro. “ Por que o cowboy tinha um cachorro salsicha? Alguém lhe disse para arranjar um cãozinho comprido”. Sinta-se livre para tirar um momento para se compor depois daquela jóia. Vamos continuar. As coisas estão começando a se juntar. Agora temos um formulário funcional que envia com sucesso a pesquisa na submissão, que realmente cuida da tarefa número 3 em nossa lista. Em seguida, darei aos resultados da pesquisa de renderização uma atenção muito necessária.
11. Crie um aplicativo: renderizar os resultados de pesquisa: Em seguida, em uma lista de tarefas é o teste Número 4. Renderização no resultado da pesquisa. Como está, os resultados da pesquisa não são muito para olhar. Nem conseguimos ver as piadas reais da busca, o que não é muito útil. Para exibir corretamente uma lista de resultados no JSX, você precisará iterar através da coleção. A primeira coisa que eu vou fazer é mudar a tag p em uma tag lista não ordenada. Isso faz mais sentido, já que estamos fazendo uma lista de piadas. Já que as piadas são uma matriz, posso chamar o mapa nele. Para cada item na matriz, eu vou retornar um elemento LI. Dentro de cada elemento
LI, vou inserir a cópia da piada real. Se você se lembrar, um objeto de piada contém um identificador exclusivo sob a prop ID e, em seguida, a piada real em si sob o prop de trabalho. No nosso caso, queremos apenas fazer a piada. Ok, agora vamos tentar uma busca e ver o que acontece. - Legal. Parece que as nossas piadas estão finalmente a render-se. Mas eu posso ver que nosso registro de console tem um aviso nele. React normalmente lhe dará um aviso
no console se você estiver fazendo algo que não gosta. Neste caso, ele está nos dizendo que cada criança em um array ou iterador deve ter um prop de chave exclusivo e até mesmo fornece um link para obter mais informações, se quisermos. Parece que React está nos dizendo que precisamos dar a cada elemento LI um adereço de chave único. Este atributo chave permite que o React identifique itens individuais na coleção. Isso se torna especialmente importante ao classificar coleções grandes, pois permite reagir apenas para renderizar os itens que mudam em vez de renderizar novamente a lista inteira. A parte importante é que cada valor chave seja único. No nosso caso, podemos usar o ID prop de nossos dados de piada. Agora que cada piada na lista tem uma chave única suporte nosso aviso de reação desapareceu. Você pode ter notado que ainda estamos configurando que está buscando estado de piada de antes, mas não estamos mais usando isso. Assim como antes, eu gostaria de mostrar uma mensagem enquanto os resultados da pesquisa estão sendo obtidos, podemos usar a mesma abordagem da última vez e usar uma expressão condicional. Se for verdade buscar piada, exiba a mensagem procurando por piadas. Se a busca da piada for falsa, renderize os resultados da pesquisa. Abaixo disso funcionará. Eu não sou um grande fã desta formatação como eu acho que é mais difícil de ler. Às vezes você pode achar útil quebrar a renderização em funções menores. Eu vou em frente e fazer exatamente isso com um elemento de lista de piadas. Vou começar criando um novo método chamado renderizar piadas e fazer com que retorne a lista não ordenada das piadas. Agora eu posso atualizar minha expressão condicional para usar piadas
renderizadas no lugar desse elemento da lista de piadas, que eu acho que torna a condição muito mais fácil de ler. Para testar a mensagem de carregamento, eu a lançarei na velocidade de conexão novamente usando o DevTools do Chrome. Agora, quando enviamos a pesquisa, recebemos uma mensagem de pesquisa muito mais fácil de usar para piadas enquanto as piadas estão sendo buscadas. Isso cuida de renderizar resultados de pesquisa em nossa lista de tarefas. Próximo passo é ligar para, Estou me sentindo engraçado botão.
12. Crie um aplicativo: estou sentindo engraçada: Estamos fazendo um grande progresso em nossas listas de tarefas e estamos prontos para começar a ligar o botão “Estou me sentindo engraçado”. Este botão é um jogo no botão
“I'm Feeling Lucky” do Google , que quando clicado, traz o usuário para o primeiro resultado da pesquisa por padrão. No nosso caso, estará retornando uma piada de “Pai Solteiro”. Para o botão “Estou me sentindo engraçado”, vamos redefinir o objetivo do botão “Diga-me uma piada” existente. Vamos começar remarcando o botão com “I'm Feeling Funny”. Agora, se clicarmos no botão e ele chama o método “On Tell Joke”, que então chama o “Método de pesquisa de piadas”. Como não temos um termo de pesquisa inserido agora, ele apenas retorna a lista de piadas padrão. Então, como conseguimos o, “Estou Sentindo Botão da Sorte” para retornar apenas uma única piada. Se voltarmos para os documentos da API para as piadas do pai, você verá que o endpoint de pesquisa tem outros parâmetros de string de consulta disponíveis. Olhando aqui podemos ver que há um parâmetro limite que permite controlar a quantidade de resultados retornados. Atualmente estamos usando o padrão que irá retornar 20 piadas. Vamos em frente e adicionar limite à nossa chamada de pesquisa e defini-lo igual a um. Quando eu clico no botão “I'm Feeling Funny”, estamos recebendo apenas uma piada de volta. Já que codificamos o limite de um, nosso formulário de pesquisa só retorna uma piada, que não é o que queremos. Precisamos de uma maneira de passar piadas de busca o limite que queremos usar. Para fazer isso, vou adicionar um parâmetro de limite e dar-lhe um valor padrão de 20. Desta forma de parâmetros Novoalign passados, ainda
temos um valor válido que podemos usar. Agora vamos atualizar o URL de pesquisa para usar o novo parâmetro limite como um valor. Vamos dar a nossa busca outra tentativa. Parece que a busca está funcionando novamente, mas estamos de volta à estaca zero com nosso botão “Estou sentindo sorte”, pois ele ainda está retornando várias piadas. Para corrigir isso, precisamos atualizar os botões manipulador On-click. Primeiro vou remover o método “On Tell Joke”. Uma vez que tudo este método faz é chamar o método “Pesquisar piadas”. Podemos removê-lo e simplesmente chamar “Pesquisar piadas” diretamente em vez disso. Agora que eu removi “On Tell Joke”, eu também preciso remover o método de ligação no construtor também. Agora podemos ir em frente e adicionar o “Pesquisar Chamada de piadas” para o manipulador on-click. Nesse caso, porém, eu quero passar um valor de um para o parâmetro limite. Se eu quiser passar o parâmetro piadas de pesquisa, não
posso fazer com que o evento On-click o chame diretamente. Em vez disso, usarei uma função [inaudível], que me permitirá chamar piadas de pesquisa com parâmetros e, neste caso, um limite de um. Agora, quando eu clico no botão “Estou sentindo sorte”, eu recebo uma piada de foca como esperado. Se eu enviar uma pesquisa, ainda vejo várias piadas retornarem como esperado. Acho que estamos bem para riscar o botão “Estou me sentindo engraçado” da nossa lista de tarefas. Próxima etapa: Criando os componentes do formulário de pesquisa.
13. Crie um aplicativo: componente do Searchform: A próxima etapa em uma lista de tarefas é criar um componente SearchForm. Até agora temos feito todo o nosso trabalho em um único componente ou componente de aplicativo. No React, você não quer que um único componente seja manipulado demais. Assim como as funções, se você achar que um componente está fazendo demais, geralmente
é um bom sinal de que ele pode ser dividido em componentes menores. Tendo um olhar para o nosso componente de aplicativo, acho que o SearchForm é um bom candidato para ser dividido em seu próprio componente. Vamos começar criando um novo arquivo chamado SearchForm.js. Por enquanto, o SearchForm será um componente funcional bare-bones que retorna um cada um contendo uma saudação. Este será um espaço reservado temporário até que movamos o elemento de formulário sobre o componente de aplicativo. Também é um padrão comum que a exportação padrão de um arquivo de componente seja o próprio componente, que é o padrão que seguiremos. Para usar o componente SearchForm do aplicativo, você precisará importá-lo como faria com qualquer outro arquivo. Em seguida, vamos adicionar o componente ao método de renderização e ver se ele funciona. - Legal. Podemos ver nossa renderização de componentes, mas não está fazendo muito. Vamos copiar o SearchForm do aplicativo para o arquivo do componente SearchForm. Uma vez que salvamos isso, podemos esperar para ver alguns erros, já que ainda estamos referindo métodos endstate a partir do componente aplicativo. O primeiro erro que obtemos é 'não é possível ler a propriedade OnSearchSubmit of indefined'. Isso ocorre porque o método onSearchSubmit está fazendo referência ao nosso componente de aplicativo. Então, como acessamos métodos no componente aplicativo a partir do componente SearchForm? Aqui é onde adereços são seus amigos. Vamos voltar ao componente do aplicativo e adicionar um novo prop a este SearchForm chamado onFormSubmit. O que faremos é passar a referência de aplicativos para OnSearchSubmit como o valor da prop OnFormSubmit. Agora, de volta em SearchForm, em vez de chamar OnSearchSubmit, acessaremos os componentes adereços e usaremos o novo prop OnFormSubmit, que não se esqueça é uma referência ao método OnSearchSubmit no aplicativo. Agora, quando salvamos, podemos ver que o erro OnSearchSubmit desapareceu, mas agora temos um novo erro, mas desta vez ele está reclamando sobre OnSearchChange ser indefinido. Então, no formulário, vou começar adicionando um novo prop ao SearchForm chamado
OnSearchValueChange e, em seguida, passar a referência de aplicativos para OnSearchChange como um valor. Em seguida, de volta em nosso SearchForm, chamaremos o prop OnSearchValueChange no lugar do OnSearchChange. Agora, quando salvamos, o erro é substituído por um novo reclamando que o estado é indefinido. altura, já devias saber a rotina. Vou adicionar um novo prop ao SearchForm chamado IsSearching e passar o estado IsFetchingJoke como o valor. Enquanto eu estou nisso, eu vou pluralizar o nome para isFetchingJokes já que agora estamos pegando mais de uma piada. De volta em SearchForm, substitua a referência a isFetchingJoke com IsSearching prop. Além disso, acabei de notar que só desativamos o botão Eu estou sentindo sorte quando IsSearching é verdade. Devíamos fazer o mesmo com o botão de busca. Então vamos adicionar o prop de desativação lá também. Bem, parece que corrigimos os erros, mas posso ver que ainda estamos fazendo referência ao SearchJokes no botão I'm Feeling Funny. Se eu ir em frente e clicar nele, você pode ver que recebemos um erro, 'não é possível ler propriedade SearchJokes de indefinido'. Esta parece ser a nossa última referência restante para o componente do aplicativo, então vamos em frente e corrigi-lo. Vou começar copiando o valor OnClick existente, pois vamos precisar dele. Então eu vou adicionar mais um prop ao SearchForm chamado OnSingleSearchClick e para o valor, eu vou colar no valor OnClick que eu copiei antes. Agora, em SearchForm, usaremos a prop OnSingleSearchClick. Agora, vamos salvar e ver como as coisas estão parecendo. Parece que o botão I'm Feeling Funny está funcionando novamente, e a busca também está boa. Agora que tudo está funcionando novamente, vamos dar uma olhada mais de perto no novo componente que criamos. O método de renderização parece muito mais arrumado agora com toda a lógica formal escondida no componente SearchForm. Outro bônus adicional é que o componente SearchForm não lida mais com nenhum dado por conta própria. Todas as referências aos dados são tratadas através de adereços e callbacks. Deve ter notado que tenho mantido meus nomes de adereços o mais genéricos possível. Não ter seus nomes de adereços fortemente acoplados aos seus dados, torna seu componente mais versátil. Dessa forma, se acabarmos mudando nosso aplicativo para pesquisar algo além de piadas, não
teremos que renomear nenhum dos nossos adereços do SearchForm. Este tipo de componente é às vezes referido como um componente idiota ou de apresentação na Comunidade React. Esses componentes não se importam com o tipo de dados que estão sendo passados para eles, eles só estão preocupados com a aparência deles. Isso cria um bom ponto de que é muito mais fácil de reutilizar. Por exemplo, se quiséssemos que nosso SearchForm procurasse algo diferente de piadas, só
precisamos atualizar os adereços e callbacks para passar dados
diferentes em vez de criar um outro componente inteiro. Com o componente SearchForm completo, podemos riscar esse da nossa lista. Em seguida, vamos fazer algumas Refatoração e Limpeza.
14. Crie um aplicativo: refatoração e limpeza e: Estamos quase no final da nossa lista de tarefas, e agora é hora de refatorar e limpar. Você pode pensar em refatoração como limpeza para o seu código. É sempre bom dar um passo atrás depois de desenvolver um novo recurso para ver se há áreas em que você pode fazer melhorias. Dito isto, gostaria de fazer algumas melhorias relacionadas ao novo componente do formulário de pesquisa. Se olharmos para os métodos on search change e on search Submit, ambos
esperavam um objeto de evento como um parâmetro. Agora que estamos passando esses métodos como adereços para formulário de pesquisa, nem sempre
podemos garantir que eles serão chamados com um evento. Vou começar com o método Submit on search
e remover o parâmetro event, bem como o padrão de prevenção de ponto de evento [inaudível]. Agora em busca Enviar não está realmente fazendo nada além de chamar piadas de pesquisa, que nos permite simplificar um pouco as coisas. Agora, o formulário de passagem, envie o método de submissão na pesquisa. Eu só vou passar o método de busca de piadas diretamente. O que na verdade significa que podemos
nos livrar da pesquisa Submeter e a lógica de ligação no construtor com ele também. Além disso, não se esqueça de vincular piadas de pesquisa ao componente. Agora que ele está sendo chamado como um manipulador de eventos. Ao remover o manipulador Submeter na pesquisa, também
removemos o método PreventDefault que estava impedindo nosso formulário de Enviar. Se enviarmos uma pesquisa agora, você poderá ver que a página está sendo atualizada novamente. Porque os formulários padrão Enviar comportamentos não são mais impedidos. Para corrigir esse problema, agora trataremos do evento de
envio de formulário a partir do componente de formulário de pesquisa. A primeira coisa que eu preciso fazer é adicionar um retorno explícito no componente. Desta forma, posso criar uma nova função chamada onsubmit, que usarei para o manipulador de eventos onsubmit agora. Isso significa que a função onsubmit receberá o objeto evento como seu primeiro parâmetro e agora que temos acesso ao objeto evento, podemos impedir a submissão de formulário usando o mesmo método antes e depois que nós apenas fazer uma chamada para no formulário Enviar prop. Agora, quando enviamos uma pesquisa, o formulário está funcionando como esperado novamente. Mas tendo o formulário de pesquisa lidar com seus próprios eventos de formulário, nós o dissociamos ainda mais do componente do aplicativo. Em seguida, vamos melhorar o método de alteração na pesquisa,
bem como remover o parâmetro de objeto de evento. Em vez disso, ele vai tornar as coisas mais genéricas e alterar o parâmetro exceto o valor diretamente em vez de puxá-lo do objeto de evento. Agora, a partir do formulário de pesquisa é para a passagem do evento, vai puxar o valor do evento e passar isso junto em vez. Isso novamente ajuda a desacoplar o componente de formulário de pesquisa do componente de aplicativo e quanto mais componente dissociado for, mais fácil é reutilizar. Só para demonstrar que vou duplicar o nosso formulário de pesquisa, mas neste formulário só vou voltar às piadas quando uma pesquisa for enviada. Essa mudança se torna muito fácil modificando um único adereço e o segundo componente do formulário. Agora, quando eu procuro com o primeiro formulário, ele funciona da mesma forma que antes. Quando eu procuro com o segundo formulário, eu só recebo os dois resultados de pesquisa de volta. Ambos os formulários estão usando o mesmo componente, mas podem funcionar independentemente um do outro. Este pode não ser o exemplo mais prático, mas espero que demonstre os benefícios do uso de componentes DOM. Antes de terminarmos, quero fazer alguns itens de limpeza rápida. Primeiro é se livrar do rótulo do termo de pesquisa que estávamos usando para testar mais cedo, já que não precisamos mais dele. Última coisa que eu vou remover o log de pontos do console
estávamos usando o teste os resultados da piada anteriormente. Agora deixe-me arrumar um pouco. Estamos prontos para avançar para a nossa tarefa final: estilizar o aplicativo.
15. Crie um aplicativo: adicionar estilos: Neste ponto, eu estou muito feliz com a forma como o aplicativo está funcionando, mas não tão feliz com a forma como ele parece, que leva bem para o nosso próximo assunto; styling seu aplicativo React. Quando se trata de adicionar estilos no React, há muitos sabores diferentes para escolher. Há CSS velho simples, pré-processadores
CSS como Sass, módulos
CSS, CSS in-jazz e muitos mais que eu poderia tocar. A questão é que não há solução certa ou errada, pois realmente se resume ao que funciona para você. Minha recomendação para você é experimentar por conta própria e ver com qual desses, se houver, você realmente gosta de trabalhar. Enquanto isso, eu só vou rever alguns conceitos básicos de uso simples CSS antigo em React. Você já deve ter notado que nosso aplicativo contém os estilos dot css já. Isso foi criado pelo CodeSandbox quando começamos. Se abrirmos esse arquivo, você verá que temos um único nome de classe dot App com algumas regras CSS básicas. Não estamos usando essa classe agora, mas podemos facilmente adicioná-la a um elemento adicionando o nome da classe prop e definindo o valor igual ao nome da classe. É realmente, não é diferente de como você faria isso com HTML simples e CSS. A grande diferença aqui é que você está usando o nome da classe prop, em vez do atributo class. Agora, quando salvamos, você pode ver que nosso aplicativo está usando esses novos estilos como nosso formulário agora está centrado na página. Uma outra coisa que você deve ter notado é a linha de estilo de importação dot css na parte superior do nosso componente de aplicativo. Como foi o nosso arquivo JS importando um arquivo CSS? Você pode perguntar. Se você não está familiarizado com empacotadores como webpack, isso pode parecer muito estranho. No nosso caso, temos sorte como webpack já foi criado para nós pelo CodeSandbox e webpack poderia ser honestamente um curso inteiro por conta própria. Por enquanto, saiba que uma vez que um arquivo CSS é importado, esses estilos serão adicionados ao seu aplicativo e estarão prontos para uso. Além disso, você não está restrito a manter todo o seu CSS em um único arquivo. Na verdade, é comum que cada componente tenha seu próprio arquivo CSS dedicado. Com isso dito, vamos em frente e criar um arquivo CSS para o nosso componente de formulário de pesquisa. Eu estou indo para ir em frente e nomear este arquivo formulário de busca de ponto CSS. Também é prática comum para um componente e seu arquivo CSS ter o mesmo nome. Isso não só ajuda com a organização no sistema de arquivos, mas também deixa muito claro que esses estilos pertencem a esse componente. Agora que temos nosso arquivo CSS pronto, eu vou ir em frente e puxar em alguns estilos pré-assados que eu criei anteriormente. Em seguida, vamos importar o formulário de pesquisa CSS em nosso arquivo componente e salvar. Se tivermos um olhar mais atento no formulário de pesquisa CSS, você pode ver que há uma classe formulário de pesquisa dentro. Eu estou indo para ir em frente e adicionar esta classe para o elemento raiz no componente formulário de pesquisa. Além disso, eu vou ir em frente e embrulhar nossos botões em uma div como é necessário apenas para fazer alguns desses estilos funcionar. Agora, quando eu salvo, você pode ver que as coisas estão realmente começando a ficar melhor agora que nós temos um pouco de estilo. É importante ter cuidado ao dividir CSS em arquivos
separados que você não está ultrapassando estilos em outro arquivo. Mesmo que o arquivo css do formulário de pesquisa esteja sendo importado apenas no componente, esse componente também está sendo importado em um aplicativo. Um aplicativo também tem seu próprio arquivo CSS. Para demonstrar, eu vou ir em frente e adicionar uma cor de fundo para o elemento corpo no formulário de pesquisa ponto CSS. Em seguida, adicionarei uma cor de fundo para o corpo e o aplicativo CSS, bem como salvar. Como você pode ver, os estilos de corpo e app dot css substituíram os estilos de corpo e pesquisa formulário dot CSS. Então você tem que ter cuidado ao trabalhar com vários arquivos. Se você tiver uma chance, eu recomendo dar uma olhada nos módulos
CSS, pois você não precisa se preocupar em substituir outras classes CSS, pois mantém seus estilos de componentes locais para o componente em que você está trabalhando. Ok, para terminar, eu vou trapacear um pouco e trazer o resto dos estilos acabados para o componente App também. Por último, mas não menos importante, nosso lindo pai piadas edição logotipo Google. Lá você tem, seu próprio pai totalmente funcional piadas motor de busca built-in reagir. Com o estilo completo, que cuida do último item da nossa lista de tarefas. Próximo passo vamos fazer uma exploração de alto nível sobre como React funciona nos bastidores.
16. Como trabalhar: renderização no DOMs: Ao trabalhar no React, é fácil esquecer que seu aplicativo
ainda está sendo executado em um arquivo HTML antigo. No nosso caso, esse é o arquivo HTML de índice que o CodeSandbox criou para nós. Se eu abri e dar uma olhada, você pode ver que não há muita marcação HTML no corpo além desta div vazia. Só para provar que esta é realmente a página que estamos renderizando no navegador, eu vou ir em frente e adicionar uma mensagem personalizada e salvar. Uma vez que eu salvar, você pode ver que esta cópia agora aparece junto com a mensagem hello CodeSandbox, que está vindo do nosso componente de aplicativo. Mas não vemos a cópia do componente do aplicativo em nenhum lugar neste arquivo HTML, então como é que estamos vendo isso no navegador? A razão é que React está manipulando a renderização do componente aplicativo para nós e ele gerencia a criação dos elementos DOM que são exibidos no navegador. Mas como os elementos criados pelo React acabaram no arquivo HTML de índice? Reagir requer que você forneça um nó DOM para renderizar, que é referido como o nó DOM raiz. No nosso caso, o nó DOM raiz é essa div vazia que apontei anteriormente, que convenientemente o suficiente tem um atributo ID igual a root. Se voltarmos ao Adicionar Componente, você verá que estamos fazendo uma chamada para a renderização de ponto ReactDom. pacote ReactDom é separado de React e contém métodos que são surpresa, específicos para lidar com o DOM. Se você acabar trabalhando com renderização do lado do servidor, você vai se encontrar trabalhando com o ReactDom também. Agora de volta ao nosso componente aplicativo quando ReactDom ponto render é chamado seu passado o componente e uma referência ao elemento DOM raiz. ReactDom renderização geralmente é chamado apenas uma vez, e uma vez que é chamado tudo dentro do elemento DOM raiz agora é gerenciado pelo React. Só para demonstrar, vou abrir meu Chrome DevTools e inspecionar o DOM. Aqui eu posso ver o elemento div raiz que estava vazio em nosso arquivo HTML. Mas agora, em vez de estar vazio, contém os elementos
que estão sendo gerenciados pelo React. Agora que sabemos como o React se torna no DOM, vamos dar uma olhada em como ele lida com atualizações de renderização.
17. Como funciona: renderizar as atualizações de renderização: Mais do que provável se você perguntar a alguém por que usar React, eles podem dizer porque é rápido. Enquanto React é super eficiente quando se trata de renderizar atualizações, ele realmente não ajuda a responder por que é rápido? Eu queria cavar em algumas características principais que contribuem para Reagir velocidade. Número um, Reagir apenas atualiza o que é necessário. Você vê em Reagir quando um componente é atualizado, ele garante que ele só aplica o que foi alterado para o DOM. Para demonstrar, eu tenho um exemplo simples que consiste em componente chamado botão. Toda vez que o botão é clicado, ele incrementa um estado de contagem de cliques por um e renderiza essa contagem como parte do rótulo dos botões. Vou abrir este exemplo em uma janela autônoma do navegador para que eu possa acessar melhor minhas ferramentas de desenvolvimento do Chrome. Na guia elementos vou selecionar o botão e expandido para que possamos ver todo o conteúdo do elemento. Agora, quando eu clicar no botão, você pode ver o valor do número está mudando e ele também está sendo realçado cada vez que ele muda. Este destaque representa o que está sendo alterado no DOM. Podemos ver que o nosso rótulo de contagem de botões e cliques permanecem intocados. Apenas o valor numérico está sendo atualizado. Agora eu tenho o mesmo exemplo em JavaScript simples sem reagir desta vez. Vou selecionar o elemento em ferramentas de desenvolvimento e expandido como antes. Por esta altura, quando eu clicar no botão, você pode ver que os botões inteiros estão sendo destacados desta vez. Isto significa que, em vez de apenas o número a ser alterado, o botão inteiro está a ser alterado no DOM. Embora este exemplo seja simples, imagine como essas atualizações eficientes se tornam importantes quando seu aplicativo cresce em tamanho e tem centenas de elementos. Outra coisa que React fará é atualizações de estado de lote juntos. Se você acionar várias alterações de estado de um manipulador de ventilação reativo ou método de ciclo de vida, ele irá agrupar todas essas alterações em uma única renderização. Por exemplo, vamos fingir que eu tenho um aplicativo React simples que consiste em um componente de entrada de pesquisa,
um componente de lista de resultados, e um componente de paginação. Quando eu clico no botão de pesquisa, ele aciona uma mudança de estado em todos os três componentes. Agora, dadas as alterações de 3 estados, você normalmente esperaria ver três renderizações. Mas esse não é o caso aqui. Na verdade, é apenas a renderização única. Isso ocorre porque todas as três atualizações de estado foram agrupadas em lote e React é capaz fazer isso porque todas as três atualizações se originaram do mesmo evento de clique. Agora, para o último item na lista, os elementos
React são apenas objetos simples. Ao contrário dos elementos DOM do navegador, Reagir elementos são objetos e barato para criar. Na verdade, todo o aplicativo React é representado por um objeto que é mantido na memória. Por exemplo, vamos tomar esta marcação HTML simples para um formulário de login com uma entrada de nome de usuário e senha. Em React, isso seria representado por um objeto que se parece com isso. Você pode ver que cada um dos elementos HTML são representados por um objeto e reagem. Em seguida, quando ocorre uma alteração, reagir irá comparar a versão anterior do objeto com a versão atualizada
do objeto e fazer atualizações com base nas diferenças e, em seguida, renderizar as alterações de volta para o DOM. Bem, esta foi uma quebra muito simplificada do complexo conceito de DOM virtual do React. Espero que tenha dado alguma ideia sobre o que acontece sob o capô em React. Estes são apenas alguns dos grandes recursos que contribuem para reagir velocidade e eficiência. Embora esses itens possam não ser necessários para aprender o React, acredito que ter pelo menos uma compreensão de alto nível desses recursos ajudará você a se tornar um desenvolvedor do React melhor.
18. Conclusão: envolvendo: Antes de terminar as coisas na turma, queria dar a vocês uma visão geral do projeto da classe. O projeto envolve pegar um aplicativo de piada de pesquisa [inaudível] que acabamos de criar e adicionar algumas melhorias a ele. Essas melhorias estão descritas na descrição do projeto, mas também vou orientá-las agora. Cada um desses novos recursos se baseará no que você já aprendeu ao longo do curso. O primeiro item na lista é mover a lista de resultados da pesquisa para o seu próprio arquivo de componente. Em seguida, você precisará adicionar uma mensagem “nenhum resultado encontrado” quando uma pesquisa não retornar piadas. Depois disso, adicione um botão que limpe os resultados da pesquisa e o termo da pesquisa. Em seguida, adicione uma entrada de seleção que permite
ao usuário selecionar a quantidade de piadas retornadas da pesquisa. Finalmente, se você estiver pronto para um desafio, atualize a entrada de pesquisa para que os resultados sejam atualizados à medida que você digita. Para adicionar seu trabalho, você precisará fazer uma cópia do meu CodeSandbox primeiro, bifurcá-lo. Para transferir meu projeto, basta abrir o URL do projeto CodeSandbox incluído na descrição da classe e clicar no quarto botão na navegação principal. Ignore o aviso como eu só estou recebendo isso como eu sou o proprietário do projeto que está sendo bifurcado. Agora eu tenho uma cópia do projeto que eu posso renomear e fazer quaisquer alterações que eu gosto independentemente da versão original. Se você tiver alguma dúvida ou feedback, sinta-se à vontade para entrar em contato comigo no Twitter ou deixar um comentário aqui na turma. Se você gostou da aula, sinta-se livre para espalhar a palavra e compartilhar o link. Também me procure na mídia. Se você tem uma chance como eu também postar regularmente, eles são sobre Reagir. Obrigado novamente por se juntar a mim e espero vê-lo em futuras aulas também.
Ryan Johnson, Full-Stack Developer, React, Node.js
