Transcrições
1. Introdução: Você sabe qual é a pergunta de
entrevista de front-end mais popular? É, você pode construir um contador? Hoje? Explicaremos tudo o que você precisa saber para criar seu
próprio projeto usando o React, incluindo como
criar esse contador para que você possa ser o melhor em sua
próxima entrevista de emprego. Oi, meu nome é Zoe. Sou engenheiro de software
e ex-professor que adora educar outras pessoas
sobre como aprender a programar Eu criei muitos sites
e aplicativos da web usando React, CSS, HTML e outras tecnologias. Ao final deste curso, você poderá fazer isso sozinho. Vamos começar.
2. Projeto do curso: Projeto de classe. O projeto dessa
classe é criar um contador totalmente funcional
usando o react para isso. Você precisará
acessar um computador e
um editor de código, como o
Visual Studio Code. Você também deve ter
algum conhecimento do script
Java, bem
como do HTML e do CSS. Deixarei links
para todos os ativos e recursos de que você precisará
na guia Projeto e
recursos abaixo.
3. Por que Reagir?: Por que React? O React
foi desenvolvido no Facebook e lançado
ao público em 2013. Ele foi criado
inicialmente para lidar com recarregamentos
e atualizações
ineficientes de páginas que, na época, exigiam que todo
o Dom ou modelo de objeto de
documento fosse
repintado. A cada atualização, React corrige esse problema criando o que eles
chamavam de Do virtual, uma representação do Dom
na memória Isso permitiu que o React
atualizasse apenas os aspectos ou componentes do Dom que foram alterados, e não
a página inteira, resultando em melhor desempenho. O React mudou o jogo
no espaço de desenvolvimento web e
ainda é uma das bibliotecas mais
populares do mercado Devido ao uso de componentes, os desenvolvedores agora podem escrever código
modular com muito mais facilidade, o que lhes permite desenvolver muito mais eficiência
e eficácia. Outras estruturas populares que geralmente
são comparadas ao react incluem View e Angular
4. Componentes: Componentes. Os componentes são trechos de
código
reutilizáveis que reagem aproveitam para
manter sua Pense neles como
os blocos de construção que os desenvolvedores usam
para criar aplicativos. Um componente é um trecho de código
independente, reutilizável, que encapsula sua própria funcionalidade,
estado e estrutura Esses componentes podem ser
considerados como uma combinação de HTML e Javascript ou JS, que é usada no react. Cada componente pode
ter seu próprio estado, que representa dados que
podem mudar com o tempo, e um conjunto de propriedades
ou adereços que
permitem que os componentes principais transmitam dados aos
filhos Assim como o HTML tem elementos
dentro de outros elementos, React tem componentes
dentro de outros componentes. Esses componentes internos são considerados filhos
dos componentes externos.
5. Adereços e estado: Adereços e estado. Para realmente entender e usar o
react ao máximo, precisamos falar sobre
estado e propriedades Ou como são chamados de adereços. Vamos dar uma olhada em um componente básico. Esses componentes estão realmente em sua base, apenas funções. Eles podem receber argumentos, modificar variáveis e retornar um valor. Simplificando, podemos pensar props como os argumentos
que são passados para nossa função quando
ela é chamada de estado como as variáveis locais que só existem em
nosso determinado componente Expandiremos essa
definição posteriormente, mas é importante
entender como ela funciona primeiro.
6. Crie aplicativo React: Crie um aplicativo de reação. Há várias maneiras de
configurar um aplicativo de reação. Neste curso, abordaremos os
mais populares. A forma original de
configurar um aplicativo react era usando create
react app, ou CRA Como o React é uma biblioteca e não uma estrutura totalmente
funcional, para que funcione totalmente, ele precisa de várias outras
peças, como ferramentas de construção. aplicativo Create React também foi desenvolvido pelo Facebook
para remover grande parte dessa
complexidade e
transformá-la em um comando simples, mas
poderoso. Ao usar o aplicativo create react, você economizará
horas de dor de cabeça ao tentar iniciar um novo projeto de reação
pela primeira vez. Para executar create react
app, basta digitar px, create react app, seguido pelo nome do seu aplicativo
no terminal e pressionar enter. Depois de alguns minutos,
você estará pronto para começar. Você pode executar o comando
sozinho em seu terminal se quiser ver como é a aparência do aplicativo
create react. Nós o usaremos
em nosso projeto. Usar o aplicativo create react é bom para um projeto pequeno
como esse contador. No entanto, eu o alertaria
contra usá-lo para construir algo maior, pois ele não está
mais sendo mantido.
7. Bootstrap: Bootstrap. O Bootstrap é um dos frameworks CSS mais populares para o desenvolvimento de sites
responsivos uso de
código aberto é gratuito e é especialmente
bom para criar
primeiras páginas da Web para dispositivos móveis que reajam. O Bootstrap é baseado em
HTML, CSS e Javascript. E, na verdade, fornece um conjunto de componentes,
modelos
e estilos de
pré-design que permitem aos desenvolvedores criar
e iterar rapidamente Ele também foi projetado para
funcionar em vários navegadores, o que é ótimo para
garantir que seu aplicativo exibido corretamente
para todos os públicos Usaremos o
React Bootstrap para acelerar nosso
processo de desenvolvimento hoje
8. React Setup: Tudo bem, agora que
entendemos um
pouco mais sobre o React, vamos criar
nosso próprio contador. Como mencionei, é
muito importante entender como construir, pois é uma daquelas coisas que
você ouvirá em algumas entrevistas de emprego
e se decidir
seguir a carreira
de desenvolvedor front-end. Então, vamos começar.
Então, aqui você pode ver como seria o
contador acabado. Não há
muitos estilos e designs, mas é bastante simples. Mas em termos de
lógica, é funcional. O que eles querem que você faça é criar
algo que exiba um número e
permita que você o adicione. Assim, você pode adicionar um ou subtrair um dele. Muito simples, mas
vamos ver como podemos
realmente construir isso. Se passarmos para o
Visual Studio Code, a primeira coisa que
vamos querer fazer é criar um aplicativo de reação. Como mencionei antes,
podemos usar o aplicativo create react para este projeto,
pois ele é muito pequeno. Mas, no futuro,
falaremos sobre o uso de soluções como. Em seguida,
vamos começar nosso aplicativo Create React, PX
createapp E então vamos
chamá-lo de Counter. Isso vai levar alguns
minutos para começar. Vamos voltar para
ele quando terminar de ser construído. Agora que nosso aplicativo create react finalmente
criou a pasta, vamos
começar a trabalhar com ela. Vou mudar o diretório
para a pasta. E aí está,
estamos com ela aberta. Tudo bem, então vamos
abrir isso
e ver com que tipo de arquivos e pastas
estamos trabalhando. Então, no lado esquerdo, você verá que
temos várias pastas
diferentes que
foram basicamente criadas para nós como resultado do
uso do aplicativo Create React. Como mencionei antes, o React é uma biblioteca e
não uma estrutura. Portanto, é necessário instalar várias
outras ferramentas de construção para que funcione corretamente. Então, se dermos uma
olhada no Read me, isso nos dirá um pouco mais sobre como
trabalhar com o aplicativo create, react, o que podemos
fazer, quais comandos podemos executar. Se você já trabalhou com o
NPM ou o Note no passado, deve estar familiarizado com
alguns desses comandos Caso contrário, vamos resumir
que você deve estar familiarizado. Se você já trabalhou com o Node ou o
NPM no passado, você deve estar familiarizado com
alguns desses comandos Vamos examinar
aqueles que criam ofertas de aplicativos de
reação para nós. Portanto, temos o NPM Start , que executará o aplicativo
no modo de desenvolvimento no host
local 3.000 O host local 3.000 é o local de
escolha para executar Isso se
baseia apenas em uma configuração definida pela equipe de
criação e reação. Então você tem outro
comando chamado NPM test. Isso permite que você execute
testes em seu aplicativo de reação, e vamos dar uma olhada
nesses testes em um segundo. Também temos uma fatura de produção que criará uma versão otimizada
de produção. Temos o eject, que eu
pessoalmente não usei muito, e depois temos
um pouco mais
sobre o que é o react, como ele foi construído, como usá-lo corretamente,
coisas assim Então, eu encorajo você a
ler isso. Leia-me se você ainda não o
leu antes pois há algumas informações
que podem ser úteis. Porém, como mencionei, o aplicativo create react não está sendo mantido
no futuro. Portanto, as informações podem ou não estar atualizadas no
momento em que você assistir a este vídeo. Tudo bem, agora vamos dar
uma olhada no pacote Json. Então, novamente, se você já trabalhou
com o NPM antes ou com o Jason, talvez esteja familiarizado, pelo menos, com o formato e
entenda que esse é um daqueles arquivos
necessários quando você está criando um
projeto Portanto, o arquivo Json dot do pacote contém vários elementos
diferentes que nos ajudarão a identificar nosso projeto e entender com
quais versões estamos trabalhando das diferentes dependências que
instalamos Então, no topo, temos o
nome do nosso contador de pacotes. Sempre podemos mudar
isso. Se não
gostarmos , temos
nossa própria versão,
portanto, apenas nossa primeira versão,
seja ela privada ou não. E então as
dependências que
temos que já estão instaladas Portanto, temos a biblioteca de testes, temos react, react, etc Agora temos nossos roteiros.
Os scripts que acabamos de ver
no arquivo leia-me. Hum, então, basicamente, o que
eles fizeram aqui foi criar um script
que
é o NPM start Mas o que o NPM start realmente
executa é o início dos scripts de reação. Portanto, é uma pequena redução de
um comando mais longo apenas para nossa
conveniência como desenvolvedores Em seguida, temos algumas configurações de
link ES. O link Es vem pré-instalado
com o aplicativo create react. Temos uma lista dos navegadores com
os quais queremos trabalhar na produção e também no desenvolvimento. É
basicamente isso. O pacote Jason não é muito elaborado no aplicativo
create react Há algumas coisas importantes com
as quais precisamos trabalhar. Mas ele crescerá dependendo do tamanho
do projeto em que
você está trabalhando. E à medida que instalamos coisas novas. Falando em instalar
coisas novas enquanto estamos aqui, vamos
instalar, reagir, o Bootstrap e ver como
ele atualiza nossos pacotes Voltando
ao terminal aqui, digitaremos NPM install E vamos
instalar dois pacotes. Um é o react bootstrap e o outro é
apenas o próprio bootstrap Esses dois pacotes juntos nos
permitirão trabalhar com a funcionalidade completa
do Bootstrap que está disponível
para nós no react Vamos apenas sentar aqui e
esperar que isso seja instalado. Acredito que precisamos de mais uma
linha de código, então deixe-me pegá-la
na documentação do Bootstraps Se formos ao Bootstrap React
e clicarmos em Getting Started, também queremos importar, sim, veja aqui embaixo onde
diz folhas de estilo e CSS Queremos importar isso
em um de nossos arquivos. À medida que descemos,
vou copiar isso. E então, quando chegarmos a esse arquivo, vou me
certificar de importá-lo. Tudo bem, voltando
para o nosso pacote A Jason. Você verá aqui que duas
coisas mudaram. Então, instalamos em
nossas dependências inferiores, temos o bootstrap, que
foi E reaja com bootstrap. Então, esses são os dois que
acabamos de pedir para serem instalados. Acabamos de, você sabe, fazer
a solicitação no NPM e eles nos
instalaram corretamente Como você pode ver
na parte inferior aqui, também
existem várias
vulnerabilidades. Isso se deve, novamente, ao fato o projeto não
estar sendo mantido. Mas, como mencionei, é uma
das maneiras mais fáceis se você está apenas tentando começar a usar o
react e aprender a usá-lo. Criar um aplicativo de reação é, na
verdade, uma maneira
simples de aprender a usar o Eu
diria que há uma
curva de
aprendizado muito menor em relação a algumas
das outras opções que
estão disponíveis atualmente. Tudo bem, então vamos em frente e vamos dar uma olhada
nos outros arquivos aqui. Portanto, temos um Git ignore. Portanto, se você trabalhou
com o Git antes, saberá que o Git é
um sistema de controle de versão que permite salvar
seus arquivos e salvar versões
diferentes dos seus
arquivos, caso precise
reverter ou voltar para reverter ou voltar para uma versão anterior de um
arquivo com o qual está Mas em nosso Git ignore, veremos todos os
arquivos nas pastas que basicamente
predefinimos para não serem confirmados quando estamos
enviando nosso código,
potencialmente para o Github,
então nossos módulos de nó E isso porque os módulos de nós são uma pasta muito grande que inclui muitos dados de várias dependências
que, se fôssemos enviar, se adicionássemos ao nosso Github os
aumentariam e aumentariam Então, nós realmente não
queremos insistir nisso. Isso é algo que
pode ser instalado com base no pacote
nas versões do Jason toda vez que
clonamos nosso arquivo novamente ou outra
pessoa clona nosso Também temos algumas
outras peças, incluindo a cobertura nas pastas de
compilação e alguns arquivos diversos. Tudo bem, vamos falar
sobre as coisas boas. Então, temos duas pastas aqui, temos pública e
temos fonte. Então, público é onde todos os
nossos tipos de imagens e coisas que estão
sendo mostradas atualmente em
nosso aplicativo, nossa vida no momento. Bem como nosso arquivo HTML de
pontos de índice. E então temos nossa fonte, aquela que também contém vários outros arquivos. Então, vamos mergulhar nesses dois. E o que podemos fazer para
realmente ter uma boa ideia de como esses dois
funcionam é iniciar nosso aplicativo. Então, lembre-se de que mencionei
no pacote dotson foul havia um script
chamado Vamos executar isso no terminal e ver
o que ele traz. Então, digitaremos NPM Start. Vamos pressionar Enter e nos
dar um segundo. Inicie o servidor de desenvolvimento. E certo, bom,
estamos prontos para ir. Temos esse ícone de reação
giratório. E então diz Editar
aplicativos de origem e é seguro carregar. E então aprenda o React que está
vinculado à documentação do S. Incrível. Então, pelo menos, sabemos
que nosso aplicativo está funcionando. Então, vamos voltar aos nossos arquivos e agora ver onde todas
essas coisas estão morando. E o que vamos
fazer deixar essa janela do terminal
aberta apenas
para que nosso aplicativo continue sendo executado em segundo plano. Então, se formos para nossa pasta
pública, normalmente em HTML, todas as nossas informações são
armazenadas no arquivo HTML. Então, quando abrimos isso, esse
era um projeto HTML normal, esperávamos encontrar
todas essas informações, todas as coisas que acabamos de
ver nesse arquivo. No entanto, quando olhamos
aqui, não está lá. Temos nosso
elemento principal aqui e
muitos metadados aqui. Coisas
que podemos mudar. Podemos mudar o nome
e o conteúdo aqui. No entanto, se rolarmos para
baixo até o corpo, você notará que todas as informações que
acabamos
de ter em nosso
navegador não estão disponíveis. Você verá que no corpo
há apenas dois elementos. O sem script, que
diz às pessoas que não têm o Java Script habilitado que elas precisam dele
para executá-lo. E então há uma
div singular que está vazia, o que é muito interessante De onde
realmente vem nosso projeto? Então, se tivermos um div
completamente vazio, isso realmente não faz sentido porque, se
voltarmos para a página, veremos que temos todas
essas informações Quer dizer, temos texto, temos um ícone giratório e
um link Obviamente, isso tem que
ser morar em algum lugar. Certo, bem, se
voltarmos para nossa divisão, vamos dar uma olhada nela de perto Vemos que ele tem
o ID de root. Então isso significa que talvez
em algum lugar ao longo do caminho isso seja direcionado e essa
raiz signifique alguma coisa, certo? Então, se você assistiu
ao vídeo anterior
que eu tenho sobre Java Script,
você entenderá isso. Você provavelmente se lembrará
disso. Você provavelmente se lembrará de que existe um método
chamado get element by ID. Então, vamos passar para o nosso arquivo JS de pontos
de índice à esquerda aqui.
E dê uma olhada nisso. Então, olhando em nosso arquivo JS de pontos de
índice, temos um
monte de importações. Então, agora estamos no mundo do
Javascript, certo? Nós meio que fizemos a transição do HTML para o Javascript completo. E quando vemos, mas não é exatamente Javascript como
estamos acostumados,
quero dizer, você vê que
temos esse tipo de elemento div,
como estruturas Então, vamos analisar linha
por linha e ver
o que é tudo. Então, importamos o
react do React. Novamente, trabalhando com o NPM. Instalamos esse
pacote chamado React, essa biblioteca chamada React, e agora importamos a
instância do react a partir dele. Temos import react, import index CSS, que
é apenas o arquivo CSS. Importe o aplicativo, que é
outro arquivo aqui embaixo. E, em seguida, importe o
relatório web vitals. Onde eu
realmente quero começar a prestar atenção é na linha
sete aqui, onde
diz que raiz constante é igual a
reação dom dot create route Então, dentro dessa rota de criação
, diz document dot get
element by ID route. Obviamente, algo está acontecendo
aqui em que obtemos esse elemento raiz, obtemos esse
div e agora estamos criando algum tipo de rota
com base nesse elemento Então, fizemos isso aqui, criamos uma
rota na reação e criamos essa rota
variável, certo? Então dizemos renderização raiz. E dentro disso, agora estamos
renderizando react no modo estrito. E então, dentro disso, estamos renderizando esse aplicativo,
essa coisa de aplicativo Agora, com base no que
lemos antes, aplicativo era apenas um arquivo Javascript. Mas ambos estão em estrutura estranha de
tipo de elemento, certo? Então essa é essa coisa de JSX sobre a qual
estávamos falando. Esse Javascript meio que se
misturou com HTML, o que nos permite escrever
HTML dentro do Javascript. Então, vamos continuar
e mergulhar nos aplicativos. Os aplicativos parecem um arquivo Javascript bastante
normal, mas tem aquela
combinação JS HTML e Javascript em andamento. Agora, como você pode ver, é apenas uma
função normal chamada app e retorna
esse elemento HTML. É realmente um mestre
brilhante lá. O que isso é,
na verdade, é um componente. Aquelas coisas sobre as quais estávamos
falando antes. Componentes que têm
sua própria tela e sua lógica e tudo o está
contido aqui
para nós é esse componente. Agora, se examinarmos
linha por linha, veremos que ele importa
um logotipo do logo dog, mas esse logotipo do dot logo, dot Sg, que está na
mesma pasta de origem Ele importa aplicativos, que
é esse arquivo de estilo. E então ele cria essa
função chamada app
e, na
parte inferior, ele a exporta. E então, nesse arquivo
JS de índice, ele o importa. Certo? Em aplicativos, retornamos um div com vários elementos
nele, dentro dele Portanto, ele tem um div com uma classe
MpPHaderMageLogoitCedeMageLogoI'm Pensando que esse é o logotipo do
React qual estávamos
falando antes. E então temos aquela
linha de código que vimos. Nós temos essa linha
de texto, nós vimos. Diz isso, forneça slash app
dogs e salve para recarregar. E então,
aqui embaixo, está escrito Aprenda, reaja. Agora, se voltarmos aqui, isso é exatamente o que temos. Temos nosso logotipo, temos aplicativos de edição e
origem para sentar e salvar para recarregar. E nós
aprendemos, reagimos. Então, finalmente encontramos o lugar onde todas essas informações
estavam vivas, certo? Então, entendendo, reaja
um pouco mais. E entendendo a estrutura, temos esse arquivo JS maior com pontos de
índice, que na verdade contém todas as
nossas informações, certo? Basicamente, é onde
tudo se acumula. Mas então, dentro do índice, temos aplicativos de aplicativos, que é onde
a informação, a lógica que vamos
realmente exibir, realmente vive. E agora, antes que eu
esqueça quem somos em cães de índice para que
nosso bootstrap de reação seja executado, se você se lembra, temos que
ter certeza de que, na parte superior
do arquivo,
importamos o bootstrap Legal. Devemos estar
prontos para ir agora. Tudo bem, agora
que entendemos um pouco melhor a estrutura do
nosso aplicativo, vamos continuar
trabalhando com aplicativos e começar a criar
nossos componentes.
9. Criando um contador: Esse é um estilo antigo de
componente que vamos transformar no que
chamamos de componente de
função de seta. Os componentes da função de seta são apenas uma maneira mais
sintaticamente limpa escrever e criar Isso não é estritamente
necessário, mas vou fazer
isso porque é uma boa prática saber como fazer isso e
mostrar como fazer isso. Se prosseguirmos, vamos realmente
mudar isso. Então, diz que aplicativo constante
é igual a seta, e então
vamos clicar Tudo bem, e
acabamos de
transformá-lo em um componente de
função de seta. Incrível. Já estamos um
pouco mais modernos que quando
analisamos nosso aplicativo aqui. Quando analisamos os aplicativos de origem, realmente não precisamos muito
disso ou de nada disso. Para ser honesto, o que
vamos construir é que
o contador é, na verdade apenas uma página singular
com alguns elementos. Podemos nos livrar da maior parte disso. Acho que uma coisa que
podemos fazer aqui é limpar
tudo o
que está no aplicativo aqui. Manteremos o documento geral do aplicativo, mas apagaremos tudo o que não estamos
usando e o salvaremos. Tudo bem, agora
temos nosso aplicativo vazio, e se você ver,
temos apenas uma página em branco simples, que é exatamente como
queremos começar. Se você estivesse iniciando um novo projeto de
criação de aplicativo de reação, essas são as etapas que eu
recomendo que você siga, certo? Você pega seu projeto,
o limpa, instala os
pacotes de que precisa
e, em seguida,
começa a trabalhar com ele. Tudo bem, então, daqui
para frente, há algumas outras melhores
práticas que queremos empregar
ao
trabalhar com o React Então, primeiro de tudo, dentro da nossa pasta de origem, vamos criar outra
pasta chamada Components. Agora, a razão pela qual
criamos esse componente é porque, especialmente quando você está trabalhando em projetos maiores, a
acumular o número de arquivos menores começaremos
a
acumular o número de arquivos menores muito rapidamente E isso pode se tornar
muito complicado se
eles estiverem todos
na sua pasta de E não é a melhor ideia tê-los todos em todos os
lugares. Torna-se muito difícil depurar e definir o que
você está procurando melhor prática é criar pastas
separadas com base nos recursos em que
você está trabalhando e nas funcionalidades
em
que está trabalhando, apenas para manter as coisas limpas e simples em nossa pasta de
componentes. Agora vamos continuar e criar alguns dos outros componentes que precisaremos Se eu escrever, clicar e
criar um novo arquivo, sabemos que estamos
criando um contador. Então, vamos começar
criando um que diz counter counter Jsx enter Incrível, criamos
nosso primeiro arquivo JSX. Agora, a próxima coisa que
vamos querer
fazer é criar nosso componente
contador. Agora, há duas
maneiras de fazer isso. Existem formas de preenchimento automático de fazer
isso, ou existem
maneiras manuais de fazer isso Portanto, se você tiver a
extensão instalada, poderá digitar R, A FCE, que é S sete
trechos, ES sete, e react snippets é a extensão que você deseja instalar se
quiser trabalhar com isso E o que isso fará
é, na verdade, criar esse componente para nós. Então, vamos pressionar Enter para que possamos ver como
é. Em seguida, vamos
construí-lo manualmente. Então, se pressionarmos Enter,
você verá que ele realmente faz todo o trabalho
pesado para nós. Importa, reage por nós. Ele cria um elemento
chamado contador. Ele retorna um
elemento entre colchetes já com um Dave. E diz contra-atacado e já o
exporta para nós. Essa é uma maneira realmente incrível
de fazer tudo manualmente. Vamos usar esse para
fazer tudo sem
precisar digitá-lo manualmente. Livrar-se disso.
Se vamos fazer isso sozinhos novamente, apenas
impactamos a partir do React. E então iríamos em frente
e criaríamos um contador. Além disso, outra coisa sobre os componentes de
reação é que a primeira letra
do componente deve
sempre estar em maiúscula Isso é apenas parte da
sintaxe necessária. contador de contras é igual à
nossa função
e, em seguida, retornaremos
um div que diz Tudo bem, e isso é
tudo que temos agora. E então também vamos
exportar o contador padrão. Tudo bem, então vamos
lá. Estamos prontos para ir. Temos nosso contador,
temos nosso
componente de contador criado e, você sabe, está pronto, mas se verificarmos nossa página, ele não vai
aparecer, certo? Porque ninguém sabe que
o contador existe. No momento, o contador
está apenas em sua própria pasta de componentes, em seu próprio pequeno arquivo, e não está fazendo nada. Então, para que outras
pessoas saibam que ele existe, precisamos
importá-lo para qual arquivo? Nosso arquivo do aplicativo, porque o arquivo do aplicativo é um arquivo exibido atualmente. Então, vamos voltar ao aplicativo e depois vamos importar
o contador. E uma
coisa muito legal é que
também podemos importar automaticamente o código do
VS alguma inteligência e , portanto, se digitarmos com o. O colchete angular aberto e, em seguida, o nome
do componente, na verdade, solicitarão que
apenas o importemos do
nosso suporte de componentes Portanto, é muito
conveniente se tivermos que importar alguns
componentes diferentes ou, você sabe, sem
precisar
importá-los e
trazê-los para o arquivo. É uma
maneira muito
rápida e inteligente de trabalhar com isso. E a última coisa que
queremos lembrar agora é que, se nosso contador ou componente
não tiver filhos, queremos
fechá-lo imediatamente. Queremos que seja um elemento de fechamento
automático, então assim, topos assim. Perfeito. Então, mas como é ter
filhos? Certo, como você pode ver agora, Counter é um aplicativo que
não tem filhos, mas se quiséssemos que fosse um
aplicativo que acolhesse crianças, sempre
poderíamos colocá-lo como um elemento HTML normal e depois adicionar os
filhos a ele. Certo. E
funcionaria da mesma forma. Então essa é essa
combinação divertida de Java script e HTML em ação Fantástico, então vamos nos livrar
do segundo contador. Na verdade, não
precisamos disso, e vamos começar a trabalhar em nosso aplicativo a
partir de nossos arquivos de contador. Por enquanto, meio que terminamos
com os aplicativos. Não precisamos do nosso índice ML no momento, a menos que queiramos alterar alguns dos metadados Vamos nos
concentrar apenas nos contadores. Tudo bem, então
temos nosso balcão. Temos um div, e tudo o
que ele diz é contador. E se olharmos
nossa página aqui, veremos que ela
diz contador, então sabemos que a conectamos
corretamente Agora, se voltarmos à nossa página, temos que pensar sobre quais eram
os elementos
que estavam no design inicial, certo? Tínhamos esse número, tínhamos um botão vermelho
em um botão verde, ou um sinal de mais e um menos, mas eles não precisam ser vermelhos e verdes Então, queremos ter certeza de que
construímos todos esses
elementos, certo? Tudo bem, então vamos começar
a construir isso. Então, dentro dessa div que
eu quero criar, vamos fazer dela
uma H para o número Então, vamos começar do
zero e salvar isso. E, abaixo disso,
vamos criar os dois botões. E em vez de fazer isso manualmente
ou estilizá-lo manualmente, podemos realmente usar o
React Bootstrap para estilizá-los um
pouco mais Usaremos o botão
do React Bootstrap. Como você pode ver, ele também
nos fornece a inteligência e solicita que a importemos automaticamente.
Vamos adicionar esse botão. Podemos usar o que é chamado de
variante . O bootstrap do React nos
dá uma opção, uma propriedade chamada variance Com essas variantes, podemos
simplesmente usar um nome, como uma propriedade que
foi predefinida, muito parecido com atributos em HTML, e dar a ela alguns estilos
específicos Como resultado, há duas variantes com as quais vamos
querer trabalhar hoje. Uma delas se chama Sucesso.
Vamos encerrar isso. E então esse será
nosso botão mais um. E então o
outro vai ser, eu acredito que é perigoso, mas sim, vamos pegar nosso botão, copiá-lo e colá-lo. Nós vamos, acho que
isso se chama perigo. Vamos digitar o segundo e alterá-lo para menos um Então, vamos dar uma
olhada em nossa página e ver se ela funcionou bem. Já estamos quase 90% do
caminho certo com o design. Então, temos nosso
botão verde, que é mais um, e nosso botão vermelho, que é menos um.
Muito bom ir. Mas mais uma coisa que
eu quero corrigir um pouco é exatamente
onde isso é exibido. Porque, no momento, está muito no
topo da página. Na verdade, não é ideal para
visualização adequada. Então, queremos apenas empurrá-lo para baixo na
página só para tatuar. Então, a maneira como vamos
fazer isso de novo é apenas arrumar
nossos estilos, certo? Então, se formos ao nosso
contra-elemento aqui, podemos realmente
adicionar uma margem na parte superior dele apenas para nos
dar um
pouco mais de espaço. Portanto, podemos criar um arquivo CSS para adicionar
todos os nossos estilos ou usar CSS embutido Agora, CSS embutido é algo que basicamente
é o que diz Isso nos permite
escrever literalmente os estilos
na mesma linha. Isso nos permite
escrever literalmente os estilos na mesma linha
do nosso HTML, o que eu acho muito legal. Você pode ter usado isso
uma ou duas vezes antes em seu HTML, mas é uma
prática muito mais comum quando você está trabalhando com um React porque tudo é muito mais compartimentado Então, se quisermos adicionar nosso
estilo aqui ao nosso Div, basta digitar o estilo STYLE E então usaríamos
dois colchetes para usar a dinâmica do
estilo embutido Então, gostaríamos de adicionar alguma margem. Vamos dar a ele uma margem
geral de quatro Ram. E guarde isso, se
voltarmos aqui, ótimo, temos um
pouco mais de raiz. Vou adicionar um
pouco mais de espaçamento talvez à direita do
nosso botão verde aqui E então vamos fazer isso, vamos adicionar mesma propriedade de estilo
e vamos fazer margem, certo. Novamente, outra
coisa muito interessante sobre o react, certo? Em HTML, você
digitaria margem, certo? Mas como estamos
trabalhando com Javascript, na verdade
queremos
usar camel case Então, não haverá hífens quando estivermos digitando
nosso CSS Vamos fazer margem, certo? Em seguida, digitaremos novamente em uma string qual deve ser nossa
margem. Vou guardar isso.
Perfeito. Tudo bem, e temos um
pouco de espaço lá. E então vamos adicionar um
pequeno espaço abaixo do cabeçalho. E devemos ser bons. Então, faremos a mesma coisa mais uma vez. Estilo, margem igual, parte inferior. E então vamos colocar duas rampas. Damos uma olhada lá, acho que estamos muito bem em usar o estilo Sempre poderíamos fazer
muito mais com isso, mas normalmente em uma entrevista, eles não
perguntarão muito mais em termos de estilo
além desse ponto Então, vamos entrar na
lógica e começar a
trabalhar para realmente tornar isso
um contador funcional. Tudo bem, então a próxima coisa
que vamos querer fazer agora que terminamos com
nossos estilos básicos é começar a trabalhar em
nossa lógica real, nossa exibição de lógica
e coisas assim Então, se você se lembra,
temos esse zero, certo? E quando apertamos o
botão de mais e o botão de menos, queremos que algo aconteça Agora, se nos lembrarmos
do nosso script Java, exigimos que uma função
onclick ou, você sabe, algo seja
passado
nessa função onclick para que algo
realmente seja executado, certo Então, vamos começar a
implementar isso de forma reativa. Então, como mencionei antes, react tem essa coisa
chamada estado, certo? Portanto, o estado é literalmente o status dado de
qualquer coisa que esteja acontecendo. O estado determinado do que está
acontecendo dentro de um componente. Portanto, há uma maneira de
realmente interagir com o estado que usaremos
especificamente com o react. O conceito de estado é um
pouco abstrato no início, mas se tornará muito mais
concreto à medida que trabalharmos com ele. Então, a primeira coisa
que eu quero fazer, certo, em vez de ter esse
número zero, queremos ser um
pouco mais dinâmicos, certo? Então, vou
criar uma variável chamada contagem igual Então, vamos começar
substituindo isso por contagem, certo? Agradável e simples. Nada muito louco até agora. E então, se verificarmos aqui, a
contagem permaneceu zero. Bom, dê uma olhada. Mas agora que mudamos
a contagem para ser uma variável, agora
podemos trabalhar com ela de forma um pouco mais
dinâmica, certo? Então, como mencionei, queremos usar essa
coisa chamada estado. O React também tem essa coisa
chamada ganchos, certo? Os ganchos foram introduzidos para reagir alguns anos, a fim facilitar o uso do estado em
um elemento Antes disso, o estado não
podia realmente ser usado em um elemento da maneira
que o usamos hoje. Então, o que queremos
fazer para
usar o estado é
realmente importar um gancho. E o que é um gancho é, na verdade,
apenas um componente simples. Isso é o que o hook
é, na verdade, é apenas outra função
que é meio que extraída e estamos apenas importando sua funcionalidade
para trabalhar com Tudo bem, então vamos importar o estado
usado do react. Ótimo, agora
que usamos o estado, vamos modificar
a maneira como
trabalhamos com a contagem de
variáveis, certo? E eu sei que você está pensando
bem, não poderíamos simplesmente chamar uma função e fazer isso com um clique
e etc., etc Há uma maneira melhor de
fazer isso com a reação quando estamos usando o estado em que há
a própria variável real. Depois, há um conjunto, algo
chamado setter, que nos
permite definir o
valor dessa variável Agora, a maneira de
inicializarmos
isso é por meio de um pouco
de sintaxe específica Colocamos nossa variável
real entre colchetes, ou
seja, nossa variável inicializada e, em seguida, colocamos um
comum ao lado dela E então, a
convenção típica da forma como
escrevemos isso é colocar set na frente do nome
da variável. Se o nome da nossa variável for count, usaremos set count
para que esse seja nosso setter E então vamos trazer o estado de
uso quando se
trata do ato, o próprio
número inicializado Digitaremos e usaremos state e envolveremos isso nessa chamada de função. Agora você vê que
nossa contagem de conjuntos
mudou para uma
função real em si. Ele será usado para nos
ajudar a definir o estado. Ele se conecta ao gancho de estado U e nos permite habilitar
essa funcionalidade E então temos nosso
estado U trabalhando e
fazendo sua mágica lá. Então, você verá que a
contagem de conjuntos
ainda está sublinhada porque, na verdade,
ainda não a usamos Mas vamos usá-lo
em apenas um segundo. E se voltarmos à nossa
página aqui, veremos que nada
mudou até agora porque o valor inicializado não
mudou, certo? Mantivemos nosso zero lá e está funcionando
perfeitamente bem. Agora, o que queremos
fazer é usar esse setter para que possamos atualizar o valor da
contagem dinamicamente, certo Toda vez que pressionamos o botão mais um ou o botão
menos um, queremos que o zero
aumente ou diminua. Certo? Então, a forma como vamos fazer isso é usando uma função
onclick Será
uma função
onclick muito simples e
direta que levará 2
segundos para ser implementada Portanto, se acessarmos nosso botão, como
sabemos, os botões
têm a funcionalidade de clique. Então, digitaremos nosso com um
clique e, como novamente é
Javascript, camel case é igual a colchetes. E então vamos
chamar nossa contagem de conjuntos. Então, vamos usar nossos parênteses e
chamaremos E vamos passar
para os parênteses da
contagem de conjuntos o valor
que queremos que seja agora,
porque temos a variável
inicial O que conta o valor
é o estado, certo? Então, a contagem é aquela parte do
estado, qualquer que
seja seu valor, seja um, 100 ou 10.000, esse é o estado
atual. Então, podemos realmente usar isso em nossa
função de adição aqui. Então, vamos pegar
o valor da contagem, o que quer que seja no momento, e vamos
adicionar um a ele. Então, muito simples. Vamos apenas
digitar dentro da contagem definida, vamos fazer a contagem
e, em seguida, adicionar um e salvar. E essa é toda a nossa
função que nos
permitirá adicionar
um à nossa contagem. Então, se experimentarmos
e clicarmos mais um, podemos ver
que está funcionando. Então, podemos simplesmente
adicionar, adicionar, e
tudo está configurado. Realmente, construir um balcão não
é tão difícil. Trata-se apenas de entender a lógica, as ferramentas
e as etapas por trás delas. Se voltarmos aqui, podemos simplesmente
copiar isso, movê-lo para o nosso segundo botão e alterar a contagem
para subtrair um Ainda estamos nos referindo à
mesma variável de contagem, mas quando alguém
clica no menos um, queremos que ele subtraia Certo? Então, muito
simples Se formos até aqui, subtrair,
subtrair , esse botão agora
está funcionando e temos todo o nosso
contador configurado, e
fácil. Legal. Essa é realmente uma forma
de primeiro nível de configurar o contador. Certo? Seu entrevistador pode pedir que você configure o
contador dessa forma Inicialmente, isso pode
ser uma versão 1. Mas se você já fez uma
entrevista técnica ou se ainda não o fez, às vezes o que
os entrevistadores pedem que você faça é que, depois de fazer a primeira
versão de alguma coisa, eles pedem que você
repita e crie
uma segunda Então, vamos entrar em uma possível
iteração desse elemento. Então, falaremos sobre
filhos de elementos, como ele passa adereços, como estado é aprovado
e coisas assim Então, vamos para a
próxima versão, duas.
10. Refinando o contador: Tudo bem, agora que temos nossa versão
um completamente definida, vamos construir essa versão dois. Então, na segunda versão, o que seu
entrevistador pode perguntar a você, o que alguém pode pedir que você
faça em uma segunda versão é, na verdade, separar isso em
diferentes componentes Porque uma das
coisas
bonitas do react é que ele permite
que você seja realmente modular com as coisas com as quais está trabalhando. E você não precisa
ter tudo aninhado em um arquivo HTML super
longo, certo? Na verdade, você pode
dividir as coisas em componentes menores. Como vimos ao passar o
contador para o aplicativo,
podemos, na verdade, acessar as coisas como se estivessem
todas em um arquivo grande, mas mantendo-as
separadas e organizadas Então, vamos detalhar um pouco mais sobre
como podemos fazer isso. Uma coisa que poderíamos realmente destacar
é a seção de
botões, certo? O gatilho real
do componente. Se quiséssemos criar um novo arquivo aqui, poderíamos chamá-lo de
botões e pressionar Enter. E se eu fosse. Então, o que eu
quero fazer com o botão agora é simplesmente abstrair essa lógica em seu próprio componente e
deixá-la viva lá. Então,
o que vamos
fazer aqui é criar primeiro nosso componente de
botão,
depois pegar as informações do botão
dos contadores e simplesmente
copiá-las para o. E nós só vamos copiar um e eu vou te mostrar o
porquê em um segundo. Vamos colá-lo aqui. Precisamos reimportar
isso aqui. E isso é apenas um botão
de reimportação do Maria Bootstrap para
garantir que ele ainda funcione Então, a próxima coisa, botão igual a botão, já foi
declarada é
igual a botão, já foi
declarada. Precisamos
mudar o nome. Vamos chamar isso,
vamos chamar esse botão
personalizado. Ele mudará para um botão personalizado. Sim, então essa é outra coisa importante
que você provavelmente já encontrou
no script de trabalho antes de
se certificar de que suas
variáveis são exclusivas. Tudo bem, ótimo. Você notará que estamos recebendo um erro com a contagem
definida aqui. Vamos trabalhar nisso
em apenas 1 segundo. Por enquanto, acomode-se para que isso não nos dê um erro de compilação. Tudo bem, legal. Pronto para ir. Então, o que queremos fazer com nosso botão personalizado
agora é basicamente criá-lo de uma
forma um pouco mais modular, certo? Portanto, pode ser um
botão de sucesso ou um botão de perigo. Pode estar à esquerda ou
à direita. Pode ser um sinal positivo ou negativo. Então, queremos
implementá-lo de uma forma que não
precisemos usá-lo apenas
para o caso de uso de um botão. Queremos implementá-lo de forma que, se tivéssemos um botão de mais e um menos e um botão de
multiplicação e todas essas
outras opções, pudéssemos fazer isso
com nosso Então, a maneira de fazer isso é passando adereços
ou propriedades, certo? Então, essas são coisas que
vamos passar do componente pai
do Counter para o componente botão
que ajudarão a identificar o que esse
botão específico deve fazer. Então, deixe-me mostrar como
vamos fazer isso. Então, a primeira coisa que
vamos
fazer é transmitir essas propriedades. Então, há duas maneiras de
pegar os adereços, certo? Então, poderíamos,
basicamente, passar adereços como, eu não sei, a variante e o número
ou qualquer outra coisa, certo? Sim, então podemos
passar os adereços
assim e depois pegá-los,
você sabe, por meio de nossos adereços Certo. Essa é uma
forma válida de transmiti-las, mas envolve muita sintaxe
adicional que fará um código pareça
um pouco lucrativo Em vez disso, o que queremos fazer
é colocá-los
em um colchete
e, em seguida, podemos acessar
essas variáveis diretamente Então, eu posso simplesmente ser constante, não preciso agora inicializar uma variante, uma variável variante Na verdade, posso simplesmente acessar a
variante diretamente no código. Então, em vez de passar
sucesso aqui, agora
vou passar
a palavra variante, a variável, certo? E então vamos
resolver tudo isso. Então, você pode ver do que
estou falando se passarmos a
variante variável aqui e
voltarmos ao contador e
comentarmos essas duas possamos ver
que não está mais funcionando. Certo, vamos
realmente importar, vamos fazer
essa importação aqui e vamos
importar nosso botão, nosso botão personalizado
do componente local. Importar botão não
do Maria Bootstrap, mas do botão de barra Portanto, importe o botão personalizado de. Tudo bem, e depois
vamos usá-lo. O que vamos fazer é
criar um botão personalizado. No momento, é apenas um botão azul
aleatório. Eu posso até comentar isso. Então, comentaremos tudo , exceto a variante, para que
possamos ter certeza de que estamos
fazendo um bom teste. É um número de botão aleatório,
não há nada nele. O que podemos fazer agora é, na verdade, transmitir nossas propriedades. Usaremos variantes iguais
e digitaremos sucesso porque a primeira foi sucesso, a
segunda foi perigo Agora, o botão da variante está verde. Sabemos que, ao passar nossa propriedade de contador
para botão personalizado em uma
propriedade. na
propriedade da variante
e, em seguida, chamá-la de bring it e, em seguida,
acessá-la no botão personalizado e
usá-la como uma variante, ela simplesmente a canaliza diretamente. Certo? Estamos apenas
perfurando o suporte do balcão ao botão Então, podemos fazer isso, então podemos fazer isso com qualquer propriedade com a qual queremos
trabalhar, certo? Então, se quiséssemos fazer
a mesma coisa com estilo, certo, se tivéssemos solicitações de
estilo específicas, gostaríamos. Nós fazemos margem, certo? Um Ram, certo? E se voltarmos ao
botão agora em vez do número, importaremos o estilo. Podemos fazer com que estilo seja igual a estilo. Na verdade, não
precisamos do duplo, só
precisamos de um estilo, certo? E, novamente, não podemos realmente dizer, mas você pode ver isso um
pouco fora do centro. Teremos essa margem, certo? Tudo bem, então essa é uma maneira muito rápida de começarmos a usar propriedades de uma forma muito
dinâmica, certo? Então, se criarmos
um segundo botão, agora já temos dois
botões com os quais trabalhar. E não precisávamos trabalhar
muito, certo? Não precisávamos
escrever a variante
e escrever o estilo. E isso e aquilo,
só precisávamos escrever em um, só
precisávamos atualizar alguns
campos simples, certo? Então, nesta, vamos
transformar a variante em perigo e vamos remover
o elemento de estilo aqui. Agora devemos ter um botão
verde e um vermelho. Perfeito. Está indo muito bem. Agora, as outras duas
coisas que queremos incluir são o sinal de mais
um e o menos um, bem
como a função onclick Certo, o que queremos fazer para que tudo funcione
corretamente são duas coisas. Queremos passar qualquer que
seja o número
dentro do botão personalizado
e, em seguida, também queremos
passar a função em si. Então, se realmente mudarmos isso para não ser um elemento
de
fechamento automático e nós, como falamos antes, faremos com que seja apenas um elemento
regular que
envolve crianças. Vamos colocar mais um
no primeiro. E se formos até Button agora, queremos acessar
algo chamado Children. Há uma
propriedade especial chamada crianças. Sim, há uma
propriedade especial chamada Children que nos
permite acessar
qualquer coisa que esteja aninhada em um elemento de reação O que
faremos aqui é que, em nosso botão, acessaremos em vez de onde
acabamos de ver o mais um, na verdade, vamos
mudar isso para dizer crianças. E salve-o. Então, se olharmos aqui, o
react descobriu
que , como o sinal positivo era filho do nosso botão
personalizado aqui, queríamos ser filhos
do era filho do nosso botão
personalizado aqui, também
queríamos ser filhos
do botão personalizado Agora que
indicamos que queremos usar uma criança
lá, as crianças, todas as crianças agora viverão dentro do
elemento de botão personalizado. Isso faz sentido. Então, acabamos de
pegar
o mais um aqui, colocá-lo no botão aqui passá-lo como crianças, que é um adereço especial E depois o passei
para a nossa própria página. Vamos fazer isso mais uma vez, mas com nosso menos um Então, vamos
mudar isso aqui, torná-lo um elemento que não
fecha automaticamente, apenas
um elemento regular. E vamos fazer menos um. Vamos salvar isso depois não mudar
nada, basta voltar à nossa página e
aí está. Está funcionando. Então, estamos apenas transmitindo
crianças como faríamos com HTML, mas com nossos botões. Tudo bem, a última coisa
que precisamos adicionar é nossa funcionalidade de
clique, certo? Esse é um pouco mais, esse é um
pouco diferente. O que vamos fazer
aqui são duas coisas. Podemos escrever o botão ao
clicar exatamente como fizemos antes e passar
nossa contagem definida, contagem é igual a
contagem mais E então isso funcionaria
quando adicionássemos nosso clique. Então, quando adicionarmos nosso, clique
aqui e clique em clicar. Então, o que quer que você passe no
clique e tire
isso, funciona, aí está. Estamos adicionando um
a cada vez. Então essa é uma maneira de fazer isso. Outra maneira de fazer isso é abstrair
completamente a
lógica no componente. O que pode ser benéfico aqui é criar uma função
chamada add one. Vamos adicionar um igual a uma
contagem definida para ser contagem mais um. Tudo bem, então
acabamos de abstrair essa lógica na
parte superior do balcão Tudo bem, agora que
criamos essa função de adição de um, podemos simplesmente escrevê-la aqui. Podemos simplesmente escrever adicionar um. Então, nosso clique,
na verdade, apenas adicionará. Opa. Então, nosso clique, na verdade, adicionará apenas um quando precisarmos. Incrível. A próxima coisa que
podemos fazer aqui é abstrair essa subtração para que fique
um pouco mais limpo em nosso código
real na parte inferior Então, vamos subtrair um, vamos fazer a contagem de conjuntos menos Vamos guardar isso. E
então vamos pegar isso, subtrair um e passá-lo como um clique
em nossa função aqui Se tivermos feito isso, e se tivermos feito tudo
corretamente, deve funcionar. Então, vamos dar uma olhada.
Subtraia um. Incrível. Está funcionando exatamente como
esperávamos que pudéssemos. Então, podemos nos livrar desse texto
extra aqui. Guarde isso. E agora adicionamos outra camada aos nossos
componentes, certo? Então, o que fizemos
foi transmitir essas variantes, os estilos e os repassamos ao
clicar no botão O botão agora
chama dinamicamente a criança. O botão agora
chama dinamicamente
a variante de estilo e
clique conforme necessário E passa a criança
correta com base no que
passamos. É muito legal. Portanto, essa é uma forma de trabalhar com propriedades de um componente
pai, ou
seja, do componente contador
para um componente filho, que é o componente botão. Então, essa é apenas uma maneira
de trabalhar com isso. Então, vamos
praticar uma última vez, mas vamos fazer isso
com o componente de contagem. Então, isso é bem
simples, na verdade. Um pouco mais simples do que
o botão em si. Vamos criar um novo
arquivo e chamá-lo de “conta”. E vamos
fazer a mesma coisa e criar um componente de contagem. O que vamos usar,
esse componente de contagem é exatamente para o qual estamos
usando o h. Vamos importar a contagem
e vamos repassá-la Em vez de usá-la como filha, na verdade
vamos
apenas passá-la como uma propriedade. Vamos passar na contagem. E então vamos
abstrair todo esse estilo do nosso
componente aqui Então, vamos nos livrar
disso. E economizaremos. E se voltarmos às contagens, agora
queremos acessar todas
essas propriedades, certo? Então, fazendo a mesma coisa
que fizemos no botão, usaremos nossos
colchetes aqui e
acessaremos o
valor da contagem Nós vamos salvar isso. E se você se lembra, claramente, na verdade
tínhamos
um H em vez de um div aqui para nossa exibição real
da contagem em si E o legal
do JSX é que realmente
não importa qual é
o componente externo Pode ser um botão
, pode ser, realmente
não importa. Pode ser algo
chamado até mesmo de fragmento, que é onde você
realmente tem apenas esses colchetes vazios que
não têm nenhum valor para O que vamos fazer é na verdade, usar aquele H em vez disso. Então, vamos digitar
um H, vamos salvá-lo
e, em seguida,
acessaremos o valor de count. E se você se lembra, também
tivemos um pouco de
discussão, então vamos
copiar colar de volta aqui E agora, se fizemos
tudo corretamente, deve
parecer exatamente
o mesmo, certo? Temos nossa conta e ela está
funcionando conforme o esperado. Novamente, isso foi muito
simples em termos de apenas passar da contagem Passamos o valor de count para o componente chamado count, acessamos o valor de
count e o exibimos. Então, espero que isso
ajude você a
entender um pouco o fluxo
de como o JS funciona,
como o react funciona, como
os adereços são passados, como funciona o
relacionamento entre pais e filhos E, novamente, a razão para fazer isso é apenas tornar as coisas
um pouco mais limpas. Algo que poderíamos até mesmo fazer
no componente do botão para
limpá-lo um pouco é exibir a variante
dinamicamente, certo? Em vez de escrever
explicitamente a variante aqui
no arquivo do contador, que
ocupa muito espaço e é
algo adicional
que devemos lembrar de algo adicional
que devemos lembrar mudar toda vez que precisarmos mudar
alguma coisa Seria ótimo se
todos os nossos estilos vivessem
apenas nos componentes
dos botões. Vamos ver se
podemos fazer isso aqui. O que vamos fazer
é, na verdade, entrar em nosso componente de botão e ,
em vez de acessar
essa variante variável, o que vamos fazer é
baseá-la no que a criança é. Então, vamos fazer
essa pergunta aqui. Então, se as crianças E
são iguais a mais um, então esse é o nosso
componente de anúncio, certo E, se você se lembrar, nosso
componente de anúncio estará
no lado esquerdo e
será verde. Queremos que nossa variante seja, perguntaremos e queremos que nossa variante seja bem-sucedida. E se você se lembra,
isso está usando algo chamado operadores
ternários, que examinamos em
Javascript, certo Então, estamos fazendo
uma pergunta sobre a condição aqui. Então, avalie essa expressão. Se for verdade, resulte
neste primeiro argumento aqui. Se for falso, no entanto,
resulte no segundo, o
que, no nosso caso, é perigoso. Portanto, se tivermos feito
isso corretamente, para que essa variante não seja
mais usada, ela ainda deverá exibir as cores corretas
dos botões. Então, se olharmos aqui, sim, ele ainda está colorido, com as mesmas cores, e está funcionando
exatamente como esperado Incrível. Então, novamente,
o que fizemos aqui, certo, usamos apenas
um operador ternário. Pegamos o valor das crianças, que
será mais um ou menos um E fizemos a pergunta, então se a criança for mais uma, se isso for verdade,
queremos que ela mostre a cor
do sucesso,
a variante do sucesso. Se for falso,
queremos que mostre
o indicador de perigo,
que você sabe que é vermelho. E como fizemos isso, não
precisamos mais que esse suporte
variante seja perfurado O que, na verdade, nos permite limpar nosso código um
pouco. Aqui, faz sentido. Vamos usar
isso mais uma vez só para ter uma ideia. Então, novamente, aqui no botão personalizado, você vê que
temos estilo em um e nenhum estilo no outro. O que podemos fazer novamente no botão é exibir isso
com base na variante. E só estamos fazendo isso dessa
maneira só porque sabemos que nosso contador não vai
mudar muito, certo? Temos um mais um
e temos um menos um e isso não vai
mudar muito Se isso vai mudar
muito no futuro, talvez não
queiramos
fazer isso dessa maneira. Mas como é
um escopo meio limitado, faz sentido para nosso caso de uso. Tudo bem, então vamos
usar nosso estilo e adicionar uma margem, à
direita, de um ao redor. Eu vou copiar isso.
E eu vou removê-lo desse componente externo
do
contador. Certo? Então, nós já
limpamos muito isso. Você sabe, nós
temos, na verdade, apenas três linhas
aqui e você pode ver o valor de
abstrair um pouco do estilo exibido
em um componente diferente, quando você vê o quanto mais limpo o componente pai Certo. E, como você pode ver, porque a retiramos, a margem direita não funciona. Não está lá. O que é totalmente bom, porque você
vai adicioná-lo novamente. Então, vamos voltar ao botão. Tudo bem,
então, e então vamos remover o estilo
daqui de cima, porque não vamos
precisar dele novamente. Guarde isso. Remova isso
aí e salve isso. Tudo bem, agora o que vamos
fazer com o estilo aqui é um pouco diferente porque estamos modificando
apenas um elemento Vamos verificar isso de uma
forma um pouco diferente. Então, vamos digitar
a margem, certo? E então dentro da margem, certo? Agora vamos
fazer essa pergunta. Se as crianças forem
iguais a mais um,
queremos que a margem, à direita, Em nenhum outro caso, queremos que a margem, certo, seja zero. Nós
vamos salvar isso. Aí está. Agora
adicionamos nossa margem, certo, com base no fato de a
criança ser ou não a adicionada. Portanto, essa é
uma maneira muito fácil limpar nosso
contador, nosso componente principal,
e manter todos os estilos
vivendo em uma área. Certo. Ainda podemos
ver que temos a lógica que está sendo
tratada no Counter Mas o counterwell agora é
aquele componente lógico
que contém todo
o estado, as
chamadas de função que são
passadas para os componentes
de exibição dos botões de contagem e personalizados. Portanto, os componentes do react também são criados para ter,
idealmente, um único uso. Então, eles estão exibindo ou
trabalhando na lógica, mas não estão necessariamente fazendo
as duas coisas. E esse é um dos
motivos pelos quais você pode ser solicitado a fazer isso em uma entrevista ou em um possível cenário de trabalho.
11. Teste: Tudo bem, então a
última coisa em que queremos trabalhar hoje é testar. O teste é outro
elemento interessante com o React. Como você viu antes, quando estávamos examinando nosso pacote dot json, havia essas coisas
que instalamos chamadas bibliotecas de teste, certo? Essas são
bibliotecas de teste às quais temos acesso, das quais podemos usar chamadas
específicas para realmente garantir que nosso
aplicativo esteja funcionando corretamente. Então, se dermos uma olhada nos testes de aplicativos. Então, no momento, está falhando
porque, na verdade,
removemos parte do que
costumava estar no aplicativo Certo. Estava
verificando se, bem, vamos examinar
isso linha por linha. Nesse teste,
importamos duas coisas. A renderização e a tela da biblioteca de
testes reagem. Também importamos aplicativo do aplicativo. Agora, o que
chamamos então de teste. Estamos fazendo um teste. O teste renderiza um link para aprender a reagir Ele renderiza o aplicativo e, em seguida
, encontra um elemento de link. Ele acessa a tela e
depois liga para get by text. Ele chama esse método
chamado get by text, que nos
permite encontrar
as palavras react. E você verá que,
na verdade, está escrito de forma
muito interessante Aqui você notará que ela
não está escrita como uma string típica. Se você se lembra, nós
meio que tocamos no X
vermelho em algum momento, expressões
regulares. Você sabe que isso é reg da mesma forma que é
escrito de uma forma que nos permite
pesquisar essas palavras independentemente
de serem maiúsculas ou letras comuns Então você escreve uma barra,
você escreve sua frase, você escreve outra barra, e então você escreve um I logo Então, esse é apenas um pequeno fato engraçado que você pode
usar a Internet. E então,
a forma como o teste funciona é que a etapa final é
sempre a afirmação, então o que estamos tentando
garantir que está funcionando, está
acontecendo, etc Portanto, esperamos que
o elemento link, que é essa variável que
criamos aqui, esteja
no documento. Portanto, esperamos que o elemento
de link esteja no documento. Novamente, como eu disse antes, isso está falhando
agora porque
removemos esse elemento
de link do documento Mas podemos realmente corrigir
esse teste e fazer com que ele procure outra coisa que
esteja no documento, certo? Então, como sabemos que nosso cabeçalho sempre estará
no documento, podemos usar esse
elemento de link onde podemos usar o mesmo formato para
verificar se nosso cabeçalho está presente. Então, vamos mudar o elemento do link para ser contado. E vamos fazer a tela, mas vamos apagar essa parte Vamos fazer com que a tela sobreviva. Queremos fazer isso por meio do papel. E o Get By Role nos permite basicamente encontrar coisas com
base na função que elas desempenham. Então, se for um botão, se for um texto, se for um rótulo. Podemos usar essas diferentes
funções para identificar os próprios
elementos reais. Felizmente, temos apenas
um título nesta página, então podemos usar o título get
by role Podemos usar isso.
Esperamos que a contagem
esteja no documento. Como você pode ver,
quando o salvamos,
ele já funcionou corretamente porque estamos afirmando
as coisas corretas Mais um teste que poderíamos fazer. Poderíamos fazer exatamente o mesmo
teste, vamos reescrevê-lo. Mas podemos verificar o
botão de adição, por exemplo, certo? Nós podemos fazer renderizações. Hum, e também vamos
querer alterar o cabeçalho dessa renderização
apenas para ficar correto O segundo teste que queremos
fazer é o botão Renders Plus. E então podemos
simplesmente criar, opa, criar o teste e
renderizar o aplicativo. E você sabe, o interessante em
que talvez
nem tenhamos pensado é o motivo pelo qual isso está funcionando
corretamente é porque todos esses componentes
residem no aplicativo Porque o aplicativo contém contador e contém contagem
e contém botão. Não importa para
onde estamos convocando o teste, porque ele
pode ver todos eles. Então, só mais
uma coisa interessante em que pensar. E então queremos escrever
constantemente, o que foi? O botão Plus é igual a
tela, obtenha por rolo. Mas agora o
interessante é que,
na verdade, não temos dois botões. Temos o botão de mais
e o de menos. Mas pegamos o
botão de rolagem e depois passamos? O que passamos para
a segunda parte? Podemos passar mais um? Essa é potencialmente
uma maneira de fazer isso. Novamente, como você vê, na verdade
não funciona. Agora estamos encontrando vários elementos com o botão de rolagem. Não podemos simplesmente dizer, sim, vamos
descobrir o que é. Provavelmente precisamos dar
algum tipo de opção aqui. Então, precisamos perguntar
, tudo bem, queremos encontrar o botão, mas há
outra propriedade chamada nome que nos permite encontrar especificamente o botão que tem qualquer que seja esse nome. Certo? Então, aqui está como
eu resolvo o problema. Fizemos a tela,
fizemos o get by roll, pesquisamos
o botão de rolagem
e, em seguida, queremos que o
botão com o nome de mais um seja o botão que
estamos procurando. Certo? Então é assim que
acessamos o botão de adição. Vou te mostrar
outro método para fazer isso e podemos
procurar o botão de menos Então, dutos mais
botão são iguais a isso. Então, queremos ter certeza de
que está no documento. Vamos dizer isso, aí está, então sabemos que está
realmente funcionando corretamente. Tudo bem, agora
vamos escrever mais
um teste e
vamos verificar o botão de
subtração O teste renderiza o botão de subtração. Vamos escrever nosso teste. Faremos a renderização do aplicativo, que subtrai a
tela igual ao botão em vez de obter por função Agora vamos
usar o get by text. Então, vamos obter por texto e, em seguida, será menos um Nós vamos salvar
isso. Em seguida, vamos armazenar a afirmação. Espere que o botão
de subtração esteja no documento. Nós chamamos isso. Se tivermos feito isso
corretamente, nossos testes são aprovados. Há duas maneiras de
realmente procurar um elemento. Quero dizer, existem
mais de duas maneiras, mas as duas maneiras que
estamos analisando agora são usando get by role
e usando get by text. Agora, surpreendentemente,
embora obter por texto seja a mais concisa
das duas opções, obter por função é, na verdade,
preferível porque,
por função , você
pode ter um pouco
mais de certeza de que está recebendo
exatamente o que deseja Digamos que tivéssemos um título com
a escrita menos um. Esse ponto de tela obtido por texto na verdade,
obteria esses dois
elementos e acionaria um erro porque obter por texto é literalmente apenas
procurar o texto. Get by roll, por outro lado, tem um pouco mais de nuances, um pouco mais especificado.
Ao usar o papel do botão, o
nome ou outra opção,
podemos ter certeza, ou pelo menos
com um maior nível de
confiança, de que
estamos obtendo o elemento
correto que
estamos procurando
12. Conclusão: Conclusão,
falamos muito
neste vídeo, desde as origens do React até a criação de
seu próprio contador. Eu adoraria ver como você decidiu implementar
seu contador. Portanto, deixe um link para seu
código ou para o site hospedado
na guia Projetos e
Recursos para que eu possa ver todo o
trabalho árduo que você fez. Eu leio todos os comentários e todas as avaliações e vejo
todas as submissões de projetos. Portanto, se você tiver alguma dúvida, sinta-se à vontade para
deixar um comentário
na seção de avaliações abaixo ou
entrar em contato comigo diretamente. Confira minha página de perfil para obter mais informações sobre isso. Se você quiser saber
mais sobre programação, confira os outros vídeos que
também tenho na minha página de perfil Também tenho vídeos em HTML e CSS disponíveis no meu
canal do Youtube e no meu site. Se você estiver interessado em
aprendê-las, dê uma olhada e eu
verei na próxima.
Zoë Davidson, Software Engineer & Cinematographer
