Transcrições
1. Introdução: Olá, estou almoçando e sou engenheiro
de software com
anos de experiência com o React. Neste curso,
estaremos criando um aplicativo React simples que permite inserir
uma tarefa adicionada à sua lista. E depois de terminar, você pode concluí-lo clicando no botão aqui
passará pelo HTML, CSS e JavaScript do código
a partir do zero. Portanto, é o
projeto perfeito se você apenas aprender, reagir e quiser molhar os
pés com um projeto da vida
real. conhecimento de HTML, CSS e JavaScript é necessário e preferido
um conhecimento básico de
reagentes. Mas não se preocupe,
estaremos revisando tudo. Ao final disso,
você construirá seu primeiro projeto React
e
aprenderá a aplicar conceitos de react a projetos da vida
real
sem mais delongas. Vamos começar.
2. O projeto: Neste curso, você
aprenderá
a criar um aplicativo de
lista de tarefas. No final,
você deve ter um aplicativo
em funcionamento no qual você pode adicionar itens e excluí-los pressionando
o botão aqui. Agora, seu projeto
será construir sobre isso adicionando
mais recursos. Alguns exemplos de
recursos podem ser um botão que limpa
todos os itens. Talvez, em vez de remover
o mês do item feito, você pode mostrá-lo como
acinzentado em toda a dúvida. Isso ensinará a criar um componente por conta própria, como passar adereços para soldar e como manipular o estado. Para começar,
tente pensar sobre os componentes que você precisa e o estado que
eles manipularão. Depois de terminar, certifique-se de
publicar um vídeo ou um link para seu projeto
na seção de projetos e recursos abaixo. Adoraria ver
o que você fez.
3. Planejando nossos componentes e estados: Antes de iniciar qualquer
novo projeto do React, você deve planejar como
o fará. E quando você planeja, pense em duas coisas, os componentes e os
estados que você precisará. Aqui temos dois componentes que são o formulário
e o campo de texto. Dentro do formulário,
temos dois elementos, que é o campo de texto e o botão no
lado direito. Por outro lado, as
listas de tarefas podem ter muitos
subcomponentes, que são os itens da lista. E cada item da lista tem texto e um botão
no lado direito. Vamos precisar de
estados diferentes. O primeiro estágio
acompanhará os textos inseridos dentro do campo de
texto pelo usuário. Em segundo lugar, teremos uma lista
que acompanhará todos os itens que já
adicionamos à nossa lista de tarefas. Em resumo, antes de
iniciarmos nosso projeto, planejamos como será com base
nos componentes e nos
estados que ele terá. Na próxima lição,
vamos dar uma olhada
no ambiente de desenvolvimento
que usaremos.
4. Nosso ambiente de desenvolvimento: Nesta lição, vamos
dar uma olhada nas ferramentas que usaremos
para criar nosso projeto. Faremos um projeto em um site chamado
code sandbox.io. Este é um site gratuito que permite criar projetos
React remotamente sem precisar
instalar nada em
sua máquina local. Se você está apenas
começando com o React, esta é a plataforma perfeita
para você começar. Você pode fazer login pela sua conta do GitHub
ou pela conta do Google. Você pode clicar em qualquer um
desses para começar. Depois de fazer login, você verá uma página
semelhante a esta. Agora, o que você precisa fazer
é ir para este botão que diz nova
sandbox e clicar nele. O que isso permitirá que você faça é criar um novo projeto. Você pode ver que podemos
criar projetos a partir de várias estruturas como
Vue, Angular e React. Mas como este é um projeto de bricolage, vamos aqui
e depois clicaremos em React para começar. Depois que seu projeto estiver configurado, você verá uma página
semelhante a esta. No
lado esquerdo, você pode ver os arquivos em seu projeto, todas as dependências que você usa e quaisquer recursos externos que estamos usando, como fontes. No meio, você pode
ver o código que você está escrevendo e todos os arquivos
abertos. E, no
lado direito, você pode ver seu projeto React
se parece no navegador. Agora, o melhor sandbox de
código é que qualquer
alteração feita seu código aparece quase imediatamente no navegador,
no lado direito. Vamos mudar o
texto aqui da caixa de proteção de código de saudação
para hello world. Quando salvarmos isso, você verá no
lado direito que ele atualiza quase automaticamente. Nesta lição,
aprendemos como configurar o código sandbox dot IO
para nosso projeto. Na próxima lição, vamos dar
uma olhada nos diferentes arquivos que serão usados e como
estruturar um projeto.
5. Configuração e estrutura de arquivos: Bem-vindo de volta. Nesta lição, vamos
dar uma olhada
na estrutura de arquivos e pastas do nosso projeto. E também adicionaremos algum estilo básico
ao nosso projeto. Se você der uma olhada
no lado esquerdo, temos principalmente cinco arquivos. Então, em primeiro lugar,
empacotamos ou JSON. Este arquivo contém a
configuração para seus projetos , como quaisquer
dependências que você tenha e quaisquer scripts
que você tenha. Em seguida, indexamos em HTML. Estes são os primeiros cinco que são renderizados quando alguém
visita seu site. Ele realmente não tem
muito conteúdo dentro dele. Mas isso ocorre principalmente porque
todo o conteúdo do seu site será injetado
nele pelo index.js. Index.js é basicamente um
arquivo JavaScript que pega todo o código React que
você tem dentro do componente do
aplicativo e o
injeta em index.html. Todos os
componentes do React que você faz residem dentro do app.js, todas as empresas que você
fizer serão colocadas dentro deste desenvolvimento, que tem
o nome da classe de App. Ele será enviado para index.js, que o injetará no
arquivo index.html. Por fim, temos styles.css. Esta é uma folha de estilos
que aplica estilos ao nosso componente de aplicativo e
, portanto, ao projeto inteiro. Quando você está começando com
um novo projeto React, você sempre deve entrar
na pasta de origem e criar uma pasta dentro
dela, componentes de TI. Agora, sempre que você criar
um novo componente, você pode adicionar os arquivos
JavaScript e CSS para esse componente
dentro dessa pasta. Para começar,
criaremos os arquivos para nosso primeiro componente que
estará trabalhando, que será o componente
formado. O que você tem que fazer é clicar neste ícone aqui e você tem que
anotar formado ou JS. Você pode criar a folha de
estilos correspondente criando um novo arquivo e
nomeando-o de um ponto CSS. Não vamos
codificá-lo agora, mas essa é a
estrutura básica que você deve seguir ao criar
qualquer novo componente. Por fim, entraremos no
styles.css e adicionaremos algum estilo
básico para o nosso projeto, o que é uma boa
prática quando você estiver começando com um novo projeto. Então, o que faremos é, em primeiro lugar, daremos a ela uma
cor de fundo ligeiramente cinza. O que podemos fazer é dizer cor de traço de
fundo e definir o valor para hash F4, F6, FDI. Agora você pode ver no
lado direito que nosso aplicativo não cobre toda a
largura e a altura da página. O que podemos fazer é dizer
que a largura do nosso aplicativo deve ser igual a 100%
da largura da janela de visualização. E a altura do nosso
aplicativo deve ser igual a 100% da altura da janela de
visualização. Por fim, podemos ver que o conteúdo de um
aplicativo começa diretamente do topo e
queremos deixar algum
espaço no topo. O que podemos fazer é
adicionar algum preenchimento ao topo
do nosso aplicativo e dar a
ele um valor de dois REM. E depois de salvá-lo, podemos ver que o conteúdo de um aplicativo começa um
pouco abaixo do topo. Nesta lição,
analisamos alguns
dos arquivos que já estão
presentes em nosso projeto React. Criamos a estrutura de arquivos e
pastas e adicionamos algum estilo básico
ao nosso aplicativo. Na próxima lição,
começaremos com nosso
primeiro componente, que é o componente do formulário.
6. Nosso primeiro componente — o formulário: Bem-vindo de volta. Nesta lição,
criaremos nosso primeiro componente, que é o componente de formulário, passará
pelo HTML e o CSS
para este componente, e a lógica será
adicionada na próxima lição. Então, vamos começar
entrando no formulário dot js. Começaremos criando nosso
componente funcional escrevendo formulário de
exportação const igual a B. Não tomará nenhum
parâmetro a partir de agora. E criaremos o componente
funcional, então teremos que retornar o HTML, no nosso caso,
retornaremos um formulário. Então, adicionaremos as tags de
formulário aqui. E então, por dentro,
vamos adicionar duas entradas. Em primeiro lugar, haverá
uma entrada do texto do tipo. E em segundo lugar, haverá
uma entrada do tipo de envio. Vamos em frente e salvaremos isso. Agora precisamos adicionar
isso ao nosso app.js para
que possamos ver que ele entrará em app.js e leia as
duas tags de cabeçalho
aqui e adicionará nosso componente de
formulário. Agora temos que
importá-lo também. Então vamos passar por cima
da sua cabeça e dizer Importar formulário, que é o nome
do componente a partir do caminho para onde
o componente do formulário está, forma de barra de componentes de barra de
ponto. Vamos em frente e salvaremos isso. E agora podemos ver um campo de texto e um botão no
lado direito. Agora não parece tão bom. Então, o que temos que fazer é
voltar ao form dot js e adicionar alguns
nomes de classe e algum estilo. O que faremos é adicionar alguns nomes de classes aos nossos
diferentes elementos. Começaremos
adicionando um nome
de classe do formulário ao nosso elemento de formulário. Adicionaremos um nome de classe de
TextField ao nosso campo de texto. Por fim, adicionaremos um nome de
classe de envio, dash e btn ao nosso botão de
envio aqui. E então, como queremos que os estilos se apliquem
a este componente, importaremos a folha de estilos
indo para o topo e dizendo importar ponto
barra de ponto ponto CSS. E iremos em frente
e salvaremos isso. Agora temos que
definir os estilos. Então, entraremos no
CSS de ponto do formulário e começaremos nisso. Em primeiro lugar, adicionamos o estilo a todo o
nosso componente de formulário. Vamos dizer display flex. Queremos justificar o conteúdo. Para o centro. Queríamos ter uma
altura de dois REM. Queríamos ter
uma largura de 80%
da página e
daremos a ela uma margem automática, centrada na página. Em seguida, adicionaremos algum estilo
aos nossos campos de texto. Então, diremos campo dot txt. Daremos a ele uma
cor de fundo de um pouco de acordo. Então, diremos que o hash
de cor de fundo removerá todas
as bordas que ele tenha. Daremos uma borda ligeiramente
arredondada dizendo raio de traço de
borda e
dando-lhe um valor de 0,5 rem, daremos a ela uma altura
de 100% de seus pais. Nós nos livramos da margem
no lado direito
de dez pixels, então ela não fica presa ao botão. Daremos a ele um preenchimento de
cinco pixels e dez pixels. Então, quando você está
digitando, há algum espaço entre o
texto e a borda. Em seguida, daremos a ele um tamanho de
fonte de um rem. E também
lhe damos uma sombra de caixa, garantiremos que a sombra
seja 0 pixels horizontalmente. Cinco pixels verticalmente
tem um desfoque de dez pixels. E daremos a ele
um valor RGB de 218 para vermelho, verde e azul. E também daremos
uma caixa de borda de tamanho de caixa para que, ao
calcular o tamanho, os pixels na borda
também sejam levados em consideração. Agora nosso campo de texto
parece perfeito, mas uma vez que nos
concentramos nele, não queremos que o
contorno apareça e
também queremos que
a sombra mude um pouco. Vamos começar a
usar o seletor de foco. Então, diremos campo de texto de ponto. Quando está em foco. Vamos defini-lo para ter
um esboço de nenhum. E vamos definir isso
como um estilo importante. E também mudaremos ligeiramente
a sombra da caixa. Então, diremos 0
pixels horizontalmente, três pixels verticalmente,
um desfoque de cinco pixels. E daremos a ele um
valor RGB de 218 para os valores vermelho, verde e azul. Agora, quando você clica
nele, parece muito melhor. Por fim, começaremos
no botão enviar. Então, diremos dot submeter, btn. Daremos a ele uma altura
de 100% de seus pais. Damos a ele uma cor
de fundo ligeiramente azul, dizendo cor de
fundo e
dando-lhe um valor de 1993 e fazemos 55. Então diremos que os
formulários devem ser brancos. E removeremos todas
as fronteiras que ela tenha. Nós lhe daremos um
raio de fronteira de 0,5 rem. Nós lhe daremos um tamanho de fonte de um rem para que o texto
seja um pouco maior. Nós lhe daremos uma
sombra de caixa de 0 pixels, cinco pixels e dez pixels, e daremos uma cor de B1 Ff. Também adicionaremos algum
preenchimento de 01 rem. Quando passamos o mouse sobre o botão, queremos que ele pareça
um pouco diferente para que
possamos dizer que
estamos pairando sobre ele. Então, vamos escrever ponto,
enviar, traçar, btn
e, ao passar o mouse, mudaremos ligeiramente
a sombra. Então, vamos dizer box
shadow 0 pixels, três pixels e cinco pixels, e dar-lhe um valor de hash de 789. Mais fácil. Vá em frente e salve isso. E, por fim, dentro formado ou JS, alteraremos o texto
do botão Enviar para
que ele diga Adicionar. E iremos em frente
e salvaremos isso. Lá temos nosso componente de
formulário. Aprendemos a criar um
novo componente funcional. Aprendemos a adicionar o HTML
e, em seguida,
aprendemos a adicionar o CSS. Na próxima lição,
estaremos trabalhando adicionar a funcionalidade
usando JavaScript.
7. Adicionando estado ao nosso formulário: Bem-vindo de volta. Em nossa lição anterior, aprendemos a criar um novo componente funcional
usando HTML e CSS. Agora, se entrarmos no
campo de texto e
escrevermos algo, veremos que ele é
mostrado na tela. Mas o problema é que
não temos acesso ao valor que
o usuário
inseriu dentro do campo de texto. Para que seja útil, precisamos armazená-lo em
algum tipo de variável que podemos enviar para
nossos outros componentes. Então, para fazer isso, podemos usar um recurso
React chamado state. O estado é qualquer variável
que você acompanha, o que influencia como o
componente é renderizado. O que podemos fazer é ir para o
topo aqui e importar uma função chamada
estado dos EUA do React. A função de estado dos EUA nos
permitirá criar uma
nova variável que manterá um controle
do estado
do texto que o
usuário inseriu. Para fazer isso, podemos ir
até aqui e dizer const, adicionar alguns colchetes e nomear o texto da
variável. E a função que
podemos usar para modificar essa variável
será chamada setText. Irá dizer estado dos EUA, para que seja uma variável com estado e nós lhe daremos um valor
padrão vazio. Agora, o que queremos
fazer é conectar essa variável ao
valor inserido pelo usuário
no campo de texto irá para o elemento
TextField HTML. E diremos que
o valor dentro disso deve ser igual
à variável de texto. Em segundo lugar, sempre que o usuário alterar o valor
dentro do campo de texto, queremos levar
neste evento e definir a variável de texto
para o valor mais recente. Faremos isso usando o valor de ponto alvo de ponto de
texto definido. E iremos em frente
e salvaremos isso. Agora, se
formos para o campo de texto
do lado direito e
anotarmos algo. É o mesmo que era
quando começamos. Agora, para ver o valor
dentro da variável de texto, vamos imprimi-lo. Depois de pressionar o
botão Adicionar aqui. Para fazer isso, criaremos uma nova função
chamada const handle submit terá no caso de pressionar o
botão como um parâmetro, e diremos E dot
prevent default. Isso deve impedir que a
página seja atualizada sempre que pressionarmos o botão
como acontece agora. Vamos em frente no
formulário e diremos que sempre que a
função onsubmit for chamada, chame o método de envio do identificador. Em seguida,
entraremos na função e console.log o valor dentro da variável de texto e também o
redefiniremos para esvaziar. Então, diremos definir texto e colocaremos uma
string vazia ali. Agora, se
formos para o lado
direito anotarmos algo
e clicar em Adicionar. Você pode ver que o valor
foi impresso no console. Então, nesta lição, aprendemos como converter um componente que era
descontrolado e não permaneceu em
um componente que era controlado por nós
e eles teriam estado. Na próxima lição,
aprenderemos como adicionar estado a toda a nossa aplicação
e como
manter um controle de
todas as nossas tarefas.
8. Adicionando estado ao nosso aplicativo e usando props: Nesta lição,
estaremos aprendendo
a acompanhar todas as nossas
tarefas usando o estado. E também vamos dar uma
olhada em como
podemos transmitir funções como adereços que possamos adicionar nosso
item mais recente à nossa lista de tarefas usando
o componente do telefone começará
voltando para app.js. O que queremos fazer é acompanhar todos os itens da lista de tarefas. Para fazer isso, podemos usar o
estado dos EUA como fizemos antes. Podemos ir para o topo
aqui e anotar a importação. Você declara do React. Podemos entrar nesse componente do
aplicativo e dizer const para fazer e definir como fazer, que é nossa variável e está funcionando para alterar
essa variável. E podemos dar a ele um
valor de uma lista vazia. Agora, temos nossa variável
que foi declarada. Agora precisamos de uma função
que, quando dado um item, atualize a lista para que ele
contenha o item mais novo, criará uma nova função
chamada const add to do, que adicionará uma nova tarefa
à nossa lista existente. O espírito tomou um parâmetro
que será novo todo, que será apenas alguns textos. Em seguida, criaremos
a função de seta. Então vamos dizer pronto para fazer. Como queremos atualizar
o valor das tarefas, adicionaremos alguns colchetes
e, em seguida, diremos usar as tarefas existentes
usando o operador spread, mas também adicionaremos a nova tarefa
que estamos recebendo. Agora, essa função deve anexar o item mais recente à
nossa lista de tarefas. Agora, o que queremos fazer
é executar essa função e passar o novo valor sempre que
o botão Adicionar for pressionado. E para fazer isso,
precisaremos passar essa função como prop
para esse componente, que é o componente do formulário. Props nos permitem
passar variáveis e funções de um
componente pai para um componente filho. Podemos passar um prop
chamado Adicionar para fazer, e podemos definir seu
valor para a função Add to do que
acabamos de criar. Agora, entraremos no componente do
formulário e
aceitaremos esta prop e a usaremos sempre
que o
botão Adicionar for clicado. Vamos voltar para formar dot js. Aqui, no parâmetro, adicionaremos algumas chaves e aceitaremos o Add to fazer prop. Em vez de fazer um
console.log aqui. Excluiremos isso e,
em vez disso, diremos Adicionar para fazer. E passaremos
o valor mais recente dentro da variável de texto, pois isso
conterá o que for preciso que queremos adicionar
à nossa lista de tarefas. Agora, para ver o
valor mais recente da nossa lista de tarefas, o que faremos é que vamos apenas
console.log aqui. E iremos em frente
e salvaremos isso. Agora podemos ir até aqui
e abrir o console. E podemos ver que ele começa
com uma lista vazia. Vamos anotar o item um. E quando clicamos em Adicionar, vemos que ele foi
adicionado à nossa lista. Vamos adicionar o item dois também. Podemos ver que o item
foi adicionado. Nesta lição,
aprendemos
a acompanhar toda a nossa lista de tarefas. E também
aprendemos a passar funções como adereços
para componentes filhos.
9. Listar de UI usando componentes reutilizáveis: Bem-vindo de volta. Na lição anterior,
aprendemos a acompanhar
toda a nossa lista de tarefas. Nesta lição,
criaremos a lista de tarefas e os componentes do item de
lista. E também estaríamos vendo como
os componentes podem ser reutilizados, que é o que
os torna tão ótimos. Começaremos removendo
este console.log aqui. E, em seguida, criaremos alguns arquivos
JavaScript e CSS. Vamos criar os arquivos para
o componente de lista de tarefas. Então, diremos lista de tarefas dot js. Também queremos fazer a
folha de estilo para isso. Então, vamos dizer “
To Do list dot CSS”. Então, queremos fazer o item da
lista ponto js. Queremos fazer o item da
lista ponto css. item da lista interna dot js criará um componente
funcional. Então, diremos que o item da
lista const é igual a, não
tomaremos nenhum
parâmetro a partir de agora. E vamos devolver
uma div por enquanto. E também exportaremos
isso. Para o item da lista. Vamos adotar uma
abordagem do texto que queremos mostrar
no item da lista. E dentro da div adicionaremos algumas tags de parágrafo para mostrar
os textos que queremos. Também queremos o recurso de poder concluir uma tarefa. Então, para isso, adicionaremos
um botão aqui. Agora, o que queremos
fazer é
entrar no componente
dot js da lista de tarefas. Aqui será importar
o componente de item de lista porque estaremos renderizando o item da lista por meio do nosso componente de lista de
tarefas. Diremos que importe o item
da lista de barra de pontos item dot js. Em seguida, iremos em frente e criaremos o componente dirá exportar, const para fazer lista. Não pegaremos nenhum
adereço a partir de agora. Vamos apenas devolver uma nova div. E dentro da div, adicionaremos alguns itens da lista. Criaremos uma nova instância
de um componente de item de lista. Mais perto. Então, para o texto, apenas
diremos que o item um conectará isso ao nosso estado
na próxima lição. Mas, por enquanto, estaremos
usando alguns valores fictícios. Nós fizemos um. Vamos adicionar mais alguns. Então, diremos o item
dois, item três. Agora que temos o componente de lista de
tarefas, tudo o que precisamos fazer é entrar no app.js importado e renderizá-lo. Então, diremos importar lista de tarefas da lista de tarefas da barra de
componentes de barra de pontos. Vamos em frente e
renderizaremos abaixo do nosso formulário. Depois de salvarmos isso, podemos ver que a
lista inteira foi renderizada. Então, vimos que tínhamos que
fazer o componente de lista e tínhamos vários
componentes de itens de lista aninhados dentro disso, que estamos renderizando
os itens da lista. Agora, o que faremos é adicionar algum estilo aos nossos componentes. Vamos começar adicionando algum
estilo à nossa lista de tarefas. Começaremos importando
nossas folhas de estilo. Então, no topo,
diremos importar barra de pontos, lista de tarefas, nota CSS. Salve isso. Vá para o CSS de ponto de lista de tarefas. Para a classe de lista de tarefas
será adicionar os estilos. Antes disso, precisamos adicionar o nome da classe
ao desenvolvimento. Vamos dizer div, o nome
da classe é igual a dois da lista de traço. Salve isso. E agora vamos adicionar os estilos. Queremos
exibi-lo como uma coluna. Então, diremos que a direção
flexível e flexora da tela será coluna. Queremos alinhar os itens
ao centro horizontalmente. Então, diremos alinhar o centro de itens. Também queríamos fazer
a lista para estar no centro da página. Então, diremos largura de 60% e daremos a ela uma margem de um rem
e auto horizontalmente. Vamos salvar isso. Agora não parece
muito diferente, mas vamos adicionar um pouco de estilo
ao item da nossa lista também. Então, em primeiro lugar, vamos importar o item da
lista dot css. Em seguida, adicionaremos os nomes das classes. Então, chamaremos isso de item de lista. Dará ao botão um nome de
classe da caixa de seleção. Agora vamos em frente e
adicione os estilos para este ponto de item de lista interna CSS. Para começar, vamos adicionar os estilos para o item de
lista em si. Vamos dizer o item da lista. Queremos exibi-lo como uma linha. Então, começaremos dizendo que flex definirá a
direção flexível para linha. Queremos alinhar os
itens verticalmente, então diremos alinhar o centro de itens. Queremos justificar o espaço de
conteúdo entre eles
para que o texto fique à esquerda e o botão fique à direita. Então, diremos justificar conteúdo e defini-lo
para o espaço entre eles. Em seguida, adicionaremos uma
margem verticalmente para que todos os cartões
em estoque juntos. Então, vamos colocar isso como cinco pixels verticalmente e 0
pixels horizontalmente. Adicionaremos algum preenchimento
às bordas horizontais. Então, diríamos 02 EM. Daremos a ele uma largura de 90% e uma cor
de fundo branca para
que fique facilmente visível. Damos a ele uma borda arredondada. Então podemos dizer raio de traço de
fronteira. Daremos a ele um valor
de 0,5 deles. E, por fim,
daremos uma sombra. Então, 0 pixels, cinco
pixels, dez pixels. E daremos a ele um valor
RGB de 10992 . Vamos salvar isso. Agora, uma vez que passamos o mouse
sobre o cartão, queremos que ele pareça
um pouco diferente. Então, diremos o item da lista de pontos
e usaremos o seletor de foco. Vamos mudar ligeiramente
a sombra da caixa. Vamos dizer sombra de caixa. Digamos 0 pixels,
três pixels,
sete pixels e daremos a ele um valor
RGB de 205 por toda parte. Então vamos salvar isso. Agora, se passarmos o mouse sobre os itens, podemos ver que eles
parecem um pouco diferentes. Agora, finalmente, vamos dar algum estilo à
caixa de seleção também. Então, diremos a caixa de seleção ponto, que é
o botão do lado direito. Daremos a ele uma
cor de fundo branco, também lhe
daremos uma borda. Então, faremos 3,5 pixels. Será sólido e queremos que seja azul. Então, diremos que o RGB 1993255
removerá qualquer sombra que tenha. Então, diremos box-shadow nenhuma. Daremos a ele uma altura de 20 pixels e uma
largura de 20 pixels. Então queremos que seja
completamente circular, então diremos raio do corpo e
colocamos isso como 100 por cento. Por fim, quando passamos o mouse sobre ele, queremos que o cursor
seja um ponteiro. Então, diremos a
caixa de seleção de pontos ao passar o mouse, transforme o cursor em um ponteiro. Lá vamos nós. nossos itens de lista dentro da
nossa lista de tarefas, e eles têm as caixas de seleção
e, em seguida, também. Então, nesta lição, aprendemos sobre componentes aninhados e
vimos como reutilizar a competência como fizemos com os itens da lista. Agora, nesta lição,
usamos valores fictícios, mas na próxima lição vamos
dar uma olhada em como renderizar a competência
com base nos dados reais.
10. Mapeamento de estado com componentes: Bem-vindo de volta a todos. Na lição anterior, usamos valores fictícios para
representar nossa lista de tarefas. Nesta lição, vamos dar uma
olhada em como podemos
mapear nossos dados para os componentes do item da
lista. Para começar,
entraremos no componente de lista de tarefas e removeremos os
valores fictícios que temos aqui. Agora, o que queremos
fazer é
renderizar nossa variável de tarefas, que temos em
nosso arquivo app.js. O que faremos é passar essa variável para o nosso componente de lista de
tarefas, pois um prop salvará
duas dívidas e
atribuiremos a
variável de estado de tarefas a isso. Agora, como estamos passando
isso como um problema, podemos ir para o
componente de lista de tarefas e aceito colocando algumas chaves e tomando o suporte de tarefas. Agora temos que encontrar
uma maneira de mapear essa lista de texto em
uma lista de componentes. Felizmente, o ES6 tem a função
perfeita para isso, que é chamada
de função map. Se você quiser usar algum
JavaScript dentro do nosso HTML, colocará algumas chaves. O que dizemos é pegar essa
lista de tarefas de textos e mapeá-la para uma lista de componentes de itens de
lista. Para cada valor dentro, pegue o valor do texto,
que é a tarefa, e o índice atual, que estavam usando
uma função de seta. Dizemos, devolva-me para cada item, um componente de item de lista e o
texto deve ser a tarefa, dará a cada
item da lista uma chave única, que será o índice, já que são apenas
bons caracteres. E iremos em frente
e salvaremos isso. Agora você verá que está vazio. Mas quando seguirmos em frente
e
adicionamos um item, podemos ver que ele é adicionado
aqui e podemos continuar. Assim, podemos dizer o item dois, item três, e ele continua
sendo adicionado à nossa lista. Nesta lição, aprendemos
como podemos mapear uma lista de variáveis para uma
lista de componentes. Isso nos mostra o poder dos componentes e a reutilização. E essa é a
razão pela qual o React é tão popular e tão poderoso. Na próxima lição,
adicionaremos a funcionalidade Tarefa Completa e vamos dar uma
olhada em como passar adereços ao longo de vários níveis. E um caso de
uso mais complexo do estado dos EUA.
11. Adicionando o recurso das tarefas de exclusão: Bem-vindo de volta a todos. Agora temos a
funcionalidade de
poder adicionar um novo
item à nossa lista. Nesta lição, adicionaremos o recurso para marcar que
um item foi concluído. O que faremos
nesta lição é aprender a criar uma função que pegue o índice de
um item e
o remova da nossa lista. Para começar,
criaremos uma nova função e vamos chamá-la de
const, remover para fazer. E ele levará o índice do item que queremos
remover e o tornaremos
em uma função de seta. O que precisamos
fazer é criar uma cópia do nosso estado de tarefas. Então, o que vamos fazer é dizer
const fazer é copiar. E usaremos o
operador spread para criar uma cópia. Então, vamos apenas escrever
pontos, pontos, pontos pendentes. Em seguida, para remover o
item, escreverá emenda de pontos de cópia de
tarefas
e, em seguida, para baixo para
fazer o índice vírgula um. Agora temos uma variável
que contém a lista atualizada sem o item que
queríamos remover. Agora vamos salvar
isso dizendo definir tarefas e passar
a cópia de tarefas. Agora que temos uma
função que pode remover um item da lista, precisamos passá-lo para
baixo como prop para
o item da lista para que, uma vez pressionado
o botão, ele possa invocar essa função e remova a si mesmo da lista. Então, vamos passá-lo para nossa
lista de tarefas dizendo remover dois du é igual à função Remover para fazer,
o que queremos dizer. Em seguida, entraremos no componente de lista de
tarefas. Vai levar este
adereço aqui. Vamos anotar remover para fazer. Então, como já conhecemos o índice com base na
variável aqui, podemos passar uma função
para o item de lista, que será uma versão modificada da função removida para fazer. Passaremos um prop chamado removido para fazer para o item da lista. E sempre que o
item da lista chamar esse prop, chamaremos a
função remove to do que
obtivemos do app.js. Vamos passar o índice
do item da lista atual. Precisamos fazer agora é que temos que
entrar no componente do
item de lista. Precisamos usar a função
Remover para fazer. Precisamos
anotar que sempre que onclick for chamado aqui, devemos apenas invocar
a remoção para fazer prop. Porque o
componente lista de tarefas cuidará do índice no qual
ele deve ser excluído. Então, agora que salvamos isso, se clicarmos no botão, ele exclui o item. Vamos adicionar mais alguns itens que podemos ver que o
correto está sendo excluído. E se tentarmos excluir o
item número três clicando no botão,
ele será removido. Nesta lição, adicionamos a funcionalidade
para excluir uma tarefa. Aprendemos a passar adereços
por vários níveis. E também vimos um caso de uso
mais complexo da função estadual dos EUA.
12. Conclusão: Parabéns, você acabou um
projeto React inteiro do zero. Não é uma pequena façanha. Então, dê um tapinha na parte de trás. Enquanto trabalhamos neste projeto, aprendemos a
criar novas competências. Nós declaramos, passamos props para componentes
diferentes, reutilizamos componentes e renderizamos
componentes com base no estado. Agora ainda não acabou. Confira a seção de projetos
e recursos
abaixo e trabalhe na adição de mais
recursos à nossa lista de tarefas. Certifique-se de publicar seu projeto
na galeria do projeto. Eu adoraria conferir. Se você chegou
até aqui no curso, considere deixar um comentário e me dar um
seguimento sobre o compartilhamento de habilidades. Isso é tudo, por enquanto, gente, boa sorte com
sua jornada de reagir.
Laksh Dwivedee, Software Engineer
