ReactJS e Redux — crie 4 aplicativos para web [1/4] | David Katz | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

ReactJS e Redux — crie 4 aplicativos para web [1/4]

teacher avatar David Katz, Software Engineer - Coding Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

18 aulas (1 h)
    • 1. Como introduzir o curso

      1:33
    • 2. Como introduzir

      1:41
    • 3. Como instalar Reagir e ferramentas

      3:45
    • 4. Como obter um editor de código

      3:23
    • 5. Countdown em Wireframing - sua primeira aplicativo de reação!

      0:50
    • 6. Como criar seu primeiro aplicativo

      2:25
    • 7. Como editar o aplicativo

      2:09
    • 8. Como criar seu primeiro componente

      3:58
    • 9. Como estruturar o aplicativo

      8:01
    • 10. Como introduzir o estado

      2:33
    • 11. Atualizando o estado

      3:27
    • 12. Como alterar dados com o campo de entrada

      4:18
    • 13. Como criar um componente de relógio

      3:54
    • 14. Como introduzir acessórios

      1:58
    • 15. Como calcular tempo até

      6:08
    • 16. Como engatar com métodos de ciclo

      4:16
    • 17. Como adicionar métodos úteis com expressões de onças

      2:16
    • 18. Como estilizar com React

      3:57
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

4.570

Estudantes

10

Projetos

Sobre este curso

Torne-se um engenheiro de software de alta exigido, seguindo este tutorial no React JS e Redux. Como uma das habilidades mais bem pago para profissionais de web para desenvolventes para a web, aprenda o React vai abrir portas e trabalhos para você

 

Este curso baseado em projeto vai ter você em nosso curso de Crie quatro aplicativos de exemplo cuidadosamente de a sua questão de a nossa

 

Primeiro, aprenda os princípios do React JS você construindo duas aplicações. Um apresenta o ES6/Babel, e o outro como lidar com as solicitações de Web de One Com o terceiro aplicativo, aprenda como manipular os cookies de navegador. Por fim, você vai criar um aplicativo inteiro com autenticação completa e um banco de banco em tempo real para finalizar.

 

Além disso, aprenda a engenharia do Redux. Você vai descobrir que Redux de a de três passos simples!

Não se preocupe se você for novo no desenvolvimento da web. Algumas experiências de JavaScript vai ajudar, mas este curso é de garantir explicar cada novo conceito

 

Faça mergulho no React JS e Redux. Vamos começar a programar!

Além disso, aqui está um link para o repositório online para este curso: https://github.com/15Dkatz/ReactJS_Videas Video

