Transcrições
1. Introdução: Você já ouviu falar
de uma das bibliotecas de front-end mais populares do
mundo, a React? Hoje, veremos tudo o que
você precisa
saber para criar seu próprio
projeto usando o React. Incluindo como
criar esse aplicativo para fazer. Oi, meu nome é Zoe. Sou engenheiro de software
e ex-professor que adora educar outras pessoas sobre como começar
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 aplicativo para fazer
totalmente funcional. 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 de java script ou script de tipo
, bem como HTML e CSS. Para acelerar nosso aplicativo,
usaremos uma estrutura chamada Next
S, que usa o React. Também usaremos materiais para alguns
estilos e componentes básicos Um salto vincula todos os ativos e recursos que você precisará na guia
Projeto e recursos
3. Por que Reagir?: Por que reagir? Se você já está
familiarizado com o react, pode pular para
as aulas tutoriais Mas nas próximas lições, veremos
qual problema o React
foi criado para resolver, como ele é usado e
como executá-lo. 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 o
modelo de objeto do documento fossem repintados cada atualização, o React, corrige esse problema
criando o que eles
chamaram de Dom 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 com
mais eficiência
e eficácia. Outros frameworks populares
que são frequentemente comparados ao react incluem
View e Angular
4. Componentes: Componentes. Os componentes são
trechos de código reutilizáveis que o React aproveita
para manter sua modularidade Pense neles como
os blocos de construção que os desenvolvedores usam
para criar aplicativos. Um componente é um trecho de
código independente e
reutilizável que encapula sua própria funcionalidade, Esses componentes podem ser
considerados como uma combinação
de HTML e Javascript ou JSX, que é usada no 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 que reagem, 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, adereços. Vamos dar uma olhada em
um componente da bacia. Esses componentes estão, na verdade,
apenas em suas funções básicas. Eles podem receber argumentos, modificar variáveis e retornar um valor. Mas, simplesmente falando,
podemos pensar em props como os argumentos que são passados por nossa função
quando ela é chamada e state 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. várias maneiras de
configurar um aplicativo de reação. Neste curso, abordaremos
dois dos mais populares. A forma original de
configurar um aplicativo de reação era usando o CRA ou
criando um aplicativo de reação aplicativo Create react também foi desenvolvido
no 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 configurar um novo
aplicativo react pela primeira vez. Para executar, crie o aplicativo react. Basta inserir px,
criar o aplicativo react, 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. No entanto, eu
o alertaria contra usá-lo para criar seu projeto, pois ele
não está mais sendo mantido. Em vez disso, sugira
o uso de estruturas ou ferramentas como Next S ou Vet Usaremos o próximo S
para criar nossas tarefas.
7. TypeScript: datilografado. Em vez de usar Javascript em nosso aplicativo de tarefas, usaremos texto datilografado O texto datilografado é, na verdade, apenas
um superconjunto de Javascript. O que isso significa é
que ele é construído de e, em última análise,
compilado em Javascript. Mas ele tem alguns recursos
adicionais que o Javascript não
nos fornece imediatamente. datilografado nos permite usar digitação
estática em vez de
dinâmica Detecte muito mais erros
ao escrever nosso código, vez de em tempo de execução Ele
desenvolve automaticamente um nível de documentação
para seu projeto. É um pouco diferente
do Javascript, mas vamos analisá-lo juntos,
passo a passo, ao longo do
nosso tutorial. Se você pode escrever Javascript, tenho certeza de que pode
escrever Typescript
8. Next.js: Next S Nos anos que
passaram desde que o
aplicativo create react foi introduzido pela primeira vez, muitos frameworks foram
construídos e desenvolvidos a partir dele Uma estrutura muito popular
hoje em dia é o Next JS. Next GS fornece muitas otimizações prontas para uso, como roteamento de renderização de
serviços e SEO aprimorado E, como tal, é o favorito
dos desenvolvedores de front-end. Vamos usá-lo
em nossos projetos, então vamos nos aprofundar
e começar.
9. Estilizando o aplicativo: Tudo bem, então vamos começar. Então, a primeira coisa
que vamos querer fazer é instalar o pacote
que estamos usando. Na verdade, vamos usar
esse modelo aqui que nos
permite criar um aplicativo
que tenha o próximo S Material, interface do usuário e o script de texto
juntos ao mesmo tempo. Se você instalasse
isso manualmente, um por um, começando com o próximo JS
e depois instalando-o, material I e script de tipo, demoraria um
pouco mais para configurar. Então, estamos apenas usando
esse modelo como um atalho para economizar
algum tempo com o tutor Então, o que vou fazer aqui
para utilizar isso é deixar o link
para esse
repositório específico do Github na guia de projetos e
recursos abaixo na guia de projetos e
recursos Então, vou
passar para o lado direito aqui, onde está o botão verde. Vou apenas copiar
a URL do projeto. E então eu vou
para a pasta de
desenvolvimento
e vou
cloná-la em uma pasta que
vou chamar para fazer Então, vamos fazer isso
e depois é incrível. Então está criado, deixe-me ir
para minha pasta de tarefas agora. Documentos, desenvolva-os e faça-os. E então vamos
abrir isso no código VS. Tudo bem, incrível.
Agora que tudo está no código VS,
devemos estar prontos para começar. Agora, o que vamos
fazer é usar o NPM para instalar os pacotes com
os quais estamos trabalhando Porque embora tenhamos
nosso pacote em Json, sobre o
qual falamos antes, ele tem todos esses
pacotes que ainda
precisam ser instalados
para que possamos usá-lo Então, vamos começar
com isso. Então, vou começar
abrindo um novo terminal. E você verá que ele já inicializado como um repositório Git Esse é um recurso do
próximo S. Ele nos permite
basicamente fazer com que todas as coisas que
teríamos que fazer uma por uma, basicamente feitas para nós. Vamos em frente e
vamos digitar NPM I para instalar e
deixar que seja instalado E, como você verá
no canto superior esquerdo aqui, uma pasta chamada
módulos de nós acaba de aparecer E isso é basicamente o resultado da instalação
de todos esses pacotes. São todas as informações que o projeto precisará
para funcionar. Então, você verá que
instalamos módulos de nós lá, alguns erros
, mas não
vamos nos preocupar com isso. E então vamos
seguir em frente e executar NPM start para iniciar nosso projeto Estamos recebendo um
pequeno erro aí. Oh, você sabe o que, nós
precisamos executar o NPM, executar o dev. Isso é o que é.
Tudo bem, desculpe, comece a empreender. Dois comandos
diferentes. Então, vamos até a direita
aqui e, se tivermos feito
as coisas corretamente, o host local 3.000, conforme
dito em nosso terminal, devemos ser capazes de,
sim, começar Então, temos nosso próximo
S funcionando e girando. Estamos usando o material Y e
estamos usando o script de tipo. Então,
basicamente, vamos começar a desenvolver e criar nosso aplicativo de tarefas para que
possamos nos concentrar nas
coisas que importam. Tudo bem, então o
aplicativo para fazer que vamos
criar, se você apenas pesquisar no Google
um, você sabe, você basicamente
quer criar algo, você sabe, com
qualquer aplicativo para fazer. Você quer criar
algo parecido com uma lista de tarefas. Você sabe, alguma forma de
marcar o que você está fazendo e alguma forma de
excluir o que você está fazendo. Um que eu criei
no passado e
depois
vamos modelar isso é este aplicativo para
fazer aqui. Então é por isso que
estamos nos esforçando. Queremos fazer um aplicativo que,
ao adicioná-lo ao Do, possamos adicioná-lo à lista. Você sabe, apenas pressionando
Submitter, pressionando Enter,
podemos
marcá-lo e, você sabe, talvez ter algum estilo Podemos excluí-lo
se quisermos. E então, se adicionarmos
isso para fazer e
atualizarmos a página,
queremos que ela permaneça correta Não queremos que ele
desapareça porque queremos poder
usar esse aplicativo
para fazer
da mesma forma que nosso aplicativo pessoal de
tarefas pelo tempo que quisermos. Então, há
algumas coisas que
teremos que fazer para que
funcione assim. Mas usaremos isso para fazer o aplicativo
como referência, caso
precisemos de ajuda no futuro. No momento, porém, temos
esse aplicativo. Os próximos kits iniciais S. Vamos seguir em frente e nos
livrar de tudo o que
não precisamos usar para entrar em nosso projeto de código
VS Aqui eu vou entrar em páginas. A forma como o next S funciona é
que ele realmente estrutura seu aplicativo em termos
de páginas. Como estamos na
página inicial do aplicativo, modificaremos esse arquivo de índice, conforme
falamos anteriormente Temos JSX, que é Javascript misturado
com Javascript XML. Isso é S, que é apenas a versão datilografada da mesma coisa que
mencionei Se você não está familiarizado
com o Typescript, ele é muito, muito
semelhante ao Javascript Eles são basicamente
a mesma coisa. Typescript é apenas
Javascript com tipos, e abordaremos isso enquanto
trabalhamos em nosso projeto Então, a primeira coisa que
queremos fazer é esclarecer
tudo isso no meio. Então, vamos
limpar tudo, do Maine até o rodapé,
e nos livrar disso Só queremos uma folha em
branco e vamos mudar o título
aqui para fazer o melhor. Então, como você verá à direita, não
temos nada acontecendo, então sabemos que
fizemos nosso trabalho corretamente. Nós o limpamos. Também vou me
livrar dos estilos aqui, só para que
possamos realmente começar do zero Tudo bem, então vamos dar uma olhada em nosso aplicativo novamente.
O que nós queremos fazer? Bem, acho
que vamos precisar
criar vários
componentes diferentes aqui. Então, precisaremos
ter esse tipo de componente
maior que
hospede o plano de fundo. Talvez você possa simplesmente adicionar o
plano de fundo ao corpo, mas então teremos
esse contêiner aqui que realmente contém
o real para fazer por si só. Mas parece que temos um cabeçalho
aqui que poderíamos nomeá-lo. Arte para fazer, lista ou qualquer outra coisa, mas por enquanto é só para
fazer. E então temos essa
entrada que está vinculada ao envio e
a própria ação. Portanto, há alguns componentes que
queremos criar. Pense em criar
aqui. Vamos começar definindo o estilo do plano de
fundo primeiro Acho que o que fizemos
aqui é um gradiente linear. Então,
acho que é isso que provavelmente
farei nossos projetos também. O que vou fazer para
entender isso é
pesquisar a semântica do
gradiente linear E sim, é isso
que eu quero fazer. Eu quero pegá-lo como cor
de fundo ou basicamente
torná-lo o plano de fundo. Então, vou
voltar para o aplicativo e depois vamos experimentá-lo em nosso div
aqui e ver se funciona Se cobrir a página inteira
, será um gradiente
linear e
só teremos que resumir essa citação Isso é CSS embutido, caso você
nunca o tenha usado antes. Basicamente, isso nos
permite escrever nosso CSS dentro do
próprio elemento. Então, só precisamos ter
certeza de que isso acontece. Sim. Oh, você sabe, desculpe, eu coloquei a citação
no lado errado. Aí está. Legal. Então, vamos dar uma olhada no
que isso nos deu. Mãe, ele. Ah, e vamos adicionar alguma textura para que possamos ver que estamos trabalhando no arquivo
certo. Tudo bem Para fazer algo incrível. Então, isso está nos
dando um gradiente linear, mas não está cobrindo
a página inteira Então, mais uma etapa que vou
adicionar a esta página. Basicamente, quero que a página ocupe toda a página visível. Portanto, há uma propriedade chamada altura da
visualização que você pode realmente usar para obter
100% da visualização, a altura da visualização
que você está usando. Então, definiremos a altura 100 VH com suportes
para a altura da visão E vamos salvar
isso. E lá vamos nós. Temos nossa página
ocupando o plano de fundo, ou pelo menos nossa página inicial, ocupando a
página inteira. Isso é ótimo. Mais um recurso que
vou adicionar a esse
estilo de gradiente linear aqui é uma curva Então, vou
adicionar uma volta de 0,125. E isso só vai
virar a linha onde o
gradiente está agora Está meio que do outro lado da
página. Só vai dar errado, então
vamos guardar isso Ótimo. E esses são apenas um
pouco mais de brilho Legal. Então, terminamos de
estilizar isso no momento Vamos continuar
criando nossos componentes. Então, eu quero criar
uma nova pasta aqui, e vou
chamá-la de componentes. Como mencionei em minhas aulas
anteriores, algo que gosto de
fazer quando estou criando um projeto de reação é criar uma pasta de
componentes para que eu possa categorizar e criar todos os meus componentes
nas pastas existentes Acho que isso torna as coisas
muito mais fáceis para mim. Depende apenas do
aplicativo
com o qual você está trabalhando e de como gostaria de
estruturar seu projeto. Então, dentro da pasta do componente, vou criar um novo
arquivo e vou chamar esse arquivo para fazer
container porque esse será aquele
grande contêiner branco que vimos no
outro, no exemplo. Então, vou pressionar
Enter e, em seguida, usar, acredito que sou eu,
é um preenchimento automático, vou usar o R AFC e ele
criará automaticamente um componente funcional Então, vamos lá, temos um componente funcional
chamado to do container. O que vou
fazer agora,
voltando para a página principal,
vou
substituir nosso pequeno texto
aqui que diz “Do”
e substituí-lo pelo nosso componente de contêiner Do, que , como você vê, é importado
automaticamente por causa de
algumas das extensões
que importado
automaticamente por causa de instalamos E vou dizer que se você tiver mais dúvidas
sobre extensões, deixe um comentário
abaixo e eu posso recomendar várias se precisar de
ajuda com coisas assim. Então, passando para, você
verá aqui à direita que o
contêiner to do agora está realmente
presente no, no aplicativo Então, você sabe, estamos
trabalhando muito bem. Então, a próxima coisa que
queremos fazer é realmente estilizar, queremos que nosso
contêiner de tarefas esteja
no centro da página, certo?
Queremos que esteja lá. Então, para fazer isso, acho que a maneira mais fácil de fazer
isso seria definir nossa página uma caixa flexível, porque essa será a
única coisa em nossa página Podemos meio que permitir que
seja uma caixa flexível com o mínimo de preocupação de
que isso afete qualquer outra coisa. Então, em nossa página, o que
vou fazer aqui é
configurar a tela, fazer flix e depois vou
justificar o conteúdo para
ser centralizado e salvá-lo Como você verá, o contêiner
já saltou para
o centro e,
portanto, já está
centralizado na página A próxima coisa que vou
querer fazer agora é estilizar o próprio
contêiner. E vou adicionar um pouco de
estilo embutido a isso para chegar onde queremos que esteja .
Usando algum estilo embutido. Ao mergulhar aqui,
vou até o estilo e, em seguida, vou
definir uma margem superior a ,
digamos, cinco M por enquanto, apenas para empurrá-la um pouco para fora do topo da
página. Então, a próxima coisa que eu quero fazer agora é definir uma cor de fundo. Cor do plano de fundo. Vamos apenas
configurá-lo para branco, que é FF e,
salvo isso, ótimo. Então, temos nosso contêiner para fazer,
mas, como você pode ver
, está indo até o
final da página. Não queremos necessariamente isso. Então, o que eu vou
realmente fazer é definir uma altura máxima e, em seguida,
mantê-la limpa e contida. Podemos tornar isso
maior se quisermos. Podemos torná-lo mais responsivo ou podemos torná-lo rolável bom ter todo esse tipo de coisa
, mas nos preocuparemos com isso
à medida que avançarmos. No momento, queremos apenas
obter esse tipo de MVP, o produto mínimo viável com o
qual estamos trabalhando aqui Tudo bem, mais algumas coisas que estou vendo aqui é que não
queremos que fiquemos
realmente esmagados até a
borda do contêiner Então, provavelmente queremos
adicionar um pouco de preenchimento. Então eu vou aqui e
adiciono um pouco de preenchimento. Vamos adicionar duas barras de
preenchimento em toda a volta. Ótimo. Parece muito bom. Então, por fim,
vamos adicionar um raio de borda para apenas
curvar esses cantos Então você vai
digitar o raio da borda
e, em seguida, eu vou configurá-lo e salvá-lo. Ótimo. Estou muito feliz com a
aparência agora. Acho que podemos fazer um pouco mais quando começarmos a adicionar os componentes internos
aqui como cabeçalho. E também vamos adicionar
a entrada, o botão
e o real a fazer. Então, vamos começar e fazer isso. Voltando ou realmente dizendo
em nosso contêiner Do, vamos
adicionar o cabeçalho Então, vamos
criar um H. E, na verdade, porque
estamos usando o material I, que é uma biblioteca específica de estilos e componentes
que está disponível para nós Como estamos usando o react, podemos realmente usar
alguns de seus
componentes integrados que nos permitem
estilizar as coisas um pouco mais rápido Isso nos permitirá começar a usar nosso Apple
um pouco mais rápido. E também nos ensine uma nova biblioteca e nos dê uma nova ferramenta com
a qual nos familiarizarmos. Então, vou usar um
componente que eles
chamaram de tipografia e importação Agora, por
experiência anterior, sei que o componente de topografia tem um elemento ou uma propriedade
chamada variante Então, vou usar
a propriedade de variante e vou querer
acessar a variante de H um, porque esse
será nosso título em nossa página. E então, dentro
desses dois colchetes, vou digitar todos Esse será o
nosso título por enquanto. E aí está,
nós o temos lá. É um pouco diferente
do que tínhamos antes. Talvez eu queira seguir em frente
e estilizá-lo de forma um pouco diferente apenas para o
propósito deste tutorial. Mas se você quiser
usar materialmente y para estilizar um projeto maior, você pode realmente entrar na pasta de estilos que
vem com
o próximo JS e depois modificar o tema e trabalhar um
pouco mais detalhadamente com a tipografia
e qual é o tamanho de H, um, qual é a espessura, o peso da fonte e
coisas Você pode realmente começar a
estilizar os componentes,
mesmo que seja uma biblioteca de
componentes. Mas, por enquanto,
vou acessar os estilos reais do
próprio elemento para modificá-lo da
maneira que eu quero. Então, no que diz respeito ao material I, cada componente do material Y tem uma propriedade especial chamada X. E X é
basicamente o mesmo estilo, como o estilo embutido, mas é específico
do material Y. Então, vamos
usar o SX Prop
e vou
definir o tamanho da fonte como, é específico
do material Y.
Então, vamos
usar o SX Prop
e vou
definir o tamanho da fonte como, digamos, três Ram,
talvez quatro Em seguida, definiremos o peso da fonte. Acho que cerca de 500. Tudo bem, legal. Parece muito bom
para mim. Vamos seguir em frente. Então, a próxima coisa que
queremos fazer agora, certo,
analisando nosso aplicativo de tarefas, queremos considerar essa entrada, o botão Enviar e o
que fazer por si só. Então, vou começar
criando o Todos e
depois voltando,
voltando ao nosso aplicativo e, na verdade, configurando
isso para três Rams para que corresponda
um pouco mais ao design do exemplo Vamos criar
outro componente, chamada para fazer o item. Vamos usar a
mesma coisa, R AFC, e ele vai exportar
nosso componente para lá E então, em vez de apenas
importá-los imediatamente, vou realmente
criar alguns dados simulados Então, vou fazer
uma simulação constante e, em seguida, vou
criar uma matriz de strings, que
será nossa Para fazer isso, faça um, faça dois e faça três. E
vamos salvar isso. E o que vou fazer
abaixo da tipografia, agora
vou simular dados e
importar nosso Então, usando
esses colchetes perolados, vou pegar nossa simulação e
mapeá-los Então, se você se lembra corretamente, esse mapa é uma função que podemos usar em
matrizes para nos permitir
iterar sobre os
objetos ou itens em
uma matriz e, em seguida,
distribuí-los
e realizar uma espécie de
ação repetível em Então, vamos
mapear cada um
dos itens e o que queremos fazer, porque os mapas
precisam ter um retorno, vamos voltar para fazer item, vamos dizer isso. Agora está me dando um ar aqui. Diz que estou perdendo a chave Prop porque, com mapas,
você precisa ter
uma chave para que cada item seja identificável de
forma independente Então, o que vamos
fazer é
definir a chave para ser a tarefa, porque sabemos que nossas
tarefas são únicas. Isso vai funcionar. Mas você gostaria de
defini-lo como um ID exclusivo, o que faremos no futuro. A próxima coisa que vamos
querer fazer aqui é que, como você vê aqui à direita,
os itens
a fazer foram
preenchidos várias vezes Portanto, o Mac to Dos está presente.
Portanto, há três para fazer. Há três ou dois
itens. No entanto, eles não foram realmente
preenchidos com os dados E isso porque não conseguimos passar os dados
para o componente
real do to Do it. Então, vamos seguir em frente e fazer isso. Voltando ao item do, o que vamos
fazer aqui é onde o Javascript
e os scripts de tipos começam a diferir um pouco. Se você estiver familiarizado com
o Javascript reativo, saberá que
pode simplesmente criar um suporte para fazer e depois passá-lo para o seu componente
real Mas o que você não veria no
script de trabalho é esse
erro que estou recebendo. Portanto, diz que o elemento de vinculação a ser
feito implicitamente tem qualquer tipo. E isso porque não
especificamos o tipo de fazer isso. Assim como no Javascript, tudo tem um tipo, certo? Tudo no
script de tipo tem um tipo. Mas no script de tipo, eles querem que
você defina ou
declare explicitamente esse tipo
para que
não haja confusão sobre
o que está sendo passado, onde está sendo
passado, etc Então, uma maneira de
fazer isso no script de tipo é criar algo chamado
interface de interface. E você pode chamá-lo do
que quiser, mas vamos
chamá-lo de adereços E dentro dessa interface,
agora vamos definir nossos tipos. No momento, só temos um, mas podemos
adicionar mais conforme necessário. Então, vamos
criar, vamos definir
fazer para ser uma string. Nós vamos dizer
isso. E então, fora desse colchete
encaracolado aqui, vamos colocar dois pontos E vamos digitar a
palavra adereços para indicar que esses adereços devem ser
aplicados a esses parâmetros A fazer é digitar string. Se adicionarmos mais alguma coisa aqui, não
precisaremos adicionar mais
e mais adereços na linha sete Poderíamos simplesmente adicioná-los nas
linhas 56.7, etc. Então, voltando ao item do, agora
queremos passar
o real para fazer. Certo? Porque você sabe
que agora está esperando isso. Basicamente, ele sabe que
fazer um item exige uma tarefa. Portanto, é necessário que realmente
usemos essa propriedade específica, que é uma das melhores vantagens do texto datilografado Você não vai cometer
esse tipo de erro. se fosse Javascript
e nunca
passássemos para do, talvez estivéssemos nos perguntando por que nossa
tarefa nunca é preenchida, mas como é um script de tipo ,
ela nos dará esse erro enquanto escrevemos nosso código Portanto, não teremos erros
silenciosos falhando
enquanto nosso aplicativo estiver em execução Então, tudo o que precisamos
fazer aqui é escrever a propriedade a ser feita e, em seguida, passar a tarefa a fazer e salvá-la. E aí está.
Temos que fazer um, fazer dois e fazer três, e assim como escrevemos isso em nossa simulação, sabemos que estamos passando os dados corretos Incrível. A próxima coisa que
vamos querer fazer é começar a estilizar isso, certo? Porque temos algumas coisas que queremos fazer aqui. Queremos ter uma
pequena caixa de seleção, queremos ter um
pequeno botão de exclusão Queremos ter esse fundo
cinza. Você sabe, algumas coisas
que queremos realizar. Então, se formos fazer o item, podemos começar a analisar isso. Então, dentro disso, a primeira coisa que
quero fazer acho que
a primeira coisa que
quero fazer é definir esse plano de fundo. Então, deixe-me pegar uma cor aqui. Então, vamos fazer um RG, uma cor, vamos até a
imagem colorida aqui e vamos escolher uma espécie de
cinza claro para nosso plano de fundo Vou fazer isso e depois vamos defini-lo como plano de
fundo do nosso mergulho usando a cor de
fundo desse estilo. Vamos configurá-lo
para isso. guardar essa ajuda aqui. Ótimo, temos nossa cor
de fundo. A próxima coisa que
vamos querer
fazer é provavelmente adicionar algum espaçamento abaixo deles e, em seguida, adicionar o raio
da borda Então, vou adicionar isso fazendo uma margem inferior de,
digamos, uma RAM. Dessa forma, cada coisa nova para fazer isso for adicionada,
teremos esse espaçamento. E então também vamos
adicionar, hum, o raio da borda de, vamos fazer 0,25 E
digamos que a última coisa que vamos querer
fazer aqui agora é adicionar um pouco mais de preenchimento para que haja um pouco
mais de espaço ao nosso redor para fazer Então, adicione o preenchimento e talvez
também
façamos uma RAM, apenas por toda Tudo bem, legal. Então, isso
parece bastante decente por enquanto. A próxima coisa que acho que
vamos querer
abordar são os
elementos reais internos, certo? Queremos ter essa caixa de seleção e
aquela lata de lixo Acho que a maneira
mais fácil de pegar a caixa de seleção provavelmente usar a caixa de seleção de
material. Sim, nós só queremos algo
realmente básico como isso. Queremos que ele seja desmarcado
primeiro e depois marcado à medida que o usamos Na verdade, podemos simplesmente
copiar essa linha de texto aqui
e incluí-la. Antes de podermos pré-dobrá-la, retiraremos esta
peça que está etiquetada aqui da forma como eles
querem etiquetá-la. Se quisermos incluir uma
etiqueta com a caixa de seleção, podemos, mas vamos
estilizá-la separadamente. Em seguida, adicionaremos
essa importação de maturely by Então, se estiver aqui,
temos que fazer coisas incríveis. Outra coisa que podemos fazer é embrulhar arte para fazer em um elemento
tipográfico, pois
é uma tipografia de elementos E guarde isso, legal. Em seguida, queremos
adicionar uma lata de lixo. Não tenho certeza se eles
têm um ícone de lata de lixo, mas se tiverem,
seria ótimo. Vamos experimentar o lixo Incrível, eles
têm um ícone de exclusão, podemos realmente acessá-lo. Nós podemos copiar isso. Use isso em nossos componentes, eu me pergunto se. Sim, e podemos mudar
a cor, o que é ótimo. Vamos continuar e vamos
deixar isso aqui, desculpe. Vamos colocar o ícone
em nosso projeto aqui. E então vamos
chamar o ícone de exclusão aqui. Isso é ótimo, temos
nosso ícone de exclusão aqui. E então devemos ser
capazes de definir a cor nela. Então, se digitarmos em
cores e colocarmos, acho que provavelmente haverá
perigo ou erro. Provavelmente, o erro deve
ser a cor vermelha. Se guardarmos isso, ótimo. Temos uma lata de lixo vermelha. Incrível. Você notará
, porém, que tudo isso está descendo diretamente
em linha reta, o que não é o ideal. O que queremos
fazer para corrigir isso é na verdade, basicamente configurá-lo para estar em uma caixa flexível outro lado e depois
separá-los de lá Então, vamos criar um mergulho que contorna a caixa de seleção
na topografia Porque, se você se lembra
do nosso exemplo, queremos que eles permaneçam
no lado esquerdo e que o delete
fique no lado direito. Em seguida, vamos
tornar essa tela maior do tipo flex box Configure para flexionar isso. A mesma coisa aqui, vamos adicionar esse adereço,
digamos que também estamos alinhando itens no centro porque eles estão um pouco instáveis. E
faremos a mesma coisa aqui Legal, tudo
parece muito bom. A última coisa que
vamos querer fazer é definir esse mergulho superior para o
conteúdo a ser espaçado entre Queremos que basicamente esse div e esse ícone de exclusão
estejam o mais distantes possível E uma coisa que
vai nos ajudar nisso é
definir um mínimo com esse contêiner externo, porque no
momento não há muito espaço
entre eles. Certo? Então, para fazer isso,
vamos ao nosso contêiner de
tarefas e vamos
definir uma largura mínima,
digamos 40 de largura de visualização, uma, se for isso,
isso é muito bom. Então, temos nossas tarefas, nós os temos preenchendo
linha por linha Temos nosso cabeçalho, ao
qual, na verdade, vou
adicionar uma margem na parte inferior de apenas uma RAM. E temos o que fazer, e nossa caixa de seleção está marcando
e desmarcando, mas agora nenhum
dos nossos botões ou ícones está fazendo Então, vamos fazer com
que eles façam coisas. Então, o que também precisaremos
fazer aqui para permitir essa funcionalidade é envolver nosso
ícone de exclusão em um botão. Então, acabei de importar o
botão do material. Eu, eu não tenho. Agora eu importei o
botão do Material UI, e agora ele é na verdade um botão. Então, quando você passa o mouse sobre ele, vê que ele realmente
se transforma em um botão. Há um pequeno estado
de foco, então temos certeza de que é essencialmente
um botão Tudo bem, então a outra coisa precisaremos
fazer agora, certo, em vez de
usar esses dados simulados, vamos realmente querer usar dados reais em algum momento Então, para realmente
inserir os dados reais, precisaremos de
uma entrada, certo? Então, vamos continuar e
criar nossa opinião. Vamos criá-lo aqui
mesmo neste
novo contêiner. Eu crio, acredito em material. Tem uma entrada de texto. Opção de entrada de texto. Campo de texto de maio. Sim, é um campo de texto
e acho que queremos exatamente como o campo de texto
delineado realmente básico Então, novamente, vou copiar
a primeira linha das
opções aqui, a documentação, e
colá-la em nosso projeto. E vou
fazer uma solução rápida para
poder importar o campo de texto. E se voltarmos, tripulação, tudo
bem, está lá. Mas também precisamos de um botão. Então, vamos criar um botão separado usando apenas o mesmo componente de botão,
que será um botão Enviar. Ótimo. Então, temos o botão e o botão
Enviar próximos um do outro. Na verdade, vou embrulhá-los em um mergulho para que fiquem contidos, assim como todo
o resto. E então eu posso adicionar
estilo a eles para fazer com que as coisas pareçam do jeito
que queríamos com o div Eu vou fazer a
mesma coisa. configurar e fazer dela uma caixa flexível Então, vamos
fazer o Display Flex. E você acha que está
fazendo o mesmo tipo de padrão repetidamente? Uma coisa que você pode fazer é criar algo como um
componente de estilo que
é apenas um contêiner
que
cria automaticamente uma caixa flexível toda vez E então use isso em vez
de usar divs básicos. Isso é algo que você pode
querer fazer se estiver criando um projeto maior ou apenas
pensando em otimizações Display Flex, vamos adicionar uma
margem inferior de um M. Sim
, está muito bom Eu quero fazer com isso. Bem, vamos também, desculpe, vamos adicionar alguma margem ao
lado da nossa entrada. Margem, certo? Vamos fazer um M novamente. E eu quero fazer algo
com esse botão aqui para que ele fique
um pouco mais firme. Então, se eu for até o
botão LI de contido, temos delineado, temos texto Acho que o que queremos fazer
é ter um botão contido. Então, na verdade, vou
adicionar essa parte aqui que diz que variante é igual
a contida em nosso botão Vamos guardar isso. E agora você vê que temos um pouco mais
de um botão contido. Mas você também notará que
é muito, muito alto. Não sei se queremos que
seja tão alto. Acho que pode ser
por causa da nossa caixa flexível. Então, acho que o que posso fazer
aqui é, na verdade, apenas alinhar os itens no
centro, o que deve fixar a altura extra
do nosso botão Vamos tentar isso. Diga
isso e ótimo. Sim, está de volta ao
tamanho normal. Mas sim, eu gosto do botão, mas acho que quero manter um tema semelhante de
estilo semelhante em toda a coisa. Então, o que vou fazer com o botão
aqui é, na verdade, alterar o plano de fundo para
corresponder à nossa nota linear no hot back ao
nosso arquivo TSX de índice Eu literalmente vou
pegar essa cor de fundo aqui, copiá-la e voltar para o
nosso elemento de botão. E dentro do adereço X
que vou adicionar aqui, vou simplesmente colocá-lo e salvá-lo.
Lá vamos nós. Nosso botão funciona automaticamente, então vamos comentar
isso por um segundo para que possamos realmente
dar uma olhada nisso. Era branco e azul. E então, quando,
deixe-me adicioná-lo novamente. Ainda é branco,
mas agora tem esse gradiente linear
funcionando muito bem A próxima coisa que queremos
abordar é a entrada real. No momento, o rótulo
diz descrito. Vamos mudar isso. Portanto, é um
pouco mais rápido. Digamos, talvez, adicione um
novo ponto e salve-o.
10. Adicionando um estado global: A próxima coisa que vamos
querer fazer aqui é
basicamente garantir que nossas tarefas estejam em
alguma ferramenta de gerenciamento estadual. Vamos querer considerar algo como Redox ou Z. Stand, pessoalmente,
acho que o Redux pode ter um pouco de clichê
demais
para este projeto neste para Porque na verdade é
um aplicativo muito simples de fazer. Não temos muitas ações
complexas de interface do usuário. Acho que o simples uso de um em vez disso pode
ser o caminho a percorrer. Se consultarmos a
documentação do stand, podemos descobrir como
instalá-lo e fazê-lo funcionar. Na verdade, é como um sistema de
gerenciamento de estado mais simples. Então, vamos instalar o stand em nosso projeto. Agora
que ele está instalado, vamos continuar e eu vou criar uma nova pasta aqui e vou
chamá-la de store. Então, se você nunca trabalhou
com a loja antes, basicamente é apenas
um lugar onde você, seu estado,
vive essencialmente nela. Simplificando, essa loja que vou criar
se chama index e é aqui que fica nossa loja. Esse
será o arquivo da nossa loja. Veja a
documentação deles aqui. Basicamente, use isso para realmente
criar nosso componente. Então, vou colocar isso
lá e então podemos modificá-lo para se
adequar ao que estamos fazendo. Então,
o que isso faz aqui é importar essa função
criada de um suporte. E criamos uma variável aqui chamada store, que
chama create. E então, basicamente,
esta é nossa loja aqui. Isso
cria nossa loja. Nesse caso, os ursos na verdade, se
transformarão em todos. Para começar, será uma
matriz vazia. Quando vamos acessar nossos afazeres, é
aqui que eles
vão morar. Vamos simplesmente adicionar isso à nossa configuração de espaço de
trabalho. Então vá pegar isso.
São. Tudo bem. Então, em vez de
aumentar a população, vamos realmente querer criar algo chamado adicionar. Isso vai
ser o que acontece quando
clicamos em Enviar e isso adiciona nossas tarefas
à lista de coisas. Vamos definir o estado
em vez de ursos para qualquer que seja o estado
atual de fazer, em vez de mais
um que vamos fazer, talvez
tenhamos que colocar agrupá-lo em uma matriz, desculpe. Vamos fazer
qualquer que seja o estado de qualquer
matriz anterior e, em seguida, adicionar o novo para fazer isso em vez
de state mais o novo. Ah, desculpe, esse foi o
lugar errado que vamos realmente passar para fazer e mais
o novo para fazer. Vou dizer que estou recebendo alguns erros
aqui porque, novamente, precisamos colocar os tipos corretos
neste projeto para que ele
funcione corretamente. Então, na verdade, vou
criar mais um tipo e vou criar
mais uma pasta para o tipo. Então, vou criar
uma pasta chamada types. Vou criar um novo arquivo, índice S, e
será aí que todos os
nossos tipos serão criados. Dessa forma, se eu criar
um tipo, por exemplo, não preciso
recriá-lo em cada arquivo, criar uma interface
em cada arquivo Posso simplesmente exportá-lo e acessá-lo em todos os arquivos para
que possamos manter nosso código seco. Então, essa é outra
maneira de criar um tipo. Vou criar
o tipo para fazer. E, assim como a interface, ela nos permitirá digitar com
o que estivermos trabalhando. Então, vamos realmente pensar sobre isso por um segundo
aqui, porque isso vai ser algo
que podemos modificar algumas vezes ou podemos criar uma vez e depois construir
o código. Então, quando analisamos nosso aplicativo de
exemplo de tarefas, certo, queremos poder
adicionar o Tarefas, certo? Portanto, tem que ter algum tipo de descrição ou o que quer que
signifique. O que fazer é, como você mencionou antes,
queremos ter um ID exclusivo Então, essa também é outra propriedade que nossas tarefas deveriam ter. Então, queremos uma descrição
e um ID. Provavelmente queremos rastrear se está
marcado ou não Porque se quisermos que ela
persista quando a página for recarregada. Não podemos simplesmente colocá-lo ao vivo
no lado do cliente, certo? Ele precisa morar em algum lugar
da loja. Isso não vai mudar
de recarga para recarga. E, finalmente,
queremos poder excluí-los. Então, novamente, exclua tipos de
vidas com essa capacidade de identificação. Para excluir uma
tarefa específica, é bom que ela tenha um ID. Então, acho que
estabelecemos três coisas para fazer. Deve ter ou três propriedades. Vamos dar a
ele uma propriedade de ID, que provavelmente será uma string. Provavelmente vamos
fazer disso, desculpe, provavelmente
vamos
fazer disso um Provavelmente vamos
dar uma descrição. Também será uma corda. Finalmente, vamos
dar a ele uma propriedade verificada. Então, se está verificado ou não, isso vai
ser uma bolha Então, verdadeiro ou falso. Deixe-me exportar esse tipo para que possamos
acessá-lo em outros lugares. E então eu vou
importá-lo aqui. Vamos ver. Acho que podemos, na verdade,
oh, você sabe o que é. Preciso criar outra, preciso criar mais
uma interface, mas isso é só para a loja, então preciso criar
um tipo de loja para fazer. Basicamente, isso nos
dará todas essas opções. E vamos mudar isso, mas removendo para Do,
basicamente precisamos definir
quais tipos são esses. Vai ser uma matriz para fazer. O Array importará
os tipos de tarefas a fazer. Uma matriz de Todd to do será uma função
que inclui do, que é do tipo string Na verdade, você
sabe o que,
isso não é , provavelmente será
uma descrição. Então, vamos mudar isso. Vamos mudar isso aqui. E
vamos mudar isso aí. Guardaremos isso, depois retornaremos
e, em seguida, o último aqui. Ou talvez tenhamos mais dois. Então, vamos remover para fazer isso, essa será nossa exclusão. Vamos pegar um
ID do tipo string e tentar funcionar. E então, sim, então
vamos mudar isso para remover. Para fazer isso, sabemos
que é isso que deve ser acomodado por
enquanto Tudo bem, então estamos
recebendo um erro aqui. Ah, porque não
aplicamos nossa loja para agir como nosso estado em nossa
loja com script de tipo. Depende meio que para
onde as coisas estão indo. Mas geralmente você
pode colocá-lo ou menos na função aqui. exemplo, quando você está
criando um efeito de uso, você o coloca logo
após as palavras efeito de uso, mas logo antes
do colchete aberto Então, acho que posso colocá-lo
aqui mesmo depois de criar. Então eu vou, porque
é basicamente um gancho. Então, vou
escrever na loja Do, vou fechar
o suporte e salvá-lo e pronto. Tudo bem, os Is mudaram. Diz que estou perdendo as
seguintes propriedades. Adicione para fazer. Oh, você sabe o que? Isso é só porque eu
digitei de forma diferente. Deixe-me fazer com que
tudo seja minúsculo. Eu só estava dizendo que não fui removido para fazer isso.
Vamos criar isso. Então, vamos pegar uma identidade e ela não
retornará nada por enquanto. Oh, não, não gosta disso. Não. Na verdade, deixe-me resolver, ok, deixe-me resolver dois problemas. Vou
consertar esse anúncio para fazer. O que vamos
fazer aqui é acreditar,
oh, você sabe o que, bem, são
algumas coisas diferentes. Alguns erros diferentes
que estamos recebendo aqui. Portanto, o operador de propagação
realmente
precisa acontecer no estado para fazer isso, talvez não o coloquemos de volta em
uma matriz. Isso vai resolver isso? Agora, indique. Vamos
terminar de criar nossa tarefa removida e, em seguida,
podemos resolver essa outra questão, vou apenas copiar
e colar. A maneira como vamos
descobrir o que fazer, estamos removendo para basicamente acessar todas as nossas
tarefas e queremos filtrá-las para as tarefas
que não estamos mais usando. Tudo bem. Fazer o que
não queremos mais fazer será, em vez disso, o
que devemos fazer. Um estado a ser
filtrado por qualquer
filtro a ser feito pelo estado de ID Filtro Dom Dodd. Ford é o principal Estou faltando outro suporte
aqui indicado no filtro Queremos, vamos
pesquisar o filtro. OK. Vamos usar
um filtro correto que não seja igual ao DID. Isso deve funcionar. Vamos descobrir por que esses erros
estão ocorrendo agora. Tudo bem, então, olhando para isso, o que
foi removido está
faltando no tipo de tarefa a fazer. Nunca adicione o que fazer, mas é obrigatório
no tipo para fazer o que é armazenado. Oh, esse é o único
erro ao chegar aqui? Claro. Todas as minhas vírgulas estão
no lugar certo Limpe, removido para fazer,
de ambos. Vamos dar uma olhada apenas
no anúncio para fazer erros. Vamos ver o que está acontecendo aqui. Está muito claro, mas nunca definido. Então, um pequeno
erro aqui é que na verdade,
provavelmente só precisamos remover esses colchetes. E então, em vez de apenas
passar a descrição, o que realmente
queremos fazer é criar algo novo para fazer, certo? Então, na verdade,
queremos criar um ID, ID
exclusivo, que
será uma string. E então vamos
criar a descrição, que será apenas
a descrição. E então também vamos
adicionar um estado de verificação. Então, será
verificado e começará como falso. Então, o estado de verificação, agora não podemos simplesmente passar uma string
vazia para cada ID. Na verdade, vamos
querer um identificador exclusivo. E para isso,
provavelmente
usaremos uma biblioteca UUID, qual o NPM tem pelo menos uma Vamos usar
esse único UID e ele
basicamente nos permitirá
criar IDs exclusivos
para nosso projeto Então, vou
instalá-lo aqui. E então eu vou
importá-lo em nossa tempestade e salvá-lo. Ah, e você sabe
o que, eu acho que
preciso instalar e salvar a Deb. Acho que
às vezes recebo esse erro. Ok, legal. E então, se tudo mais falhar, basta fechá-lo e
abri-lo novamente. E às vezes isso
apenas limpa o ar. Oh, vamos me dar uma sugestão
aqui, deixe-me tentar isso. Desista, volte em mais tempo. Tudo bem. O
erro perfeito foi corrigido. Tudo bem, então nós
queremos, isso deve funcionar. E então, em vez de
passar uma string vazia, acredito que o que eles
sugerem aqui é que, sim, chamamos o UID
sempre que precisarmos Então, antes e
depois, vamos
chamá-lo e isso deve criar um ID
exclusivo para nosso novo fazer. Incrível. Então, acho que estamos praticamente configurados
na área de identificação. Acho que não podemos
instalar mais pacotes. Trabalhamos com o suporte Z agora para realmente acessar o
nosso e adicioná-lo à nossa lista e usá-lo
para fazer em vez de também. Acho que podemos comentar
o que fazer agora. Acho que
resolvemos o erro que estávamos cometendo,
que é,
na verdade, com base no nível superior em que estamos indo Tudo bem, muito legal.
Ambos devem estar funcionando agora. Opte por voltar para fazer o item. Vamos meio que nos conectar
a tudo agora e fazer com que tudo funcione da
maneira que queríamos. Então, acho que precisamos
estar no contêiner, então queremos fazer. Então, vamos começar com
isso. Então, vamos pegar o que fazer. Portanto, fazer constantemente é igual a este livro
guardado aqui em um estande E então queremos
conquistar o estado. E no estado as coisas para fazer isso estão presentes
nesse estado, certo? Então, essa pequena matriz que
criamos no início, é o
que queremos
pegar para fazer aqui, D não é uma tigela, é isso que está nos dando esse erro, na verdade,
oito corretamente. Tudo bem. É apenas
um erro de tipo que estamos recebendo porque o
estado tem qualquer tipo. Acredito que existam alguns
tipos de guias de script que podemos seguir aqui
acessando nossa loja. O que eu não exportei para a loja? Exporte a loja. Sim, eu tenho que exportar a loja. Caso contrário, não podemos usá-lo. Esse era o problema. Eu estava
tipo, por que isso não está funcionando? Tudo bem, vamos fechar isso mais
um pouco. Abra-o novamente. Oh, ainda estamos
recebendo o erro. Isso é muito interessante.
O que dizia? Digite, mas está importando
a loja errada. A loja. Na verdade, renomeie isso de forma um
pouco menos confusa. Então, vamos chamar
isso de To Do Store. E eu vou
ligar para a Store Store. Eu importei a loja errada, então preciso importar a
loja da loja. Então eu posso fazer o que
eu estava tentando fazer. Eu queria saber por
que não estava funcionando. Tudo bem, então o Estado
será o Estado a ser feito. E você vê como um script de tipo que um pronto cria, como esse tipo
de documentação embutida. É muito bom,
nesse sentido, que você possa simplesmente descobrir o que está
perdendo, essencialmente. Tudo bem, então isso
será nosso dever. Portanto, devemos ter uma
lista do que devemos fazer. Ainda não temos nada para fazer, mas será
aqui que moraremos. Se eu continuar e mudar
para dois para fazer, não
devemos ter dados porque ainda não precisamos fazer isso. Então, isso está realmente funcionando. Então, sabemos que quebramos
completamente
nosso aplicativo ou, você sabe, o
alteramos corretamente. Então, vou encerrar isso. Estou recebendo um pequeno
erro aqui dizendo que o tipo de tarefa
não pode ser atribuída a fazer E isso está correto
porque, na verdade, To Do, originalmente o
definimos como uma string. Então, o que realmente precisamos
passar é fazer uma descrição. A mesma coisa com a chave aqui. Precisamos, em vez de passar
o objeto de fazer, precisamos passar para o Dod e
salvar isso, ter esses erros A próxima coisa que
vamos querer fazer agora é conectar nosso anúncio
para que
possamos realmente adicionar
a mensagem de que
vamos voltar a publicar Estaremos em nosso
contêiner de tarefas e, em seguida,
pegaremos nossa função
, que é ad to do. Então, vamos
fazer a mesma coisa. Você armazena, armazena,
agrupa, declara. E então vamos pegar um anúncio
estadual para fazer. Nós
vamos salvar isso. E então o que vamos
fazer é chamar isso quando o
botão Enviar for clicado, certo? Então, poderíamos fazer isso, poderíamos realmente
fazer isso no Submit. Podemos criar,
podemos transformar isso em um componente de formulário e podemos realmente criar uma função
manipuladora para isso Vamos criar um
manipulador chamado Hand Submit. Queremos fazer duas
coisas. Queremos passar um evento porque,
basicamente, o que vamos acabar tendo que
fazer é direcionar essa entrada e curtir o
valor dessa entrada, então queremos passar no caso
do clique, qualquer tipo por enquanto, o que não
é a melhor prática, mas isso só vai
eliminar o erro que
estamos prestes a encontrar. Então, chame o evento, evite que a página seja recarregada
toda vez que a adicionarmos para fazer O que vamos fazer
agora é chamar nosso anúncio para fazer. Então, vamos
adicionar To Do. E a tarefa que estamos adicionando
será nesse evento, então será o final
do evento. Teremos que
atacá-lo, certo? Portanto, esse manipulador será chamado no envio. Em nosso formulário, temos uma propriedade
especial chamada envio que, basicamente,
quando você envia o formulário, ela realmente chama qualquer
função que você deseja chamar. Portanto, nosso onsubmit será esse identificador
a ser feito. Então, como resultado disso, um evento será passado
para esse identificador para fazer. Por isso, queremos adicionar
nossa meta de tarefas. Esse evento será o alvo do evento porque o formulário envolve vários elementos Será o primeiro
elemento que estamos almejando. E então
será o valor disso. O valor do elemento será o que
passaremos para nosso anúncio fazer, que é a descrição. Eu sei que provavelmente foi
muita coisa para absorver. Vamos voltar mais
uma vez. Criamos um componente de formulário, usamos o elemento de formulário. O elemento do formulário tem uma propriedade
incorporada chamada de envio sempre que seu formulário é
enviado, e é isso que acontece. Criamos essa função
chamada handled to do, que evita que o padrão
impeça o recarregamento
da página quando clicamos no botão
Enviar ou enviamos o formulário E então também acrescenta coisas para fazer. O anúncio a ser feito
pegará essa descrição, esse valor da entrada, e então o enviará
para nossa loja e nos dará o que fazer. Isso criará uma relação com uma
nova ID e o estado de verificação das falhas,
que deve funcionar muito bem A última coisa que
vamos querer
fazer antes de prosseguirmos e adicionarmos a necessidade de fazer é adicionar
o tipo ao nosso botão. Então, você quer que
o botão seja do tipo enviar. Há duas maneiras de
enviar isso agora. Você pode pressionar Enter ao adicionar seu valor ou
clicar em Enviar. Queremos ter certeza de que
ambos estão funcionando corretamente. Agora, o botão
é digitar Enviar. O formulário sabe que,
quando pressionam esse botão, pretendem enviar e
deve funcionar adequadamente. O que
vamos fazer é testá-lo. Então, vamos
adicionar o que fazer e ver se aparece. Apareceu.
Temos a primeira coisa a fazer e nosso anúncio está funcionando corretamente. O que vamos
querer fazer agora é que nossa remoção funcione corretamente.
Então, isso é muito parecido. Só teremos que
fazer isso em nosso componente de item
a fazer. Então, passar para fazer o
item realmente
prosseguirá e nós o
adicionaremos ao nosso botão aqui Vamos adicioná-lo ao botão de exclusão que
criamos. Então, as
primeiras coisas que precisamos fazer. Então, isso vai
ser removido para fazer. Removido para armazenar nossa loja. Vamos pegar
o Estado e depois vamos conquistar o
Estado. Remova para fazer. Incrível. Removido
corretamente, é necessário um ID, então vamos querer
pegar qualquer que seja o ID
do Dos para que possamos excluir o que fazer correto
com o botão. Agora vamos dizer “
clique para remover”. Queremos chamar remove para Do. Então, queremos passá-lo
para Do e salvá-lo. Na verdade, isso vai me dar um pequeno erro porque cometi um pequeno erro
no contêiner de tarefas. Na verdade, cometi o erro
de passar para fazer a descrição. Nós não queremos fazer isso.
Queremos passar pelo buraco para fazer. Vou dar
isso para fazer o tipo de tarefa da nossa pasta de tipos. Essa foi outra boa razão pela qual deveríamos ter
repassado nossas dívidas. Então,
você receberá outro erro aqui porque é como se todas essas
coisas estivessem quebrando agora. Vamos apenas acessar
a descrição e todos os
nossos erros devem ser cometidos. Agora, novamente, esse é outro bom motivo pelo qual o script
de tipo existe. exemplo, embora possa
parecer um pouco chato ter que resolver
esses erros o tempo todo, se não resolvêssemos o erro, agora
passaríamos
alguns minutos tentando
depurar por que o erro está
ocorrendo com o script Java Porque não há
como saber se nosso projeto está falhando silenciosamente Se fizemos
tudo corretamente,
combinamos nossa mudança para fazer, passamos a fazer para o ID Vamos adicionar um segundo para fazer isso, só para ter certeza de que, se a excluirmos, é a correta
que estamos excluindo E vamos
tentar excluir para fazer. Ninguém funcionou perfeitamente. Então, agora podemos adicionar coisas a fazer, podemos remover as. A última coisa que
queremos fazer é provavelmente, eu acho, desculpar. As duas últimas coisas que
queremos fazer são rastrear o estado
da verificação. E então, se você perceber quando eu
atualizo esta página, persista. Então, queremos ter
certeza de que nosso T está persistindo, está usando Enfrente isso primeiro. Vamos
abordar a persistência primeiro Para lidar com a persistência,
usaremos
o middleware
incluído no suporte Z. Então, o que
faremos aqui é importar, importar ferramentas de profundidade e
importar persistência E, como você pode ver
aqui, tudo o que eles fizeram foi, na verdade, incluir o aplicativo
, incluir ferramentas
detalhadas na loja e persistir E isso só
permitirá persistir. Eu acredito que isso faz isso, salvando-o no armazenamento local. Ele será salvo no armazenamento
local do seu navegador e, toda
vez que
você reativá-lo, poderá
acessar os mesmos valores. Se você o configurasse
no armazenamento da sessão
, sempre que sua
sessão expirasse, você
poderá
acessar esses valores novamente. Vá em frente e
envolva nosso aplicativo nisso. Coloque aqui, Opa, pegue esses dois lá E então queremos chamar a função
set power. Também estou cometendo um erro aqui. Preciso remover
esse suporte aqui. E então tudo isso
deve ser transferido para o salvamento que
eu acho que tenho mais alguns. Alguns parênteses demais, alguns
poucos colchetes, mais dois. Guarde isso. Ainda estamos
recebendo um erro. Preciso passar pelas opções. Esse é o meu bastão. Como você pode ver aqui, mantenha o estado real com o
qual você está trabalhando e, em seguida, ele cria algo para nomeá-lo Isso porque quando você
olha em seu aplicativo, em suas ferramentas de,
ao inspecionar, você realmente verá um nome
presente para sua loja Então, vamos seguir em frente
e dar um nome a ele como o segundo argumento
a ser feito. E guarde isso. Coloque-o dentro do suporte direito. Eu adicionei um? Não, não, não. Eu o coloquei
entre colchetes errados É isso que está aqui. Persist não pode ser atribuído
a um tipo de armazenamento. Por que isso é definido como um passe definido aqui? Esse é o problema. Então, eu só preciso tirar isso, aquilo e então isso
realmente eliminará nosso
problema extra de colchetes que estamos tendo Portanto, era apenas uma seta
extra que não precisava estar presente
em um parâmetro extra. Então, sim, agora
configuramos o Persiste. Então, se tivermos feito isso corretamente, retornaremos ao nosso aplicativo. Refresque-o um pouco aqui. Adicionar para atualizar ração
da página para
corrigir essa hidratação O que essa hidratação está basicamente dizendo é que
tudo o que ela cria
não é necessariamente o que estamos
obtendo e que estamos persistindo É diferente a cada
vez. O que é justo o suficiente. Então, o que podemos fazer para corrigir essa hidratação é,
na verdade, executar um efeito de uso simples para garantir
que o que estamos vendo
seja como uma
página de carregamento, apenas para garantir que a
coisa correta seja carregada. Então, o que vamos
fazer, vamos
executar aqui em nossa página de índice e vamos apenas
criar carregado. O conjunto está carregado. Uma forma muito simples de reação. E vamos
chamar apenas de efeito de uso aqui. Mas execute uma vez e, uma vez executado, vamos
definir se é carregado como verdadeiro. Então, basicamente,
verá que, você sabe, a página está carregada. Vai ver com
quais dados estamos trabalhando e depois
se tornará verdade. O que queremos fazer agora é mostrar isso para fazer o contêiner somente quando o contêiner está
carregado corretamente. Não devemos cometer nenhum erro. Não, estamos dormindo nela. Por que isso foi feito antes? Essa é minha aposta. Acabei de dizer isso para a coisa errada por mais tempo. Sem erros de efeito de uso,
sem erros de hidratação. Então, vamos
para a próxima peça. Tudo bem, então a peça
final que queremos fazer é lidar com
nosso estado de verificação, certo? Queremos ter certeza de que, quando
for verificado e atualizado,
ele realmente permaneça verificado No momento, está sempre padronizando
os padrões. Então, o que precisamos fazer
para isso é
definir o estado de verificação
dentro do estado. Quando está marcado,
ele o passa para o estado e isso persiste
como parte do estado Então, o que vamos fazer agora
é voltar ao índice. E vamos adicionar
uma ação final aqui. Com a ação de alternar marcada, obtenha a ID de qualquer coisa
com a qual estamos trabalhando E então ele seguirá
a mesma estrutura
em que se define, ele faz mais algumas coisas. Em seguida, vamos
adicioná-lo aqui para que não verifiquemos a opção de erro, que é basicamente
a mesma que No que diz respeito ao script
de texto, string equals. Então, o que queremos fazer
aqui agora, vamos ver. Queremos descobrir qual dos está
marcado ou não Tudo bem, vamos, vamos
seguir em frente e pegar nosso estado ponto a ponto
para fazer sobre cada coisa a fazer. Tudo bem? E se isso bastasse, queríamos fazer
uma das duas coisas. Se for igual à
ID, quero retornar, quero retornar o
que quer que seja. Então, queremos retornar
o ID e a descrição. Mas queremos configurar o para fazer
o que não deveria ser feito. Só precisa ser o
oposto do que era. Então foi verificado,
deve ser desmarcado. Se não foi verificado, deve
ser verificado. Se não for esse o caso, só
queremos voltar a fazer. Eu cometi um erro. Só queremos definir como verificado
porque já sabemos que é
necessário
verificar dois argumentos. Temos um para colocar
isso na área errada, provavelmente é por isso que
estou recebendo um erro. Ah, não. Sim, e trabalhar se eu
disser que sim, isso deve funcionar. Tudo bem, legal. Então,
pegamos nosso, examinamos e
mapeamos
nosso Do para agarrar o
indivíduo a fazer E estamos verificando
cada uma delas para fazer, então queremos ver se
a ID dessa tarefa deve ser feita. Propriedade ID ID do Tarefa. Corresponde ao ID que
estamos passando. Quando verificamos isso, dobrando a verificação, se coincidir Então, sim, queremos passar o
resto do parâmetro para fazer,
mas, para o parâmetro
check,
queremos passar o
oposto do que era. Então, seja qual for o parâmetro de
verificação, queremos passar, você
sabe, se fosse verdade queremos passar
quedas, etc Se não corresponder a
todos os outros dois Dos, só
queremos devolver
isso para fazer e seguir em frente. E então, dessa forma, vamos realmente
seguir em frente e experimentar isso. Então, vou voltar
para fazer o item e depois vou
passar o Target, com o
botão marcado Vou usar a
loja mais uma vez. Marque a opção e salve
isso na caixa de seleção. Ao clicar em Eu só quero passar
na fila, vou alternar, marcar, marcar e, em
seguida, vou passar o Todd e Isso deve funcionar. Então, se eu verificar esta página e atualizá-la,
mais uma coisa eu tenho que fazer Na verdade, preciso acessar
a propriedade marcada
na caixa de seleção porque, no momento, a caixa de seleção não sabe se deve ou não
estar Certo? Estamos meio que supondo que ele saberia.
Não tem como saber. Então, o que vamos
fazer aqui é acessar a propriedade verificada. A propriedade
verificada na verdade
será o que fazer, verificada é, então é se ela
deve ou não ser verificada. Então, se eu atualizar, se eu
verificar e depois
atualizar, é o estado de verificação Incrível. Vou fazer mais um pequeno ajuste nos estilos agora
que temos acesso a esse
adereço na Se estiver marcado, quero fazer alguns estilos
diferentes. Então, eu quero mudar a cor para ficar um pouco
mais graduada. Então é como,
oh, nós fizemos isso, é como
se não precisasse mais
ser tão proeminente. Então, eu quero mudar a
cor do Tarefa. Se a opção estiver marcada,
altere a cor. Talvez algo um
pouco mais sombrio do que isso, talvez aquilo E então vamos aprovar isso. Queremos que a cor
seja o que deveria ser, então vamos passar um automático. Sim, você quer dizer
verificado não verificado? Legal. A próxima coisa que eu quero fazer é adicionar um ataque. Literalmente
marcando nossa lista, pronta para isso está a linha de
decoração de texto. Eu vou fazer a mesma verificação. Vou dizer que é a
propriedade que estou almejando, se essa opção estiver marcada Desculpe, pergunta, eu quero
escrever uma mensagem. Se eu simplesmente não quiser que a decoração do
texto
cheque, ela passa por uma linha. Incrível. Então, sim, praticamente
temos
todo o nosso aplicativo para fazer funcionando. Como mencionei antes,
você pode realmente ver onde fica a loja
para isso. Se você verificar se o aplicativo
precisa de armazenamento local aqui, você pode ver que realmente
temos ou devemos armazenar aqui. Então, temos nosso estado. Deixe-me falar um
pouco sobre isso. Então, temos nosso estado
que temos que fazer. Eles têm seus IDs exclusivos, bem, apenas os 12,
mas ele tem um ID exclusivo. Ele tem a propriedade verificada de true e tem a
descrição de a fazer. Se a desmarcarmos,
você verá que ela muda e que o to do não tem mais
essa propriedade verdadeira Agora tem uma propriedade falsa, tem a descrição a fazer
e tem o mesmo ID. Então, sim, nosso aplicativo de tarefas
está funcionando totalmente. A única coisa que resta a
fazer é talvez hospedá-lo. Mas podemos abordar isso
em uma lição diferente sobre como
hospedá-lo usando o Verselle Na
verdade, o Next S e o Verselle estão conectados. Acho que Versell criou o próximo S, então hospedou usando sell Mas abordaremos isso
em uma lição diferente. Então, sim, espero que isso
seja útil para você. Se você tiver alguma
dúvida,
deixe um
comentário na seção de comentários abaixo. Se você gostou desta lição, deixe um
comentário também. Isso realmente ajuda, meio mostrar isso para outras pessoas que desejam fazer o curso
11. Conclusão: Conclusão, falamos
muito neste vídeo, desde as origens
do react
até a criação de seu próprio aplicativo para
fazer totalmente funcional usando o próximo JS. No futuro, você
deve ser capaz de
enfrentar qualquer projeto de reação
que surja em seu caminho. Até mesmo coisas com script de tipo
para pesquisar algo quando você não tiver certeza e acessar o
stack overflow Eu adoraria ver como você decidiu
implementar seu aplicativo Do. Portanto, coloque 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, todas as avaliações e vejo
cada envio de projeto. 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. Adoro ver o que
vocês têm a dizer. Consulte a página para
obter mais informações sobre isso, Saiba mais sobre codificação. Confira os outros vídeos
que tenho na minha página de perfil. Também tenho vídeos em HTML e CSS disponíveis no meu
canal e site do Youtube. Vou vinculá-los abaixo e no meu perfil se você também estiver interessado em aprendê-los, e vou ver no próximo.
Zoë Davidson, Software Engineer & Cinematographer