Conheça seu professor

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Professor

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Como introduzir o curso: bem-vindo a um excelente recurso sobre como aprender a reação. Sim e Redox. Parabéns. A reação de aprendizagem colocará você um passo à frente, pois é uma das habilidades mais exigidas e pagas na indústria de software. Eu projetei este curso com um objetivo abrangente para fazer você ter reagido em um Redux em seu currículo e preparado para construir seus próprios projetos de reação a partir do zero. Neste curso, você criará quatro aplicativos. Um vai colocá-lo em funcionamento com os princípios de reagir e introduzir JavaScript es seis sintaxe. A próxima vontade usando um P I e mostrar que você tinha um acordo com pedidos da Web Em reagir. Terceiro, você aprende Redux. Ele constrói um aplicativo que também armazena informações localmente no navegador. E, finalmente, melhor de tudo, teremos um aplicativo Redox que tem educação completa para cadastrar usuários também. Como um banco de dados de volta veio, vou explicar cada novo conceito precisamente verificando e medindo cada idéia nova. Dessa forma, você tem uma compreensão completa do casaco e engenharia. Além disso, vou te contar um segredo agora mesmo. Redux pode se sentir complicado no início, mas você pode resumir a três etapas básicas. Tudo bem, se você quiser finalmente desbloquear a chave para reagir e redux e adicioná-los ao seu conjunto de habilidades ou você só quer retocar suas costeletas de desenvolvimento Web, então este curso é perfeito para você. Então, o que você está esperando? Vamos começar a codificar. 2. Como introduzir: Vamos dar um momento para apresentar. Reagir ES seis e Redux. Se você chegou até aqui, você provavelmente tem uma sensação de que reagir é uma das habilidades de engenharia de software mais populares e em demanda de hoje. Na verdade, reagir é o quinto projeto mais inicial de todos os tempos no Get Hub, e ele só vai continuar a crescer em Popular. Construída pelo Facebook e apoiada pelo Instagram e outros desenvolvedores, esta biblioteca JavaScript aparece em tantas plataformas. Estes incluem Netflix, Airbnb, site da Wal Mart e muito mais. Agora reagir é executado em JavaScript. Mas a maior parte do código de reação que você encontra será um E a seis, a versão seis do JavaScript, que saiu em junho de 2015. Agora, alguns deste código Concil olhar novo para as pessoas que ainda têm experiência em script de trabalho. Então não se preocupe. À medida que cada nova sintaxe ou conceito ES seis surge, eu me certifico de explicar exatamente o que está acontecendo neste curso. Agora vamos ter um momento para falar sobre isso. Redox Reacts nos permite construir aplicações em escala. Ele tem uma maneira de gerenciar dados para garantir que nossa engenharia se comporta de forma consistente e de uma maneira que podemos testar facilmente agora. Aprender Redux pode parecer que tentar absorver um monte de novos conceitos ao mesmo tempo é um monte de nova terminologia. Mas o essencial pode resumir-se a três passos simples, e eu vou compartilhar com você como nós construímos aplicativos neste curso, reagir geral é seis e relaxar, fazer uma ótima combinação e permitir que um engenheiros de software para fazer web incrível aplicações. Reagir tem um futuro tão promissor, e não há melhor momento do que agora para aprender. Reagir. Nós, na comunidade de desenvolvedores, mal podemos esperar para ver até onde essa biblioteca JavaScript vai. 3. Como instalar Reagir e ferramentas: usaremos um pequeno número de ferramentas para nos ajudar a reagir ao desenvolvimento. Primeiro, você precisa ter certeza de que você não tem Js baixado em seus sistemas. Para usuários de Mac, basta ir para conhecer jazz dot org e encontrar o HomeLink em casa Download Note versão 6.9 ponto quatro, o recomendado para a maioria dos usuários ou o download recomendado que está atualmente disponível. Nada de Js. Agora, se você não usar um maxus de não se preocupar, teve que baixar e encontrar o link relevante para a sua plataforma. Se você precisa do instalador do Windows ou da nota do instalador de limites tem isso para você. Assim que o download de um pacote terminar, abra-o. Você deve encontrar uma série de etapas para não para totalmente instalado no seu computador. Continue através da introdução continuou para a licença. Vá em frente e aceite tudo, em seguida, vá em frente e digite sua senha. Depois de terminar, você verá que nenhum GS foi instalado em um determinado local no computador. Geralmente é usuário local barra VIN, que é o global no ambiente PATH, acabou de abrir o terminal e uma maneira fácil de abrir o terminal em um sistema Mac é espaço de comando de imprensa, que abre um holofote futuro e ir e pressione TRM. E assim que você ver o ícone do terminal aparecer pressione, enter e boom, o terminal é iniciado. Para aqueles de vocês novos no terminal, você pode basicamente pensar nele como uma versão tipo de localizador ou a pasta explorar em seu sistema. Podemos navegar através de pastas ou diretórios digitando CD, que significa alterar diretório, então eu vou mudar meu diretório de codificação. Agora vou navegar para outro diretório, um chamado Test Directory. Então eu vou digitar L s, que significa uma lista, e então você pode ver todos os conteúdos que estão atualmente lá, assim como você faria com o localizador. Você também pode ver arquivos e outras pastas. Então vá em frente e pressione clear para limpar todos os conteúdos tipo CD esta noite para voltar para o diretório home. Limpar mais uma vez. E agora queremos verificar se nota realmente instalado corretamente. Digite nota traço V com um espaço no meio e então você deve ver seu número de versão, que para mim é 6.9 ponto quatro. A versão atual e, em seguida, também digite NP inveja. Você deve ver uma versão superior a três. Um NPM muda automaticamente de nenhum NPM, principalmente instala modelos são pacotes dentro da nota. Usamos muitos NPM neste curso, então você continuará aprendendo tudo sobre o próximo. Vamos insultar nossa primeira ferramenta dentro da PN. Volte para o seu navegador, acesse o Google e pesquise. Criar reator. Vá em frente e encontre o primeiro link get hub que aparece e você deve encontrar um projeto que se parece com este. Criar reagir App é perfeito para os alunos apenas começando com reagir porque nos permite simplesmente se concentrar no código de reagir, Executar nossos projetos imediatamente e ver quaisquer erros. O remake reflete automaticamente em nossos aplicativos em execução à medida que criamos no processo. Então, role para baixo e encontraremos as instruções de instalação bem aqui. Você percebe que, a fim de instalar, criar reagir, podemos simplesmente usar NPM, então NPM instalar g criar reagir na cabeça de volta para o seu terminal e vamos executar esse comando. Ou agora vamos fazer a instalação do NPM G, que significa criação global. Reagir em incrível. Sua saída deve ficar assim no terminal. Então, antes de realmente criar o nosso primeiro aplicativo vai precisar insultar um editor de código, e se você já tem um, você pode pular o próximo vídeo. Mas se você quiser instalar um novo ou você tem que instalar seu 1º 1 como Adam, por exemplo ou sublime, o próximo vídeo pode valer a pena. 4. Como obter um editor de código: a ferramenta final vai precisar para reagir Desenvolvimento é um editor de código. A Web tem uma tonelada de editores de código lá fora para você encontrar, mas alguns dos mais populares e dois dos meus favoritos pessoais incluem Adam, que obter ajuda, abertamente suporta e sublime, que muitos outros desenvolvedores usam agora. Eu uso ambos os editores por razões diferentes, mas eu principalmente desenvolvi em reagir com isso. Agora você pode adicioná-lo em qualquer editor que você gosta. Você pode até usar texto, edição ou código ex. Mas eu recomendo muito Adam ou sublime por causa de sua formatação, que ajuda a tornar a vida muito mais fácil como engenheiros de software. No entanto, baixar Adam vem com um recurso muito elegante. Ele cria automaticamente a montagem em seu sistema, que permite que você abra aplicativos do terminal para que a abertura de projetos se torne tão rápida quanto digitar. Adam dot dentro de um diretório de teste atual diretamente ou Adam, por exemplo, saiu de um para abrir. Agora podemos facilmente abrir projeto no editor de código, arrastando os ícones de arquivos ou pastas para o ícone do editor. Assim como assim. Mas lançar um projeto em um editor usando o terminal parece magia de engenharia, então caso você queira fazer isso com Adam, e não está funcionando ainda ou sublime. Até me deixe mostrar como conectar suas configurações de terminal para fazer apenas auto. Então. Como eu disse, Adam deveria criar automaticamente esse irmão para você. Vamos testá-lo. Se pudéssemos realmente abrir Adam primeiro com Terminal ir para a pasta de aplicativos, encontrar o Adam App, ir para o seu conteúdo. recurso é encontrar a pasta APP e, em seguida, adam dot shh. Em seguida, vá em frente e abra o diretório atual que você deseja. Agora, como podem ver, Adam lança para nós. Então o que vamos fazer é criar um terminal simbólico de honra que nos permite executar este comando com um comando muito abreviado sempre que você quiser abrir em. E você poderia fazer isso digitando essa coisa muito longa toda vez. Mas o similar reduz significativamente esse comando para nós. Então você faz isso digite Ellen e S, e então vá em frente e escreva todo o comando. Em seguida, digite barra usuário barra local sido, que deve ser sua variável caminho. Em seguida, digite barra Adam. Então o último depois da barra é o comando que você vai querer? mente diz que o arquivo existe porque eu já tenho esse Semling configurado. No entanto, se executarmos adam dot depois que você fizer o seu, você notará o mesmo comportamento onde seu editor de código é iniciado a partir do terminal. Poderíamos fazer a mesma coisa com sub-linha para podermos ligar sublime. E então você tem sublime instalado agora para sublime. Você também precisa ir para aplicativos. Você encontra o aplicativo de texto sublime, vá para o conteúdo,suporte compartilhado, suporte compartilhado, você encontra o bin e, em seguida, o comando de lançamento é s ubl dentro daqui e, em seguida, mais uma vez encontrar sua variável de ambiente caminho local e, em seguida, fazer sublime ou SPL o que você quiser. E meu arquivo existe porque eu já tenho assembléia. Então agora eu posso usar ponto sublime e vemos o mesmo comportamento, mas com sublime. Então, agora que temos essa magia de engenharia ligada ao nosso terminal e temos tudo preparado para desenvolver projetos de reação, vamos avançar para realmente começar um 5. Countdown em Wireframing - sua primeira aplicativo de reação!: Olá. Vamos apresentar o primeiro aplicativo que vamos criar juntos chamado Countdown Champ. Neste app contaremos com uma ferramenta que nos permite saber quanto tempo levará para chegar a uma data de importância. Então vamos contar até o Natal, 25 de dezembro de 2017. Não, o AB que você vê já tem um contador indo e simplesmente a cada segundo o contador atualizado para mostrar quanto tempo resta até a data. Talvez você gostaria de contar para uma data diferente, no entanto. Digamos que você precisa saber quantos dias você ainda tem para comprar presente para o Dia dos Namorados. Então vamos colocar fevereiro 14 2017. E lá vai você, as atualizações com a nova data no topo e lá temos um contador indo para o dia em que entramos. Então vamos começar a construí-la juntos 6. Como criar seu primeiro aplicativo: Vamos construir nossa primeira aplicação com reagir. Para começar, vamos abrir uma nova janela de terminal em um mag. Você geralmente pode encontrar o terminal por espaço de comando presente e digitando no terminal. E assim que você ver o ícone aparecer, basta pressionar enter. Então aqui temos uma nova janela de terminal. Estou no diretório home. Vou navegar para o meu diretório de codificação e depois navegar para a pasta React. Agora, se você ainda não tem uma pasta específica ou diretamente para revestimento, eu encorajo você a fazer uma. Agora ele só ajuda a manter seus projetos e arquivos organizados. Agora, nesta pasta reagir, inicializarei um projeto para lembrar seu nome. Contagem regressiva Chip para construir um projeto vai usar um pacote que instalamos anteriormente, criar reagir em Vamos executar, criar reagir e, em seguida, o segundo argumento. Após o espaço, especificamos o nome de sua aplicação. Então contagem regressiva chip agora, dependendo de sua conexão, ele deve levar alguns segundos ou assim, mas assim que ele terminar vai começar a olhar para os arquivos e abri-lo em. Uma vez feito, sua saída deve ser assim. Ele lhe dá algumas instruções sobre como iniciar o servidor de desenvolvimento, como construir um pacote, como testá-lo e também como destruir completamente. Agora a primeira coisa que vamos fazer é seguir o primeiro campeão do CD Countdown. Mas antes de executá-lo, vamos em frente e explorar o AB em nosso editor. Assim como Adam Dunn. Você ouviu isso? chip de contagem regressiva ISS. Da esquerda, você pode ver a árvore de diretórios onde temos todos os arquivos e pastas aqui Temos conhecido módulos pasta, mas temos todo o código reagir. É muito denso. Então, a menos que você seja um engenheiro do Facebook, você realmente não precisa se preocupar em olhar para essas pastas com a pasta pública. Só vamos editar o índice de ponto html mais tarde, só um pouquinho. E então a pasta fonte, onde hospedamos todo o código de reação e isso é o que vamos nos interessar principalmente. Então vamos fazer o segundo passo que tivemos terminal mais cedo. E agora vamos executar em PM começar aqui ele lança uma nova janela de host local. Diz “Bem-vindo a reagir”. Tem o logotipo deles está girando. Ele diz para começar em sua fonte Abdi s e salvo para reolhar tudo bem. Legal. Temos o aplicativo dela em execução, e agora que o fazemos, vamos personalizá-lo criando nosso primeiro componente. 7. Como editar o aplicativo: Vamos começar a editar o aplicativo para começar. Vamos fazer uma loucura. Vamos liderar toda esta pasta de origem e nos livrar de todo o seu conteúdo. Então vá em frente, apague. Não, isso não deve esvaziar todo o conteúdo da pasta de origem. Agora ainda gostamos da fonte do nome. Então vamos continuar e manter isso, mas vamos criar nosso próprio arquivo Js de índice. É um novo arquivo índice de pontos jatos. Dentro desta queda, vamos começar a criar o nosso cozinheiro reagir. Nossa primeira linha é importar reagir por agora isso nos permite usar reagir todos os seus componentes toda a biblioteca para construir sua aplicação. O próximo é importante reagir dunk de reagir faz Agora este pacote é um completamente separado de reagir, os controles realmente jogando o código de reação no navegador para nós. Vamos escrever nossa própria estabilidade pessoal cozinheiro Reagir, despejar , parar, renderizar Vamos espaçamento ednitem. E a primeira coisa que queremos é um def, que, no desenvolvimento Web, simplesmente representa uma seção da página. E nesta div vai escrever chip de contagem regressiva e, em seguida, precisamos alvo onde no html vamos renderizar este elemento agora. Felizmente, se olharmos para o índice dot html, já temos um componente com a idéia de rota. Isso permitirá atingir este eu d com o nosso elemento de reação para ir em frente e criar o nosso para que nós simplesmente vamos obter o elemento por I d chamado fruta. Agora, isso quando salvarmos deve renderizar campeão de contagem regressiva na tela. E lá vamos nós. Nosso texto pessoal de Countdown Champ está agora na inscrição. Em seguida, vamos finalmente criar nosso primeiro componente com reagir, então vá em frente e vá para o próximo vídeo. 8. Como criar seu primeiro componente: Neste ponto, podemos criar nosso primeiro componente de reação. Inter reagir componentes composta interface de usuário e eles geralmente têm alguma qualidade reutilizável e independente sobre para o nosso primeiro componente vai chamá-lo F. E quando criamos componentes reagir estavam usando ponto Js ex extensão em vez do ponto Js extensão. Então é isso mesmo. Sequestrar Js ex. Agora, aqueles de vocês com alguma experiência de desenvolvimento web podem achar o JSX muito familiar. Ele se parece com HTML. Mas, na verdade, SX desonesto não é. Hmm. Oh, é javascript com a aparência de uma linguagem de modelo como XML, mas nós o usamos para criar componentes e elementos dentro reagir. Então vamos criar este componente reagir. Agora vamos precisar importar reagir como de costume de reagir. Mas agora estamos perdendo um passo. Nós também queremos importar o recurso componente de reagir. Vamos em frente e ele tinha o componente. É tudo o que precisaremos para importar por enquanto. Não precisamos mais de reagir. Uma vez que o arquivo de índice Js já está cobrindo isso para começar a escrever, nosso componente vai declarar Comer uma classe de seis Agora aqueles de vocês com um fundo de ciência da computação bem, como sim, seis classes que eles estavam introduzindo Atma Script 2015 e nos permitem escrever script Java em um modelo orientado a objetos. Isto é especialmente útil na criação do nosso componente personalizado, porque podemos simplesmente estender reage componente com a nossa classe, herdar todos os seus métodos padrão que vamos discutir mais tarde como eles se tornam relevantes para as nossas aplicações. Mas o primeiro 1 e o mais usado é um método de renderização. O método de renderização nos permite retornar qualquer GSX que gostaríamos. Então vamos retornar uma nova div que diz cadeia de contagem regressiva no componente Cool. Agora você já discutiu a importação quando importamos reagir e eles reagem para baixo a partir dos módulos. Mas não este componente é o nosso próprio módulo que podemos exportar para outras classes que mais tarde será importante. Então vamos exportá-lo agora e declará-lo como o componente padrão. Finalmente, precisamos que o aplicativo reconheça este componente como um componente padrão a ser usado. Vamos para Index Thaci s e substitui Div pelo nosso componente APP. Agora, alguns de vocês podem estar se perguntando por que podemos usar o componente do aplicativo sem sequer importá-lo primeiro. Bem, vocês estariam certos. Precisamos importar a partir do diretório atual e ponto sempre se refere à barra de diretório atual . E enquanto economizamos, devemos ver a atualização do Dave dela na tela. Mas lá em cima não há nada de renderização na página. Por que é isso? Bem, um erro comum dentro do método de renderização é esquecer de usar o estado de retorno. Você sempre tem que devolver o JSX. Você não pode simplesmente escrever. Isso é algo que muitas pessoas começam com React. Esqueça de fazer algo que eu mesmo tive a ver com um pouco. Enquanto eu estava aprendendo, eu ia dizer que eu nunca devolvi e nunca vou. Campeão de contagem regressiva no componente. Antes de seguirmos em frente, vamos rever brevemente os três tópicos que acabamos de discutir. Um componente React é uma peça independente e reutilizável de você. I próximo JSX se parece apenas com HTML ou XML, mas é realmente JavaScript e nos permite criar componentes reagir. E, finalmente, importar e exportar nos permite compartilhar código entre módulos e arquivos. Vamos passar para o próximo vídeo 9. Como estruturar o aplicativo: aqueles de vocês com experiência em que desenvolvimento pode lembrar que com HTML dibs são elementos sem qualquer interior Crianças pode auto em perto. A mesma regra se aplica ao JSX, significa em seu arquivo Js de ponto de índice. Podemos alterar este elemento aplicativo de duas tags para uma, então vamos em frente e fazer isso em e uma tag auto-envolvente. Em seguida, vamos nos concentrar em estruturar este aplicativo. Primeiro vai adicionar algum Temple JSX para o aplicativo que podemos trabalhar fora de mais tarde. Então vamos adicionar um pouco de estilo à paz, mas adicionando um arquivo CSS. Vamos adicionar a estrutura. Vamos começar adicionando um título Div ao nosso componente principal. Então vamos excluir este texto agora e adicionar um feito para o título. E você diria contagem regressiva para 25 de dezembro 20. 70 Natal. Agora vamos adicionar alguma estrutura para o relógio de contagem regressiva. O amor ganhou de Div e quatro introduzir Quando será para os dias. Então, digamos 14 dias e, claro, estamos inventando isso por enquanto. Direi 30 horas. Precisamos de um para os minutos também. 15 minutos e, em seguida, 20 segundos e eu faria os dias em minúsculas, uma vez que fez todo o outro tempo em minúsculas e eles estão reagir atualizações automaticamente assim que os salva graças para criar reagir. Em seguida, teremos um campo de entrada onde os usuários podem digitar uma nova data, como foi um botão onde eles podem enviar essa nova data. Então, o que é um combustível de entrada? Mais uma vez, teremos uma etiqueta auto-envolvente. Ele terá um espaço reservado por enquanto, que só diz Nova data e então teremos um botão logo abaixo. Dito isto, é submissão. Vamos em frente e embrulhe isso dentro de uma div em si, só para que eles sejam colocados juntos na mesma seção, e lá vamos nós. Temos algum template ing para aplicativo, mas agora parece muito feio, para ser honesto. Então vamos adicionar alguns CSS para fazer isso apenas um pouco. Simplesmente, vamos adicionar um novo arquivo chamado app dot CSS para a pasta de origem em que cessa. Primeiro, vamos fazer uma classe de aplicativo global. Então diremos que vamos alinhar todo o texto para o centro. Vamos fazer todos os fundos em torno de 35 pixels para que possamos realmente vê-lo e eles iriam avançar e dar-nos uma margem. Não quero que toque no topo, então vou dizer 20% porque é um bom número adaptável. Sempre que você estiver mudando a tela com Now, aqueles que estão familiarizados com CSS podem já saber como ele funciona. Basicamente, você está adicionando classes a cada um de seus dibs para aplicar certos estilos, como tamanho da fonte da linha Texas ou margens para alterar a aparência do seu aplicativo. Então vamos adicionar este armário app. Você é componente. Agora, antes de adicionar qualquer estilo, a primeira coisa que precisamos fazer é realmente incluir o CSS dentro do nosso componente. Então importe no ponto CSS. É tão simples assim. Nós já podemos ir em frente e começar a usar o CSS dentro do nosso aplicativo. Agora, eu me sinto intuitivo para escrever classe é igual aqui porque nós já nomeamos isso dentro do nosso CSS fuck. No entanto, se dissermos isso, notaremos que nenhum dos estilos fica desmaiado. Isso ocorre porque a classe já está reservada palavra-chave dentro de script de trabalho, Então GSX usa uma palavra-chave diferente para nomear nomes de classe dentro de seus modelos. Posso adivinhar o que é. Eu disse o nome da aula mais cedo. E lá vamos nós. Aí está o nosso novo estilo já se aplica. Agora, quero que o título seja mais distinto. Então vamos adicionar um componente de título e para torná-lo mais distinto, vou aumentar o tamanho da fonte. Então, é claro, precisamos adicionar a classe de título AB. Nome é igual ao título. E lá vamos nós. É muito maior, mas eu vou ir em frente e re tamanho é apenas para que possamos ter o efeito total. Legal. Então cada uma dessas coisas vai ter um nome de classe separado. O 1º 1 vai ser dias de relógio. O próximo vai ser horas de relógio. O próximo vai ser um relógio minutos. O último vai ser o segundo relógio, Vamos adicionar um estilo. Não. E o raciocínio por trás deste estilo é que eu quero que todos eles estejam alinhados. Não gosto de como há uma nova linha entre todos eles, então vamos mudar isso agora. Então, para as minhas horas de relógio, eu vou dizer que o visor está na linha. E então, para os meus dias de relógio, eu também vou dizer, mas a exibição é na vida e lá vamos nós. Vemos muitas linhas. E então, é claro, precisamos fazer isso tanto para os minutos quanto para os segundos. Tudo bem, Cool. No entanto, estamos sendo um pouco ineficientes com nosso CSS. Nós poderíamos realmente encurtar significativamente isso usando um truque CSS. Certas classes devem ter a mesma propriedade. Podemos encurtá-lo. Podemos apenas usar uma vírgula e ver que horas de relógio também herda a exibição na linha Como você salvar. Vemos que o mesmo estilo ainda se aplica. Cilindro é a mesma coisa para os minutos do relógio, bem como oclock. Segundo, para tornar nosso código muito mais eficiente. E então, é claro, olha, eles estão praticamente se tocando. Eu realmente não posso diferenciar que essas palavras separam o ar. Vamos dar a todos uma margem de 10 pixels, e lá vamos nós. Já chega de estilo por enquanto. Não se preocupe. Teremos um truque na manga mais tarde para realmente amarrar todo o estilo e aparência desta aplicação. Então vamos em frente e passar para o próximo vídeo 10. Como introduzir o estado: vamos introduzir a idéia de estado em componentes reagir. Neste ponto, nós só adicionamos template jazz sex à sua aplicação com algum texto padrão para atualizar a interface do usuário. No entanto, queremos adicionar reatividade e distância para que o usuário interaja com ele. Aqui entra o estado. Você pode pensar em estado como os dados que são pertinentes para o aplicativo. Cada componente tem seu próprio estado local em relação ao estado global de todo o aplicativo, assim como em uma escola. Por exemplo, tem um estado do seu número de professores, número de alunos e número de salas de aula, etc. Mas cada aluno também tem seu próprio estado, uma série de livros didáticos, cadernos e canetas. Vamos em frente e adicionar estado aos nossos componentes. Precisamos adicionar um construtor para a classe. Isso nos permite ter estado local dentro de nossa classe. Agora precisamos passar um argumento de adereços, e por convenção, você chama isso de adereços mesmo que você possa nomear isso qualquer coisa que você gosta, no entanto, para adereços refere-se a dados herdados de qualquer componente pai, isto é algo herdado do objeto orientado. A programação ficará clara mais tarde à medida que estendemos a nossa aplicação. Não A próxima coisa que precisamos declarar é o estado real de nossos componentes. E em reagir. State é sempre um objeto em um objeto. Chaves de propriedade, Matt para valores. E esses valores podem ser qualquer tipo de JavaScript válido, como uma string de um número ou outro objeto. Agora a primeira coisa que vai declarar é o nosso prazo. Aqui está a nossa chave em nosso valor será, é claro, dezembro 25 2017. Como todo mundo adora o Natal, certo, vamos em frente e tornar este título mais fácil de ver. Vamos substituir o 25 de dezembro aqui para o nosso estado e reagir. Quando nos referimos a uma variável dentro do nosso texto, podemos usar esta notação de colchetes para fazê-lo. Então este é o que declara esse prazo. E à medida que salvarmos, devemos ver uma atualização dentro do aplicativo dela. E lá vamos nós. Nós salvamos. Ainda é o mesmo prazo para mostrar que funciona. Vamos mudar para novembro, ou você pode mudá-lo para qualquer dia que você quiser e agradável. Aqui diz novembro agora. Então lá vai você vingança e estado e alguns dados para a nossa aplicação e nossa classe na Component. Vamos passar para o próximo vídeo. Nós vamos re realmente atualizar o estado dinamicamente 11. Atualizando o estado: vamos de alguma forma atualizar o estado do nosso componente dinamicamente. Para fazer isso, podemos tirar proveito de um método específico dentro reagir chamado estado conjunto. Nós simplesmente precisamos chamar este ponto set state através de código, a fim de atualizar nossos dados de classes locais . Primeiro, vamos aquário método dentro desta classe, mas atualiza o estado. Vejamos, temos um método de prazo de alteração, que atualiza um estado. Então, é claro, precisamos chamar este conjunto de pontos ficou dentro deste método. Agora há uma regra muito importante a seguir. Sempre que atualizar o estado, você nunca deve alterar ou alterar o estado diretamente. Lembre-se, repita isso mais uma vez. Você nunca deve mutar ou alterar o estado diretamente, significa que o componente não irá criar Ender. Se, por exemplo, chamamos esse pensamento ST ponto prazo é igual a 25 de novembro de 2017. Este é um exemplo de estado mutante diretamente. Então é isso. Por exemplo, se tivéssemos um contador dentro daqui e o chamássemos de zero, princípio, não seríamos capazes de dizer que o contador mais é igual a um. Isto não funcionaria. Em vez disso, usamos este método de estado conjunto de pensamento. Ele passou um objeto inteiramente novo com o par de valor de chave que gostaríamos de atualizar. Então, digamos que o novo prazo será 25 de novembro de 2017. Mutando o estado diretamente levaria, é claro, é claro,a erros e áreas dentro do aplicativo. No entanto, se você estiver declarando um novo objeto como você está fazendo isso dentro deste estado de conjunto de pensamentos, ele permite que os dados permaneçam livres de píer e bugs. Vamos anexar este método ao seu botão para cima bem, adicionando no ouvinte clique para o botão. Bem, digamos que no clique é igual a e então vamos adicionar uma função Essex Anonymous para chamar isso de não alterar o prazo. Agora, você pode estar se perguntando por que precisamos de função anônima se, por exemplo, nós simplesmente chamamos isso de não mudar o prazo. Ter manipuladores sem uma função anônima assim como esta precisa saudações dentro do seu aplicativo, o que pode causar falha. Então, em vez disso, aproveitamos a função anônima E seis. A fim de chamar isso não alterado, método de prazo será capaz de simplesmente dizer isso não alterar o prazo, porque a função Essex Anonymous nos permite chamar apenas uma vez sem causar o loop para travar seu aplicativo. À medida que continuamos a codificar, Will Seymour funções anônimas e até mesmo funções não anônimas em ação, a fim atualizar nossos aplicativos. Então vamos salvar. E finalmente, vamos clicar no botão enviar para ver se ele funciona. E lá vamos nós. Ao clicar em enviar. Você vê essa mudança a partir de dezembro 2 novembro 25 2017. Vamos passar para o próximo vídeo. 12. Como alterar dados com o campo de entrada: até agora, só temos uma maneira de o usuário atualizar o prazo. E, claro, ele só muda para um único prazo, não importa o que o usuário digita. Isso é uma vantagem doentia desse campo de entrada. Para realmente atualizar o aplicativo, vamos adicionar uma nova chave ao estado. Esta chave será chamada de Novo Prazo e vamos tratar do Camel. É quando você tem duas palavras. Mas você combiná-los juntos, e a segunda palavra que você capitalizar por agora vai simplesmente dizer o novo prazo para um estrito vazio . Em seguida, precisaremos atualizar esse novo prazo. Bem, Adam, na função de mudança para o campo de entrada. Vamos em frente e formatar. É um pouco. E na função on change, vamos adicionar uma variável de evento e semelhante a uma função anônima. Vamos ter essa sintaxe de seta igual. Por agora. Vamos simplesmente o ponto cônsul registrar esta variável de evento para ver o que está acontecendo. Digamos que por enquanto vamos inspecionar o elemento do aplicativo para que você possa acessar o conselho . Vamos ver o que acontece quando escrevemos Novembro, e lá vamos nós. Há muitos dados chegando, e a razão pela qual parece tanto nisso. É porque realmente há muitos dados. Mas realmente, o que estamos interessados é apenas o que o usuário digita e podemos acessar o que o usuário digita mas adicionando as propriedades de valor de ponto alvo, Vamos em frente e salvar. Vamos tentar isso mais uma vez. E como você pode ver, ele é atualizado toda vez que o usuário muda o campo de entrada e temos a alteração mais recente, que é novembro, que é abreviação para novembro. Finalmente, uma vez que podemos ver os dados já conectados em nosso cônsul, podemos ir em frente e mudar é função log constante para com esta função de estado definido ponto as atualizações e novo prazo para esse valor de destino de ponto de evento. Vamos mudar isso. Ele vai dizer isso. Dito isso, estado, nosso novo prazo. Lembre-se, tem que ser um objeto sagrado. É o evento que tem como alvo o Dr. Value. Vamos em frente e salvar. A próxima coisa que precisamos fazer é alterar um pouco o método do prazo de alteração real, a fim realmente atualizar o prazo para o nosso novo. Por enquanto, no método que buscam o melhor estado inicial aqui bem, simplesmente, simplesmente, Cônsul registrar o estado atual para ver o que são aplicação parece Até agora. Vamos economizar e depois diremos que nosso novo prazo é 25 de novembro de 2017. Vamos entrar. Pressione esta função de prazo de alteração agora. Portanto, o nosso prazo para objeto é atualmente 25 de dezembro de 2017. Mas aqui temos um novo prazo, que é novembro 25 2017. Para que nós vamos, não temos componente de estado atualizando. Agora precisamos simplesmente de definir o novo prazo para o prazo original para esse novo prazo ou melhor, o novo prazo dentro do Estado. Vamos em frente e deletar isso. Por agora. Vamos ver se o aplicativo inteiro funciona. Você se lembra de 25? 2017 vai na imprensa enviar e lá vamos nós. Ele muda. Poderíamos fazer 20 de novembro, se você quisesse. Podemos até mudar o ano para algo louco como 30 17 homens. Se pudéssemos estar vivos, então para ver como é a tecnologia. Talvez possamos codificar com nossas mentes. Em qualquer caso, o tamanho parece muito pouco atraente no momento, mas mais tarde vamos adicionar algum estilo, bem como um truque de reação puro. A fim de fazer com que toda esta defesa pareça liso. Vamos seguir em frente 13. Como criar um componente de relógio: Agora temos um grande componente para, no entanto, neste ponto precisamos adicionar muita lógica para o recurso de relógio de sua aplicação. Nesta coleção de quatro dibs aqui parece tão relacionado um com o outro, mas nós também podemos, criando um componente inteiramente novo para que ele faça isso. Mas adicionando o arquivo jsx ponto do relógio com nossa pasta de origem. Novo arquivo Clark Não JSX Vamos seguir o mesmo código como antes, então importar reagir, bem como um componente de reagir, e também vamos importar nosso CSS. Deus nos vê. Vamos declarar a classe CLA e estender o componente. Finalmente, vamos exportar o relógio. - Não. Bem, é claro, preciso ler ou algo assim. Assim, como antes, tornará aparente ativo. Esse é o nosso relógio. Vamos em frente e pegar o JSX que escrevemos antes de colá-lo aqui dentro para economizar algum tempo. Então, copie isto. Coloque-o aqui dentro. Esta será a estrutura do nosso JSX. Não, vamos em frente e tivemos uma memória construtora. Precisamos passar o seu argumento acima adereços, bem como um super adereços para o estilo de programação herdada orientada a objetos de US seis JavaScript. Finalmente, vamos declarar algum estado inicial. Precisamos de um estado para os dias. Horas variáveis variáveis variáveis a variável minutos na variável segundos. Digamos que dias para análises. Zero horas também zero nos minutos como zero. E, claro, os segundos também são zero. E isso vai mudar todos esses números para ser este estado que queremos que eles sejam. Então este será o serviço nos dias ST dot. O nosso não será este horário estadual. Minutos. Você acha que este pensamento ST dot segundos não é só brincadeira. Minutos. E então este estado não tem segundos. Legal. Digamos que este importante dentro do aplicativo e substituir o nosso JSX com componente oclock. Então vamos importar o nosso relógio na pasta atual olhar e, em seguida, vai substituir o relógio inteiro onde o todo fez em vez com o nosso componente de relógio do self na tag de fechamento. Vá em frente e salve. É muito baixo. Vamos em frente e inspecionar o elemento. Temos algo errado e aqui vamos nós um elemento de reação válido ou não deve ser devolvido. Lembra como eu disse antes que o método Orender era sempre devolvido? O JSX, em vez de escrever. Bem, aqui vamos nós. Muitos de vocês provavelmente pegaram isso, mas vamos em frente e adicionar isso agora mesmo. E vocês provavelmente estavam gritando com a tela. David, você está perdendo algo. Vou dizer isto e depois vamos embora. Zero dias, zero horas, zero minutos, zero segundos. Agora que temos nosso componente de relógio, podemos ir em frente e seguir em frente. 14. Como introduzir acessórios: Parece bonito. Sq, quando a APP tem uma data de contagem regressiva de dezembro 25 2017, mas o tempo que leva para chegar lá em zero dia, zero horas, minutos e segundos. É Natal. Sua diversão é, parece que a viagem no tempo esta maçã só mostra o verdadeiro tempo leva para chegar a este dia incrível ou qualquer dia que você gostaria de fazê-lo. Vamos precisar de uma maneira para o componente relógio reconhecer a data definida dentro do aplicativo. O componente pai. Poderíamos tirar vantagem de algo semelhante ao estado chamado adereços, a fim de fazê-lo. Verão dois adereços de estado refere-se a alguns dados dentro do aplicativo, No entanto, com adereços você passar dados ou estado para componentes filho de componentes pai, que significa que eu posso especificar um prazo dentro deste relógio, igual a estado atual do prazo. Então vamos passar o prazo do estado do aplicativo pai para o relógio, que agora será capaz de reconhecer esse prazo como adereços. A fim de provar isso, vamos em frente e registrar o console esta parada adereços dentro de seu construtor para ver o que está acontecendo . À medida que inspeciono o elemento, veremos que este suporte de parada é agora um objeto, e há um prazo com o nosso psiquiatra de 25 de dezembro de 2017. Props torna-se especialmente útil porque, à medida que atualizamos o estado do nosso componente pai, qualquer estado passa adereços para componentes filho, atualizamos e lemos automaticamente. Render graças aos princípios de engenharia e software reagir. Bastante incrível aqui recebeu o prazo final. Como um filho dos adereços de estoque, podemos ir em frente e usá-lo a fim de calcular o tempo que leva até a data passada. Vamos adicionar esse método no próximo vídeo, a fim de atualizar esses números aqui. 15. Como calcular tempo até: Vamos adicionar um método que calcula um tempo restante do prazo passado para a hora atual. Felizmente, o JavaScript já vem com um objeto de data com muita funcionalidade que podemos aproveitar. Então vamos escrever isto. Obter tempo. Então, método. Agora, consiga tempo até termos um prazo de discussão dentro do método. Vamos declarar uma variável chamada hora Agora. Dentro do Essex, nos abstemos de usar a palavra-chave var usada nas versões anteriores do script de trabalho. Não use Let ou const. Na maioria das vezes, queremos usar contras para variáveis que nunca precisam ser atualizadas e deixar para variáveis que precisam. Atualizando no escopo desta função, entanto, só precisará calcular esta variável de tempo uma vez, então usamos a palavra-chave const. Agora vamos usar alguns métodos dentro do objeto de data de script de trabalho para nos ajudar. Vamos defini-lo igual a uma data, não método de análise fora do prazo, e eles precisarão subtrair outro o número analisando a hora atual agora. E a razão pela qual eu posso simplesmente dizer nova data é porque, por padrão, quando declaramos um novo objeto de data dentro do JavaScript, ele simplesmente pega a hora atual. Diz que a hora está na hora. Portanto, o cálculo de subtração está subtraindo a hora atual entre o prazo e a data atual. Dentro desse tempo, poderemos encontrar nossos segundos, minutos, horas e dias relevantes minutos, que precisamos colocar em nosso contador para atualizar o aplicativo. Para ilustrar isso, vamos simplesmente registrar o tempo do console para que possamos ver isso em ação. E quanto mais adicionar uma chamada para ele dentro do nosso método de renderização por agora, para fins de teste, apenas uma função c r funcionando e como esse número realmente se parece. Então, digamos isto. Então o tempo é algo como três bilhões 118 número muito longo para realmente reconhecer e claro, não mostrar na tela. Então agora que vemos este número, precisamos realmente distinguir os segundos, minutos, minutos, horas e dias deste longo número de comprimento de 10 dígitos. Então vamos adicionar um pouco de matemática e ciência da computação a esta função, e nós vamos aproveitar a divisão no Modelo, a fim de agarrar os números relevantes . Assim, da mesma forma, vamos declarar um const segundos e disse que igual à função de chão de ponto matemática. Divida este tempo por 1000 e módulo. Oh, aquela coisa toda por 60. E o módulo. Parece o sinal de porcentagem. Então todo o cálculo por seis assim e aqueles de vocês que não estão familiarizados com o módulo . Oh, mas o módulo Oh, faz é essencialmente produz o restante de uma função. Então, se eu fiz 10 módulo Oh, livre. A saída seria um, mas seis modular três gal colocar com o zero porque seis dividido por três. O restante é zero, mas 10 dividido por três. O restante é um seguindo em frente. Para obter nossos minutos, eles parecem muito semelhantes. No entanto, precisamos fazer uma divisão extra do tempo por 60, a fim de agarrar são minutos relevantes, horas, olhar semelhante. Chão de matemática de novo e tenha paciência comigo. Ouvi dizer que estas funções vão levar algum tempo para calcular. Aqui vamos nós. Nós vamos dividir o tempo em si, mas 1000 vezes 16 vezes 60 novamente neste tempo por horas, nós vamos modular por 24. Como há apenas 24 horas por dia, vamos em frente e adicionar algum espaçamento, por isso é mais fácil de ler. E não se preocupe, não estou calculando esses números do topo da minha cabeça. Não sou um génio matemático. Eu escrevi isso antes ou talvez, e um gênio matemático. E eu só não quero que vocês saibam. Então, mais uma vez, eu vou andar nos dias e então dividir por 1000 vezes 60 vezes 60 vezes 24. E vamos produzir essas variáveis para ver se elas parecem minutos relevantes e então faremos nossos minutos. Quero ver como são as horas. O nosso. E finalmente, quais são os dias desde dois dias? Vamos em frente e seguros porque ele recarrega. Parece que temos 347 dias, oito horas, 35 minutos e um segundo até o Natal. Tão perto, hein? E parece que está tudo a actualizar. Ótima. Então a última coisa que precisamos fazer é simplesmente atualizar o estado. Então vamos primeiro atualizar o estado de nossas datas. Poderíamos dizer que dias são iguais a data, vamos dizer isso e olhar para aquilo. Temos uma repetição de incidentes. Então, temos algo muito defeituoso acontecendo aqui. Não podemos chamar, obter Tom até dentro do nosso método de renderização e passar esta função de estado conjunto de pontos. Caso contrário, vamos em loop infinito atual dentro de nossa função. Então, dentro do próximo vídeo, vamos aprender sobre métodos de ciclo de vida para corrigir esse problema. 16. Como engatar com métodos de ciclo: em reagir sempre que o componente é renderizado na tela ou sai da tela. Referimo-nos a esses eventos como montando ou anunciando a partir do aplicativo. React fornece métodos especiais para cada componente com base nesses eventos, a fim de nos permitir executar código para aplicações e reagir chamadas. de Ganchosde ciclo de vida. O primeiro gancho ou método usará é um componente Will Mount Hook. Ele é executado antes que o componente seja completamente renderizado no aplicativo. Vamos usar este porque você deseja calcular os adereços anteriores, dados e os dias atuais, horas e minutos e segundos que precisamos antes de renderizar nossos dados na tela. Então, uma vez que temos nossos dados, vai atualizar o estado sobre aplicação disse que o material adequado fica renderizado. Vamos adicionar que componente vai notar função logo abaixo dos adereços, e então vamos calcular este pensamento. Obter azulejos até que nossos adereços não. Antes que eu salve. Vamos em frente e remover isso do método de renderização para garantir que não obtemos o mesmo erro de antes. Vamos salvar e lá vamos nós. Este é um comportamento inesperado porque eu realmente não escrever componente vontade. Agora, eu escrevi, “ Come Ponette vai conhecer outra dessas áreas que vocês provavelmente reconhecem. E lá vamos nós receber os dias de atualização quem? Mas também atualizamos ser horas para as horas. Uau , está funcionando agora. Um “sim” legal. Seis truques que podemos usar para tornar nosso código mais simples é usar a abreviação do valor chave. Sintaxe. Observe como a chave e o valor parecem exatamente iguais. Bem, em vez de dizer que dias são dias. Eu posso simplesmente especificar dias como uma palavra-chave, você sabe, automaticamente reconhecido que dias devem ser a chave, e dia também deve ser o valor. Então, à medida que eu salvar e recarregar, você notará que ele ainda funciona. O mesmo vale por horas, e agora posso encurtar significativamente essa linha. Mas apenas dizendo minutos e segundos como eu salvar a coisa toda atualizações, Vamos em frente e se livrar desses logs de console que não precisamos mais. Diga de novo, e agora vamos tirar vantagem de outro ciclo de vida. Gancho chamado Componente fez montar Este é executado depois que o componente foi completamente renderizado para o aplicativo dentro do nosso componente fez Mount Hook vai chamar obter tempo até cada segundo. A fim de continuar atualizando nosso script de trabalho de tempo vem com uma função especial de intervalo de conjunto que permite que você execute algum código em um intervalo específico. Ele é executado em milissegundos, então eu vou especificar nossa função como o primeiro argumento e 1000 milissegundos, o que equivale a um segundo como o segundo argumento. Então é certo que agora definir intervalo, e precisamos especificar uma função de seta, que é anônima. Chamará isso de pensamento. Leve Tom para o nosso prazo final, claro, e diremos que funciona a cada 1000 milissegundos. Vamos salvar isso e olhar para aquilo. Já temos tempo de atualização. Muito legal. Temos um aplicativo de trabalho agora porque podemos até mudar a data. Verifica isso. Digamos que eu quero novembro 25 2017 e olhar. Cerca de 30 dias foram subtraídos. Isso é tão incrível. Há apenas algumas coisas para corrigir, no entanto, no entanto, para um aviso que há um problema com números menores que 10 eles estragam o espaçamento do aplicativo porque eles estão faltando um dígito extra. Eles precisam de um prefixo zero à esquerda. Para nos corrigir, resolveremos esse problema No próximo vídeo, adicionaremos um método auxiliar zero 17. Como adicionar métodos úteis com expressões de onças: vamos adicionar um método auxiliar zero à esquerda para garantir que o nosso espaçamento para o nosso temporizador sempre parece bom. Este método será limpo e simples. Por enquanto, declare uma função zero à esquerda. Ele só leva um número ou número para curto como seu argumento, se o entorpecimento sua lição. 10. Eu devolverei corda zero, mais as notas. Se não, devolveremos o número em si. Bem, vamos testar se isso funciona para os dias, as horas e os minutos. Então chame este ponto de liderança zero em torno de cada uma de nossas variáveis. Sim, ali, ali dentro. Vamos em frente e salvar e ver se esta função funciona. Então, como você pode ver nossas horas funcionam, vez que era menos de 10 como um xarope líder. E se esperarmos 10 segundos, você verá que os segundos também tem um zero à esquerda para qualquer número. Lição 10. Então vamos dar uma olhada. Perfeito. Agora há uma coisa que podemos fazer para tornar essa função zero líder, mesmo que possamos encurtar essa função aproveitando um script de trabalho, expressão comum em vez de ter esse tempo. Se declaração, podemos encurtá-la no dedo do pé uma linha. Vamos devolver o número por si só. Mas vamos verificar se é menos de 10. E se é uma pergunta funciona. O que viria a string zero, mais o número de outra forma chamando quem retornou o número em si? Vamos salvar o freeload. E como você pode ver com sua expressão de Turner , ainda está funcional. As expressões de viragem são ótimas para manter o código compreensível, conciso e desordenado. Lis. Vamos passar para a parte final do revestimento deste aplicativo, onde nós cuidamos de alguns mais styling uma aparência, puxando um truque de reação frontal para fora do saco. 18. Como estilizar com React: agora para o nosso truque final irá adicionar Reagir bootstrapped sua aplicação para fazer toda essa coisa olhar bonito. Agora temos alguns passos a tomar ao instalar reagir bootstrap em sua habitação. Primeiro, navegue até uma nova guia do navegador e procure. Reagir. Bouchra. Você deve ver um link que se parece com este e, eventualmente, chegar a este site. Ali. Você deverá ver alguns passos a serem seguidos depois de navegar para começar. Para começar, precisamos insultar reagir bootstrap através e PM para que não é para chegar ao terminal. Os homens vão chamar a instalação do NPM. Reagir. Bootstrap seguro, diz aqui. Próximo. Precisamos incluir o mais recente compilado no link de arquivo unificado CIA SAS dentro do nosso documento HTML indo copiar e colar apenas o 1º 1 Nós não queremos o opcional por agora e ir para o índice html e no topo. Vamos incluir um link logo antes do título, que é aquele CSS Fuck modificado. Vá e salve em seu aplicativo. Se você recarregar, parte do texto já mudou para nós. Vamos entrar e verificar se você terminou de baixar e lá vamos nós. Temos reagir bouchat completamente baixado em um nó meses agora, podemos tirar proveito de alguns desses componentes. Nunca volte a raptar o JSX. E vamos importar algumas coisas. Nós vamos importar a forma, componente, componente, forma, controle, componente, como sempre, componente de botão de reagir. Em seguida, vamos mudar nossos campos de entrada um pouco. Assim, podemos ter os estilos de loja de botas reagir que queremos. O que muda Div externo para um componente de formulário. E esta forma terá uma chave de em linha definida para a verdade. No entanto, em reagir, se alguma vez tivermos uma chave que simplesmente definir para verdadeira enfraquecer a abreviação apenas dizendo a chave, que é o interior. Finalmente, vamos mudar de entrada ou próximo, em vez de finalmente não muda entrada para componente de controle de reforma. E finalmente, este botão vai ficar bem. Mas nós vamos salvar e real Uh, e então nós vamos. As coisas estão um pouco melhores. Em seguida, vamos adicionar um nome de classe para o controle de quatro na entrada de prazo. Dessa forma, podemos controlar o tamanho da fonte deste campo de entrada. Vamos voltar para a nossa queda CSS. Teremos um prazo de entrada, eu vou dizer. Mas o tamanho divertido é de 25 pixels e tem uma margem de cinco pixels lá. Nós atualizamos o estilo, e são três tamanhos para ver como ele se parece. E lá podemos ver que está na linha aqui. Vamos mudar para novembro 14 15 2017 e está parecendo muito bom. Tudo bem, parece incrível. E temos uma inscrição completa de contagem regressiva. Excelente trabalho. Você pode alterar a data padrão para qualquer feriado do seu aniversário ou dia especial que você gostaria . Divirta-se com ele. Há uma parte de desafio e um resumo na próxima peça, e na próxima seção vamos começar um aplicativo totalmente novo que lida com a solicitação da Web a fim de receber dados e continuar aprendendo sobre a grande frente e estrutura de reagir . Vejo-te isso