Construindo seu primeiro aplicativo de react em 75 minutos ou mais.

1. O que é o React?: Oi, Maurice aqui. Bem-vindo a este curso de introdução ou reagir. Então, o que é reagir como reagir? site diz. Reagido é uma biblioteca JavaScript para construir você para em rostos. Assim, com reagir, você pode criar interfaces de usuário para aplicativos Web. Nenhum shell aplicações nativas usando uma coisa chamada para reagir. Nativo. Vamos apenas olhar para aplicativos da Web, então vamos usar reagir para construir um aplicativo de armas. Você. Por quê? Então, quem mais está usando reagir? Acontece que muitas empresas são primeiras pastas Facebook, que dificilmente deve ser surpreendido porque quando você mergulhar em naufragados, você vai aprender que Wrecked é realmente desenvolvido como um projeto de código aberto, mas com a equipe principal no Facebook em si. Assim, o site do Facebook é desenvolvido usando Rex. Mas acontece que o site do Facebook não era o 1º 1 Quando o Facebook adquiriu o Instagram. O site do Instagram foi na verdade o primeiro 1 desenvolvido com reagir, então eles estavam liderando a parte de trás com nossos muitos outros. Netflix, Airbnb, Twitter, o que foi? E muitas outras grandes empresas estão usando reagir para suas aplicações de armas, mas não apenas grandes conclui. Há uma lista longa e longa de aplicativos construídos usando destruídos. Se você quiser ver esta lista, você pode ir para o site destruído. Aqui está para reagir site onde você pode obter mais informações sobre reagir. Uma das coisas que você pode fazer é pegar uma árvore de propostas. Agora eu não recomendo mergulhar no próprio código-fonte de reação. Não é a base mais simples e boa para começar, mas o que você pode fazer é ir para a página wiki e cabelo ver lado escolher, destruído. E aqui você pode ver uma lista longa e longa de aplicativos criados com reagir até o fundo. Agora isso não está completo. Seus lotes fora mãe público em sites provavelmente públicos é bem construído com reacções que não estão nesta lista. Eu trabalhei em algumas aplicações reagir, e não há nenhum deles são realmente público Taurel em aplicações domésticas, alguns bastante grandes, mas eles não estão nesta lista. Mas por que não tornar seu aplicativo público e colocá-lo em um negócio também? Meio legal, certo? Então, nesta aula, vamos ter um pequeno projeto de classe. Vamos pegar esse site, o banco de dados de filmes. Isto não é realmente construído com reagir, mas isso não importa porque eles têm um papel muito bom e usando isso um p I. Nós vamos tirar a lista dos melhores filmes no momento. Claro, essa lista muda constantemente, mas vamos construir nossa própria frente de reação e mostrar essa lista que está procurando ser exatamente a mesma. Isso foi mais sobre isso em outro vídeo? Então junte-se a mim no próximo vídeo, onde eu vou contar um pouco mais sobre quem eu sou, como eu entrei em desenvolvimento onde eu moro aan den. Podemos entrar na carne fora do edifício reagir aplicações. Vejo-os. 2. Introdução pessoal: Oi Inglês aqui. Bem-vindo de volta a este curso de introdução ou destruído Então antes que eu vou dizer-lhe tudo sobre reagir Tempo para um pouco de introdução pessoal. É sempre bom saber que estamos conversando. Então eu estou baseado na Holanda, Europa e Holanda é um belo país, especialmente na primavera, com todas as tulipas estão fora, Temos algumas praias encantadoras e, claro, Grandes moinhos de vento. E todas essas fotos foram tiradas a 20 quilômetros de onde eu moro. Tão bom lugar, eu acho que eu também sou feliz e casado twits uma esposa e um filho. Mas provavelmente não é por isso que estás a ouvir este vídeo. Então vamos voltar ao chofer. Tenho sido independente. Então, para desenvolvedor e instrutor Shins 1995 Na verdade, eu tenho desenvolvido até agora mais tempo do que isso, e eu comecei caminho, caminho de volta em um dos primeiros ser parar de usar Turbo Pascal tem feito desenvolvimentos Web desde por volta de 2000 então quase 20 anos eu também tenho sido um profissional mais valioso da Microsoft há mais do que as décadas agora. Eu também sou o altar fora para React newsletter, newsletter semanal, com todos os tipos de notícias sobre reagir e ponteiros para bons artigos. Você pode se inscrever para ficar atualizado e ler tudo sobre notícias reagir. Então, para assinar Goto Bit Dog Leash Last React newsletter. Certifique-se de acertar as letras maiúsculas. Ele precisa corresponder exatamente preenchendo seu nome e endereço de e-mail e você receberá o boletim todas as quartas-feiras. Então você quer entrar em contato comigo? Você pode usar o Twitter ou e-mail ou acessar meu site. E eu tinha que recomendar, porque eu realmente quero ouvir de você. Diga-me o que você aprendeu neste curso e me diga o que outras coisas que você quer aprender sobre reage sobre a reagir ecossistema ou talvez algo mais de desenvolvimentos Web. JavaScript ver pescador, Conte-me sobre isso e eu posso dizer-lhe tudo sobre isso, mas apenas deixe-me saber o que você quer ouvir. Então, junte-se a mim no próximo vídeo quando eu vou explicar para você tudo sobre por que você deve aprender. Reagir. Então vejo-te depois 3. Porque aprenda react: Oi res aqui. Bem-vindo de volta a este curso de introdução Old naufragado. Neste vídeo, vamos falar sobre por que você deve aprender a reagir em primeiro lugar. Então reagir é a biblioteca JavaScript para construir interfaces de usuário. Mas eu poderia dizer o mesmo sobre um pouco de outras bibliotecas ou frameworks como Angler View ou mesmo Jake cansado. Então por que se incomodar? Aprendeu a reagir Bem, é usado por muitas empresas. Fora do curso. É usado pelo Facebook. Eles criaram depois do roupão e uso pelo Instagram, o primeiro site onde ele foi realmente usado. Mas também é usado por grandes empresas como Netflix, Airbnb, Twitter e muitas, muitas outras. Então você é uma boa empresa usando destroços. Então eu argumentaria que usando reagir, certifique-se melhor programador. Então, alguns de reagir vantagens. Bem, tem uma grande comunidade que é sempre boa. É pequeno e rápido. Bem, quem não gosta disso? É estável, e há um simples e previsível A P I. Outra grande característica, e você pode confiar que é estável se a reação mudar para reagir. AP I Eles são responsáveis por implementá-lo no casaco de shorts do Facebook para que eles não querem mudar o AP. Eu só pelo bem da mudança. Precisam de uma boa razão. Ele suporta sua renderização de supervisão, o que é ótimo. Se você está preocupado com a otimização do motor da igreja e os gostos, é de código aberto para que você possa chegar ao código fonte e até mesmo contribuir se quiser. E tem uma equipe dedicada para o Facebook que está trabalhando nisso, mas não apenas trabalhando nisso porque eles gostam, mas também sendo pago para trabalhar em tempo integral. Mas há também alguns comerciantes com reacções e se o seu comércio de alguma nota pode realmente olhar ponto em seu ponto de vista. Mas um importante reagiu é criado pelo Facebook para Facebook. Por isso, é orientado pelas necessidades do Facebook. E se eles diferem muito de suas necessidades, reagir pode não ser a escolha perfeita. Mas para muitas aplicações, é ótimo. Outra coisa é marcar dentro do JavaScript. Escrevendo casaco J Sex é realmente muito bom, mas nem todo mundo concorda com ele. Há algumas pessoas que não gostam disso. Quero separação fora da marcação do JavaScript. Isso está tudo bem. Se essa é a sua coisa, reage provavelmente nota para você. Os resultados são preocupação com o polegar, a maneira de reagir é tão rápido é comparando algumas coisas, que significa que mantém algumas coisas adicionais na memória, que, claro, é grande sobre a pressão da memória. Não é muito, só um pouco, mas isso pode ser um pouco demais para você. Outra coisa. Reactores. Não muito opinativo novamente, você pode gostar que você pode não. O problema pode ser que você queira muita orientação, e reagir não dá combustível para essa ciência. É bem aberto. Você decide como quer resolver problemas e eles realmente não se importam. Eles deixam isso com você. Gosto de muitas outras pessoas assim. Mas pode não ser para você. Apenas mantenha isso em mente. Então, Reactores Poplar. Isto é para obter uma proposta para para destruído, e você pode ver que há mais de 88.000 estrelas. Então, como é que isso se compara a alguns fora das competições? Bem, aqui está Angler 5 quadro para sucessor da raiva popular no quadro. É bastante popular, mas só tem 33.000 estrelas. Agora, 33.000 estrelas não é nada para se envergonhar. Isso é muito bom, mas não é nem perto do que nos reagir. Então, se você é outro você popular. Eu biblioteca. Tem 83.000 estrelas, então é quase popular como reativo. Levante-se milhões. Então, que tal contar downloads? Porque há muitos de onde você pode obter popularidade. Então aqui está a página NPM para Wrecked. Você pode ver nos insights certos que há mais de oito milhões de downloads no mês passado . Então, como é que isso se compara com a concorrência? Bem, se olharmos para o pescador neste caso, demos uma olhada na biblioteca do núcleo do pescador, que é sempre baixada. Quando você baixar Angler, é um coma dois, seis mil downloads no mês passado. Nada para se envergonhar, mas nem perto de qual reator. Então, que tal alguns? Bem, lá ainda mais baixo. Quase 1,2 milhões. Ainda bastante impressionante para a biblioteca, mas nem perto de tantos downloads como reativos. Então, no entanto, você olha para esses números destruídos s bastante populares e produtos de urina infusões da empresa . Então te vejo na próxima vez quando eu vou te contar tudo sobre o que você vai aprender neste curso 4. O que você vai aprender: Oi lembranças aqui. Bem-vindos de volta ao Dis. Curso de introdução vai reagir neste vídeo. Vamos discutir brevemente o que você vai aprender. Então, o objetivo principal deste curso é ensiná-lo a começar com naufragados. Eu vou explicar por que eu reagi tão incrível e por que você iria querer criar aplicativos da Web iria reagir em primeiro lugar. Estou assumindo que você já sabe o JavaScript terrível. Mas como muitos fora reagem, os desenvolvedores usam mais do que estilo. JavaScript irá cobrir alguns dos mais do que a sintaxe de script Java, que você pode não saber ainda. Outra coisa importante é o que você não vai aprender. Não vamos olhar para todas as formas possíveis de criar componentes ou coisas assim. Então vamos deixar isso para outro curso. Nós também estamos olhando para usar um monte de bibliotecas externas como redução ou reagir Writer, você vai? Alguns. Mas a maior parte vai sair para outro curso. A maioria não vai dar uma olhada nos testes de unidade. E, na verdade, vou deixar de fora algumas práticas recomendadas só para manter as coisas simples. Então vejo você no próximo vídeo quando eu vou explicar alguns fora do JavaScript moderno em impostos 5. JavaScript moderno: Eu sou Alicia. Bem-vindos de volta a isto. Curso de introdução vai reagir neste vídeo que eu vou falar de fora as construções JavaScript modernos estavam indo para usar. Então vamos falar sobre óculos, raide Aled mapa fete, funções de seta, modelos, cordas. Constand levou a definir variáveis de importação e exportação funcionalidade, reestruturação de objetos e os trabalhos do Kuwait asiático. Então vamos mergulhar no casaco. Então aqui, depois que os shorts separam as pessoas para as pessoas lá dentro e o manto do cônsul para imprimi-los, se eu correr este casaco, ele só vai imprimir esses objetos como este. Então vamos criar uma impressão de pessoas ou classe para imprimi-los. Então criamos construtor. É preciso rebocar coleção de pessoas. Segurança está na propriedade no objeto usando o stolt, e então adicionamos uma função para imprimi-los. Agora podemos construir uma instância fora dos objetos de impressora com as novas palavras-chave. Uma vez que temos o objeto, podemos chamar a impressão de Matá-lo, e a saída é exatamente a mesma que era antes. Nenhum humano. Nós não queremos imprimir cada objeto pessoal, mas apenas o primeiro nome que poderíamos mapear a coleção de pessoas apenas nas primeiras cadeias de nomes . Assim, a função de mapa leva uma função é parâmetro e será chamado uma vez para cada objeto em seu A e nós retornamos o que queremos no direito mais recente. Então, neste caso, o primeiro nome que você pode ver você estava apenas imprimindo a primeira coisa. Se tudo o que queremos é uma função simples como esta, podemos realmente usar uma sintaxe mais curta. Yuzhin Febrero funções tão removido para funcionar obras chave e alimentos. Na verdade, eles estão lá. E se tudo o que queremos é apenas devolver algo que realmente não precisamos para bloquear e derrubar lá dentro, podemos colocar a expressão lá, que serão os resultados. Então eles receberão os primeiros nomes sendo impressos. Queremos um nome completo. Poderíamos usar concatenação de bebidas para pegar o primeiro nome do espaço. E então o sobrenome que funciona muito bem. Este é um ótimo lugar para você. Modelos de string. Você cria modelos de força com o pau traseiro. Então isso é normalmente na parte superior esquerda do teclado por dentro, com dolar e chaves. Você pode colocar expressões lá, Então aqui temos modelo de força, que retorna exatamente o mesmo resultado. Estes podem até ser linhas Bolte, então eu posso adicionar algumas linhas em sua executá-los e você verá a barra e o personagem sendo impresso para nova linha. Então, neste caso, nós realmente não queremos novas linhas. Isto está muito bem. Então, outro bom caso fora da quinta função Arrow é que ele se preserva a isso. Ele trabalhou em um evento. Então, para ver o comportamento, isso é apenas uma grande pequena função auxiliar que o leva de referência e metas. E isso é ouro com a impressora que eu me lembro agora que apenas imprime os nomes completos das pessoas. Mas se chamarmos assim, ele realmente retorna um erro porque dentro da função, ele não sabe mais sobre o disco e trabalho. Então ele reclama sobre as pessoas para que possamos resolver isso com a quinta função Arrow também. Então, neste caso, a impressão melhor função porque é definida como uma função de seta emplumada. Na verdade, lembre-se, armazene o que isso aponta para quando vai ser chamado, e isso ajuda. Se eu estiver com a arma cheia, não pareça tão bem assim nós realmente imprimimos a saída. Está funcionando muito bem, mas não vimos na saída. E lá vemos os links completos novamente. Então, isso é comumente usado para reagir quando compramos manipuladores de eventos toe e os gostos. Então, uma coisa com esta impressora, nunca vamos mudá-la. Então ele disse que o mais distante estaria acostumado com a nova Costa. Isso mostra que não vamos mudar isso. Podemos fazer o mesmo com o grupo de pessoas no topo. O treinador vai se comportar exatamente da mesma forma. Mas se você tentar alterar uma dessas variáveis, ele realmente iria para erro de tempo de execução porque nós fomos reatribuídos. Impressora. Outra nova capacidade interessante é poder exportar e importar dados. Este caso nós temos o arquivo de pessoas e ele exporta cinco pessoas diferentes para que possamos importá-los aqui usando a declaração de importação importar pessoas de e neste caso, nós vamos usar banho relativo com pensamentos Slash para indicá-lo. É uma falta local e não algo importado da MPM, então a cabra funciona da mesma forma, mas isso seria príncipe cinco pessoas diferentes. Outro mecanismo frequentemente utilizado nos dias de hoje é a reestruturação dos opiáceos, que funciona tanto na raça como em pequenos objetos. Então suponha que queremos obter a primeira pessoa da matriz de pessoas e, em seguida, o primeiro nome daquela primeira pessoa e impresso para que pudéssemos fazer a maneira tradicional como esta. Vemos seu primeiro nome fora da primeira pessoa, Hilda, mas podemos usar uma estruturação radi para isso e opiáceos reestruturando neste caso porque nome da variável primeiro era dizer o nome do Sr. Propriedade. Eu posso fazer isso com uma sintaxe mais curta com as chaves rodadas para o nome da variável. Ele também vai fazer o mesmo com e a taxa. Então, adicionando os colchetes correndo tempo dizendo, Pegue o primeiro objeto do raio, pegue a propriedade do primeiro nome e imprima. Ou eu poderia dizer, acho que este primeiro nome da segunda pessoa neste caso, a primeira pessoa seria atribuído ao sublinhado que pegamos o primeiro nome da segunda pessoa, e eles também podem obter o outro pessoas da matriz. Então, você vê, nós imprimimos o primeiro nome do IRS, e então nós fomos para perder três pessoas na matriz de pessoas. Então, outra capacidade agradável é um Shing Wait aqui. Nós temos uma função simples que faria recifes Chuck Norris citação e o maior para buscar um p i, que voltou a prometer. Assim, o primeiro retorno a prometer com objetos responsáveis. Então precisamos chamar o Jaysh em redes funcionais, que retorna uma promessa com os dados. E então precisamos ter uma captura de Shalom lá em caso de fora na terra. Então vamos reescrever isto com o Kuwait asiático. Neste caso, vamos chamar a função de fato e vamos esperar os resultados, que é a resposta. Depois disso, vamos chamar a delegação de resposta para obter os dados novamente. São devoluções para promessa. Então usamos esse peso e que podemos imprimir. Isso é piada. Então, porque estamos usando um peso, temos que mudar essa função um pouco declarada como assíncrona de Shin com as palavras-chave asiáticas . E você vê, funciona perfeitamente divertido. Eu era humana Grécia em erro aqui por isso não retorna vantagem se apenas correr, ocorre um erro entre nunca ver lá, Então, precisamos adicionar algum erro chocalho. Podemos embrulhar tudo numa tentativa normal. Pegar apenas como casaco de solteiro, e lá verá o erro sendo impresso. Vamos consertar o seu poço para termos piadas de volta agora. Outra coisa boa com esta sintaxe é que podemos usar instruções de controle regulares que temos usado apenas. Se declaração aqui para ver se a resposta foi OK e só então recebe um J. Shin e imprimir uma piada. Tudo isso é muito mais fácil de fazer do que com a escola prometida no Texas. Então vamos fazer uma recapitulação rápida. Usamos óculos porque é familiar. Torrente de ópio. Está em impostos. Nós sabemos. Para a maioria das outras linguagens de programação usado o novo trabalho chave para criar instâncias. Arrumou problemas de mapa antigos para transformar uma matriz em e uma nova matriz fora de uma forma diferente. Cada item é mapeado, geralmente a função de mapa. As funções do Fete Arrow são uma boa maneira de declarar essas funções de mapeamento ou outra função. Para que as cadeias de modelo mãe são maneira fácil de compor cordas. Usando variáveis diferentes. Use constante vamos para variáveis. Ghost não vai deixar você mudar isso muitas vezes. O que você quer. Use exportações importantes para combinar funcionalidades diferentes, muito melhor do que usar variáveis globais tradicionais cujo objeto de estruturação se você quiser apenas obter algumas propriedades de? Não, mais uma coisa comum em reagir. Eles usam uma pia esperar com o buscar um P I ou, para que o assunto, com qualquer prometido baseado A P. Eu realmente bom. Então veja no próximo vídeo, quando eu vou explicar tudo sobre o projeto da turma. 6. Projeto do curso: Eu sou re share. Bem-vindo de volta ao prato. Curso de introdução vai reagir neste vídeo. Vamos dar uma olhada rápida no projeto de panos que vamos fazer para este curso. Então nós vamos usar os dados do filme para ser para criar nosso próprio aplicativo de filme. Então, vai ficar assim. Teremos um layout agradável com design de material como a guarda diretriz para nossos diferentes filmes. E se você clicar no botão Saiba mais, teremos mais detalhes. Nós também podemos camisa como aqui. Estou à procura de Star Wars com a esperança certa fora da tela. Você pode ver os critérios de pesquisa. Você quer experimentar o aplicativo aqui. É uma versão funcional. Podemos clicar neste link e ele vai começar. O host do aplicativo agora examinará como hospedar o aplicativo lá também. Então aqui você pode ver os detalhes do Bom Poderoso Chefão, ou eu poderia procurar por Star Wars. Dê uma olhada em um dos filmes lá, então vejo você no próximo vídeo. Vamos começar criando um novo projeto de reator 7. Como criar um novo projeto React: Oi, Maurice. Aqui. Bem-vindo de volta a este curso de introdução de reacções. Neste vídeo, vamos dar uma olhada na criação de um novo projeto de reação. A maioria das pessoas começam uma nova reagir Projetos por Yuzhin Cria React app Great React, Um utilitário de mijo desenvolvido pela equipe do Facebook e torna muito fácil começar com o novo projeto React. Isso é ótimo. React App é um aplicativo de nota que você precisa ter certeza de ter notado velho dedo do pé sua máquina de desenvolvimento. Isso é puramente para fins de desenvolvimento e não é necessário em tempo de execução. Então vamos começar e andaime nossa aplicação. Primeiro, certifique-se de que a nota está instalada com a versão correta, então eu poderia anotar 8.9 ponto um, não atrasar apenas, mas bom o suficiente. Em seguida, precisamos de uso toe, NPM toe uma barraca, criar aplicativo reagir, e precisamos especificado um G mesa para bandeira global. Eu já fiz isso, então não vou fazer isso de novo. Usando cria reagir, enfraquecer andaime para fora o novo projeto Realmente simples. Basta ir criar aplicativo reagir. Especifique o nome do projeto para filmes neste caso e pressione enter. Ele irá criar uma nova pasta com o nome do projeto, criar alguns arquivos forçados, começar a instalar pacotes e isso vai levar um pouco de tempo porque os pacotes de desenvolvimento são bastante grandes. E uma vez feito isso, podemos realmente navegar para a pasta e iniciar o aplicativo usando MPM. Iniciar e há aplicativos. Começa na tipa para parabéns. Você acabou de ter seu primeiro aplicativo de reação em execução na janela do terminal. Você pode ver que é isso. Abre para varanda aposentadoria porto anfitrião local e no esporte endereço I p local três milhares. Então, veja o próximo vídeo onde vamos explorar o projeto que acabamos de criar. 8. Explorando o projeto: Oi, Marie Share. Bem-vindo de volta a este curso de introdução de Wrecked. Então, neste vídeo, vamos explorar o projeto que criamos no vídeo perdido. Lembra-se do vídeo onde usamos criar reagir? Bem, isso é o que vamos ver agora. Então, se não dermos uma olhada no treinador e depois editá-lo, vamos precisar de algum tipo de editor. Vou usar visuais para negociar casaco. Você pode usá-lo também, ou você pode usar outro. Isso realmente não importa. Reagir realmente não se importa com o outro usar. Eu só gosto do código de estúdio visual porque é realmente poderoso e fácil de usar. Então isso é uma vida dentro do casaco. Aqui vemos o projeto gerado no topo. Você vê a pasta pública ou arquivo de árvore encarado FF Aiken Index disse H Mill no manifesto. O Jason. O índice dot html é para Marco para a nossa aplicação. Uma linha de vedação 28 por ano vazio, def. Com a rota I D, que será realmente usado para renderizar a nossa aplicação reagir. Não há nada lá ainda, mas haverá quando o aplicativo for executado. Há também um manifesto. Jason era o que é para armas progressivas, não precisa se preocupar com isso agora. A parte principal de sua aplicação está na fonte. Cheio ou assim aqui temos dedo indexado. No entanto, Js, que é dois e três pontos para a nossa aplicação. Você poderia ver o reagir confuso renderização que irá renderizar nossa aplicação aquele elemento lá em que raízes diff que vimos antes. Há também este operador de serviço de registro. Eu vou comentou que os trabalhadores de superfície são bastante incrível, mas o apoio por diferentes navegadores ainda é assim que buggy. Então, por agora, é melhor não para a juventude. E então onde é que o aplicativo que vem do Will que vive no xadrez de maçã? E aqui você pode ver um close up estendendo os componentes do reator que tem uma função de renderização que retornou algo que se parece com marcação up. Isto não é realmente marcar. Isto é o que eles chamam Js x Intacs. E no próximo vídeo, vou explorar mais sobre o J 6. Por enquanto, apenas tinta sobre Há marcação que será renderizada onde em nosso aplicativo é executado. Então, há mais algumas coisas para dar uma olhada no resto é não mais pasta jóias que contém todo o casaco que não observamos a partir de NPM. A maior parte é necessário que o tempo de design apenas na parte inferior contra Jason paquistanês, que contém as dependências. Você pode ver reagir React Dome, tanto primeiro quanto 16.2, que é a versão atual. No momento, você pode obter uma versão posterior. Essas são as duas dependências necessárias para o tempo de execução. Há também uma dependência potro Reagir Scripts, que é usado em tempo de desenvolvimento. Não é necessário para o tempo de execução, mas vai garantir que temos um surfista de desenvolvimento, protesto falso ou agrupado e tudo o que for necessário abaixo. Você vê quatro scripts diferentes. Você vê o script de início, que eu usei o vídeo anterior para iniciar o aplicativo. Há um script de construção vai usar no final do curso para construir versão implantada runtime , e seus dois scripts testam em ejectos, que vamos ignorar. Por agora. Vamos cobrir em outro curso em algum momento no futuro. Se você está interessado, então isso é basicamente mais velho é para ele. Se você quiser ler mais sobre isso, confiança é me ler Se eu abrir a pré-visualização, é um pouco mais legível. Você vê Há muitas informações aqui sobre o que criar em rack nos EUA e o que ele não faz, incluindo como implantá-lo. Vamos analisar a maior parte disso, mas no final do curso, vamos implantar o aplicativo que criamos. E você vai mostrar mais fora a informação deste caiu por agora, se você que no rádio. Vá em frente. Basta abri-lo no modo de visualização e é legível o marcado no próprio Schorsch, iss legível, mas não tão legível s para visualizar. Então esse é o projeto. E no próximo vídeo, eu vou explicar tudo sobre dois j seis centavos impostos e como nós costumávamos construir aplicativos de reação , então vejo vocês lá. 9. O que é JSX?: Então, neste eu estou correndo aqui. Bem-vindo de volta a este curso de introdução. Então, neste vídeo, vamos falar sobre o quê? Js Exes. Então Js X é apenas açúcar sintático. Acontece que é usado para carregar com reagir. Então é um latido importante para dar uma olhada. Então reagir elementos são criados usando uma chamada para direcionar criar função elemento. Bem, isso é fácil de escrever. O JS X faz com que o índice de Tulse seja apenas uma pequena convulsão. Aqui está um exemplo de onde o componente analisaria o tempo de execução. Temos um aplicativo de classe estendendo os panos componentes de reagir e dentro de para renderizar a função. Retornamos chamadas para reagir, criar elementos questão chamado a uma diferença lá e ness. É um H um e uma nova lista de ordem Elementos, que contém uma lista de elementos foram Truell Display Star Wars. Não é difícil ler isso, mas também não é o Syntex mais fácil . O JSX, que na verdade produz isso, é muito mais fácil de ler. Parece um Tchmil. É quase HTML não é bem, mas ele lê da mesma maneira, então este sexo J é transpire oleado em dois JavaScript anteriores. Então, o que é diferente entre J. Sex e HTML normal. Bem, é uma visão embutida do JavaScript. Então ainda estamos dentro de um Kloss, que estende componente, que tem função Orender, que retorna este índice JSX. Você vê elementos def regulares H um elemento, a fim de listar o item. Todos esses elementos parecem familiares. Há uma pequena coisa, no entanto, onde você normalmente vê atributos de tecido CSS. Aqui. É um nome de classe. Isso ocorre porque a classe é reservada chave funciona em JavaScript, então Direct Team decidiu usar o nome da classe em vez de fechar. Você também vê essas chaves com nova data até a data String. Tudo entre chaves é uma expressão normal do JavaScript, então é apenas JavaScript com execuções e será renderizado. Neste caso, ele só vai renderizar uma data atual como string. Nada de especial para, sem restrições, parece com alguns fora das linguagens de modelo onde você só pode fazer coisas muito específicas dentro de expressões. Não, isso é apenas JavaScript. Qualquer coisa que você pode fazer em JavaScript Goche. Então junte-se a mim no próximo vídeo quando eu vou explicar tudo sobre balbuciar, o que também é . Usamos para transportar todos os JSX para JavaScript regular de modo 10. O que é Babel?: Oi, Marie Share. Bem-vindos de volta a isto. Curso de introdução vai reagir neste vídeo. Vamos falar sobre Babel. Então, o que faz babble Babble é compilador JavaScript. Ele pode basicamente compilar JavaScript estilo moderno, que não é entendido por navegadores mais antigos no reboque. Estilo mais antigo javascript, que cada navegador na cerca. Mas também pode obrigar a reagir perseguição código Extell. Então vamos dar uma olhada e ver isso em ação. Lembra do projeto que criamos? Bem, nós tínhamos um componente de aplicativo com J S X, que se parece com isso. Vamos copiar isto e ir para a batalha. Então este é o site da Bíblia que eles puderam ver. Aqui diz que Babel é compilador JavaScript, seus cabelos de cães. E é um site muito bom em geral. Mas uma das características legais é que podemos experimentá-lo aqui para que ele possa realmente basear nosso treinador no folheto aqui. Você pode ver que ele o obriga na mosca e no lado direito vemos a saída. Então você vê as chamadas para reagir criar elementos exatamente como vimos no vídeo anterior. Então por que eu mostro balbuciar para fazer isso? Bem, quando criamos um aplicativo usando, criar, criar, reagir a ele é dito balbuciar de provocou todo o conjunto de ferramentas. Então ele usa balbuciar nos bastidores para transpirar tudo. Todos são longe JavaScript em JavaScript. O folheto no sentido, incluindo o Jays X. Então junte-se a mim próximo vídeo quando eu vou mostrar-lhe como começar a criar componentes reagir. 11. Como criar um novo componente React: Oi, Marie. Sheer Welcome de volta a este curso de introdução de reagir. Então, neste vídeo, vou mostrar a vocês como criar um novo componente de reação e usá-lo. Então vamos mergulhar direito no casaco criado para que eu não quero desordenar o meu curto cheio com tudo. Então a primeira coisa que faço é criar uma pasta de componentes, manter todos os meus componentes abaixo da fonte. Fuller, certifica-te que isto está debaixo da fonte e lá vou criar uma nova queda. Isso é sobre filmes, então eu vou criar um carrinho de filmes. Não faça jazz aqui. Então, a primeira coisa que você precisa fazer é importar a biblioteca reage de reage. A próxima coisa que você precisará fazer é criar uma nova classe. Vamos chamar esse cartão de filme, e isso vai se estender a partir dos componentes reativos da classe base. Então esta classe requer métodos errados render, e ele vai retornar alguma marca para cima. Neste caso, vamos manter as coisas bem simples. Só vamos retribuir o fato de que isso é cartão de filme. Finalmente, precisamos exportar tão perto para que possamos usá-lo em outro lugar. Isso está usando o padrão de exportação. Agora ainda precisamos usar novos componentes. Então vamos para o baú aplicativo até componentes. Vamos nos livrar de todo o conteúdo lá dentro. Nós doamos. Só vai atrapalhar. Não preciso mais ir devagar. É que vamos importar o nosso carrinho de filmes e vamos torná-lo parte do nosso componente. Então, ao importar algo de dentro do aplicativo, sempre certifique-se de usar um caminho relativo com importações tão divertidas. Não barra componentes barra carrinho de filme. Então inclua os componentes da placa de filme em rendição e veja que estamos renderizando um carrinho de filme agora . Sempre que fizermos alterações no cartão de filme você eu vou atualizá-lo automaticamente. Então, se ele mudou, fazer isso é o carrinho de filme através. O aplicativo é atualizado automaticamente no navegador. Legal, certo. Então, vejo vocês no próximo vídeo, onde explicarei como usar adereços para dados passados de um componente para o próximo. Vejo-te então 12. Como usar props para passar dados: Oi, Marie. Muito bem-vindo de volta a este curso de introdução vai reagir. Então, neste vídeo, eu vou mostrar a vocês como usar adereços para dados passados de um componente para um componente filho . Então vamos começar sexta-feira para ir a partir do componente trap aqui e já criou uma nova variável chamada Star Wars, que contém objeto de filme. Há uma ideia de um e o título de Star Wars. Agora é isso que eu quero passar para o guarda do cinema. Então, o cartão do filme. É sobre exibir filmes. Então eu vou usar sua propriedade chamada Filme. E nisso eu vou usar cintas para patrão na expressão de Star Wars. Agora, dentro do cartão de filme, quero usar esses dados. Então, no topo da minha renderização, eu posso extraí-los de uma propriedade sobre os objetos atuais chamado Props Então Close um filme é adereços distais, que retorna o filme dos adereços e, em seguida, dentro do meu dia. Se eu puder usá-lo, posso exibir o título. Então aqui, este é você. Eu mostro Star Wars. Se eu voltar para o aplicativo e mudar o título para algo, Els começar naufrágio, por exemplo, ele se opõe a você. Eu imediatamente esfrio, certo? Então junte-se a mim próximo vídeo quando eu vou mostrar como você pode trabalhar com uma corrida fora de dados em elementos de repetição . Vejo você então. 13. Repetição de componentes: Eu sou uma corrida aqui. Bem-vindo de volta ao curso de introdução prato de reagir. Então neste vídeo vamos falar sobre componentes repetidos, então vamos mergulhar direto no casaco. Então aqui está o nosso projeto anterior com uma ligeira mudança em vez de um único filme. Star Wars of Good, uma coleção de filmes com Star Wars, Star Trek e Late Runner ainda renderizando o primeiro filme massa. Então, não há mudança lá. Então, como nós renderizamos todos eles? Bem, poderíamos repetir o componente do cartão de filme, mas isso não é muito útil, porque ela teria que saber quando isso financia quantos filmes eram. Sim, é isso que vamos usar sua expressão de script Java. Vamos usar essa função de mapa de raios para mapear a matriz de filmes e nos transformar em um cartão de filme para cada item na matriz. Chefe no filme A depuração e Nós somos bons para ir, exceto se abrirmos a depuração aqui poderia ver um erro sobre uma propriedade chave ausente. Então, toda vez que estávamos repetindo elementos, precisamos ter certeza de que temos que manter a propriedade, que é única. Então, neste caso, nós temos o filme I d. Eu vou usar essa é a chave, e nosso erro está indo. Então, apenas uma breve recapitulação nós vamos fazer loop usando a função Rehmat. Nós conhecemos cada filme na coleção de componentes de um filme, e dissemos para manter a propriedade assim reagir sabe qual filme está associado com que pode telefones . Vemo-nos da próxima vez em que vamos falar sobre gestão estadual. 14. Gerenciando o estado: Eu sou Orisha. Bem-vindos de volta às adições. Curso de redução vai reagir neste vídeo. Vamos falar sobre gestão do estado dentro dos componentes do reactor, por isso vamos mergulhar no casaco. Então aqui está nosso projeto anterior acabou de mudar inning fora da coleção de filmes originais. Mas fora isso, é a mesma coisa. Então a primeira coisa que precisamos fazer é adicionar uma propriedade de estado aos nossos componentes e especificar o estado inicial lá. Então, neste caso, o estado inicial será apenas na matriz vazia fora de filmes dentro de para renderizar a função. Queremos usar isso para que usamos a sintaxe de estruturação objeto para chegar a filmes a partir do objeto de estado. Agora os nossos componentes vão renderizar com um filme vazio ou um de filmes. Então, em seguida, precisamos atualizar os estados para mostrar esta lista de filmes que costumavam componente essa função de ciclo de vida de montagem. Para isso é este gatilho Logo após o componente foi montado após a primeira renderização, ele usará para lançar função de estado no componente para mais. O estado de sexta-feira que modifica o palco irá acionar o componente para ser renderizado novamente, então ele será renderizado duas vezes agora uma vez com uma matriz vazia e outros com o filtro direito, o componente fez montagens. A função de ciclo de vida também é uma ótima maneira de iniciar um comportamento de telhas. Vamos fingir por enquanto, com o tempo definido. Então eu só mudei o estado com os filmes depois de alguns segundos. Então nós vimos página vazia, sem filmes, e depois de alguns segundos eles estão realmente carregados. Então vamos novo uma breve recapitulação que precisávamos adicionar a propriedade de estado para fazer componentes que usamos para componente dit Mount função de ciclo de vida para Trigger Nation ou este comportamento usado para definir a função de estado de propriedade de atualização, que vai para componente para Ender traseiro e dentro de para renderizar a função. Nós lemos os dados do estado, então junte-se a mim na próxima vez que eu vou mostrar-lhe como carregar dados de uma parte ou ilusão em Ajax School 15. Como carregar dados usando uma chamada AJAX.: Oi, corrida aqui. Bem-vindos de volta a isto. Curso de introdução vai reagir neste vídeo. Nós vamos dar uma olhada em como fazer um deck escolas e baixa guarnição dados do xerife para então o xerife para o trabalho sobre o uso é o filme D B. É um ótimo site, que lista filmes populares entre outras coisas. Mas o importante para nós é que ele tem um bom AP I. Então aqui estão os sites reais. Esta é a lista estavam interessados em cooperar de filmes, então você só para criar uma conta neste site. E uma vez que você tem no país pode ir para suas configurações e o interior das configurações. Vais encontrar a tua chave A P I. Desça os pedaços. Aqui, você encontrará a chave A P I. Você precisará alimentar três versões. Copie isso e vá para o site do desenvolvedor. Aqui podemos aprender tudo sobre a documentação para todos os tipos de coisas que podemos pedir. Mas no nosso caso, estamos interessados nos filmes. Então, os melhores filmes que podemos realmente tentar essa vida a partir deste site com base em sua chave P I e rolar para baixo obits e executar para solicitar. E aqui pudemos ver a resposta com a lista de filmes nos resultados. Propriedade. Vamos, Pete, Pete, é o teu L. E vamos voltar para a nossa candidatura. Se o aplicativo em vez de compensar filmes para uma lista fixa, vamos fazer uma pergunta de idade real. Então, estamos acostumados a buscar a função e bem baseado no Euro, e vamos usar ticks para que possamos facilmente injetar a chave A P I, que eu importei do FBI. Arquivo Keitel Js. Você vai ter que pagar com certeza em uma chave P I lá dentro. Você consertou porque a otimização da função de busca Guinness é retorno para uma promessa. Precisamos fazer isso uma função de envelhecimento, então nós prefixo componente fez montar com uma pia. Agora podemos usar esse peso na busca para esperar que a promessa resulte. Isto irá realmente retornar um objeto de resposta que nos diz tudo sobre a resposta. Então, uma coisa sobre a função de educação da resposta, que podemos usar para recuperar para dados, retorna outra promessa. Então vamos ter que usar um peso novamente neste Dia Jason que é hoje que acabamos de ver quando testamos , é o euro no site. Por isso, tem uma propriedade de resultados que contém filmes reais. Então vamos usar isso para o estado definido. Agora, se você voltar para a testa e olhar para a replicação, podemos ver que ele realmente lista os filmes. Nós só assim no filme para ser bem legal, certo? Realmente fácil de data baixa neste caminho. Então, o que isso faria. Nós usamos para buscar função para solicitações de dados Ajax que criamos em uma função cantar e usado para esperar que as promessas para resolver e aqueles que tivemos o dia em que usamos para definir a função de estado novamente, como antes para re renderizar o componente com a lista de filmes. Então, vejo-te no próximo vídeo. Vamos dar uma olhada rápida no design do material, que será usado para tornar a nossa aplicação um olhar mais bonito. 16. Design de materiais: Eu sou uma corrida aqui. Um curso de redução de propinas bem-vindo vai reagir neste vídeo. Vamos dar uma olhada no que é o design de material e como você pode adicioná-lo à sua aplicação. Então, o que este material design design material? Issa Design linguagem do Google. É um sistema unificado para combinar. Recurso é, e você são componentes juntos para criar um bom aplicativo U. Y. Ele vem com CSS e muita orientação sobre como usá-lo. Ele é realmente projetado em torno do papel como o papel seria usado de uma forma mais tradicional e criar camadas em cima de um do outro. Mas acrescenta muita interatividade. Como você verá no momento. É muito interativo, em parte por causa de sua herança móvel. Uma das coisas que ele poderia ver em si mesmo é componentes de cartão no componente de cartão é uma maneira muito agradável de combinar uma imagem que irá texto e talvez garrafas adicionais como reagir voltar que vai usar isso para exibir nossos filmes. Poderíamos usar material design SS, mas no mundo reagir, é mais fácil usar material que você y a maneira mais popular de criar aplicação de design de material com reagir. Ele consiste em um número fora de reagir componentes que você pode usar. Então vamos dar uma olhada no site. Então, um brinde ao material que você wai website. Como você pode ver da versão Little Banner um ponto que eu estava chegando. Se você não vir isso, disse ao Banner, quando você assistir este vídeo, ele pode já estar fora. Mas agora, para você, um ainda está em beta. Você também pode dizer aqui você pode ver que a versão atual é 0.20. Como o único ponto sobre gin é bem diferente. Eu teria uma recomendação pular a versão 0.20 ou o que quer que possa ser no momento, e ir para o um ponto sobre gin se isso não é final ainda. Então, para clicar no link, chegamos às notícias Oh, versões. Poderíamos dar uma olhada em alguns dos componentes. Vamos dar uma olhada em um botão simples, e aqui você pode ver botões planos você pode ver se eu passar o mouse sobre eles. Eles meio que acendem. Além disso, se eu clicar neles, você pode ver esse efeito de ondulação, que é meio agradável. Nenhum soc botões diferentes aqui ainda o efeito ondulação aqui. Os componentes da placa. Vamos usar um cartão muito simples. Você vê, parece um pouco com uma folha de papel sobre a mesa com algum texto sobre ela. Ou, neste caso, um cartão com uma imagem tem são alguns textos e algumas garrafas, que é tipo de como o que vamos fazer. O componente bar at outro componente estará usando mostrou um título fora do aplicativo opcionalmente com um menu de hambúrguer e talvez outra opção de menu aqui para Logan. Meio agradável e fácil de usar. Então, se você quiser começar, primeiro você precisará instalar o material. Então vamos copiar isso e ir para a janela de controle no PlayStation. Roubamos? A outra coisa vai precisar fazer é instalar o Roboto formado porque ele aqui o link para a visão olho do Google AP para instalá-lo. Então, vamos copiar isto. Vá para o editor abrir o índice gira para Mel e abaixo do título APP Weaken baseado. Há dentro. Será baixado para o falso automaticamente do site do FBI ghoul. Bem, estamos aqui com o meu só vai mudar o título porque nunca chegamos a fazer isso. Então vamos chamar isso de filmes de topo. Então, enquanto isso, o material projetado instalado e poderíamos executar novamente o aplicativo, mas não haveria realmente nada para ver. Então vamos pular essa parte por enquanto. Então, nos vemos na próxima vez, quando vamos usar os componentes da barra at como um topo de nossa página e realmente começar a usar os componentes projetados pelo material. Vejo você então. 17. Adicionando o AppBar: Oi, Marie. Senhor. Bem-vindo de volta ao curso apenas introdução vai reagir. Então, neste vídeo, vamos adicionar o componente at barra de material projetado para nossa aplicação. Então isso não é no BAR. É um bar simples. Uma espécie de barra de ferramentas. É isso. Então, o topo de sua aplicação e é um lugar central para algumas ações, como sair ou pesquisar. Você sabe, ir implementar Does estavam apenas indo para implementar um realmente simples at bar e colocar o título do aplicativo em seu tipo de para branding. Então vamos mergulhar no casaco. Aqui está o seu componente de aplicação, e agora todos nós é apenas mostrar uma lista de títulos de filmes. Então, vamos tornar isso um pouco mais agradável e adicionar em um bar aqui. Se você vai para o material que você y documentação. Podíamos ver o bar Andi. Se clicarmos neste botão, concedemos casaco de força real. Se você vir que há uma série de coisas que estão sendo importadas, então vamos copiar essas importações. Eles têm um estilo muito simples. Essa é uma cópia também, então eles não têm na barra componente. Vamos torcer ainda. Na verdade, isso inclui isso. Se isso é colar é em Onda vamos adicionar um fechamento adicional e se e precisamos fazer mais uma coisa quando exportamos bem, você tem que usar o que estilos funções ordem superior e observar o simples na barra, mas nossos componentes. Então vamos ver como isso se parece. Na verdade, não precisamos desta estrada perto. fica preocupado Masfica preocupado. Isso e seu componente afiado na barra parece branco no cara sempre assim. Eles realmente mudaram um cabelo Golar padrão de qualquer que teria sido primário para padrão. Eu prefiro o primário, então ele se destaca um pouco mais. Temos esta cor azulada, a vista, nada que eu gostaria de mudar agora se rolarmos. Aquela barra realmente rola para fora da vista. Então eu deixei define a posição do pé estático outro valor, eu acho que encontrar esses valores aqui na parte inferior. Se aceitar uma definição para um bar, podemos ir lá. Eles admitiram que existem dois valores diferentes para a posição. Então fixo, absoluto pegajoso ou estático, certo, isso seria estático. Então vamos corrigi-lo, o que você iria corrigi-lo nos dois primeiros no menor. Agora você pode ver se eu rolar o aplicativo da estação de barras. única coisa é, os melhores filmes estão por trás disso, então teremos que adicionar um pouco de estofamento lá. Mas faremos isso quando começarmos a criar cartas. Existe um tipo especial de barra de ferramentas. Ele adiciona Brendan ao aplicativo, torna mais fácil ver qual aplicativo ou nele adiciona um bom local para ações globais como pesquisa, olhar para fora ou navegar para outras partes fora do aplicativo. Então, vejo você ao lado para vê-lo na próxima vez em que vamos criar guardas de cinema para realizar filmes individuais mais antigos . 18. Como criar um cartão de filme: Oi, Murray está aqui. Bem-vindos de volta a isto. Curso de introdução vai reagir neste vídeo. Vamos mudar a lista simples de títulos de filmes para carros de cinema bonitos. Vamos usar um design como este. Vou mostrar uma pequena imagem, o título do filme, a pequena descrição e teremos para Button, que ainda não fará nada neste vídeo. Vamos fazer isso no próximo vídeo, mas vai levar a ver os detalhes do filme. Então vamos mergulhar no casaco agora mesmo. Esta é a aparência da nossa aplicação, e a primeira coisa é que temos a lista. Mas parte da lista está atrás do Ah at BAR, então precisamos de espaço lá para mostrar a lista de filmes abaixo da parte. Então vamos adicionar algumas vedes tem que fazer isso, então isso é melhor. Agora, pelo menos vemos o primeiro filme. Então, a próxima coisa que queremos pegar um cartão de filme, vamos para os lados do design do material e vamos dar uma olhada no casaco de origem aqui. Podemos ver a marcação necessária para este carrinho, então vamos apenas copiar que há uma grande limpeza. Precisamos fazer. Este nome de classe não existe, mas vamos precisar de classe lá. Então, vamos ao carrinho de cinema encerrado. Na verdade, essa é a imagem do filme Digits o carrinho de filme e aqui em vez de dizer Lizard, vamos colocar o título do filme lá para vermos uma lista de títulos de filmes. O layout ainda não é muito bonito. Não temos uma imagem que cospe. Isso é consertar isso primeiro. Então, a fim de exibir a imagem, precisamos dar uma olhada nos retornos Jason Data. Então aqui eu tenho um exemplo. Considerar é uma propriedade de volta drop off, que contém o nome do arquivo fora da imagem real, mas não é o bônus completo que não chegaria ao caminho completo. O banco de dados de filmes é um AP diferente. Eu ligo para onde você pode obter a configuração e ele vai mostrar a base. Ural na diferença permitido tamanhos e combinando dose com o arquivo de imagem de fundo real . Podemos obter o bônus completo, e um pano de fundo será parecido com isso. Então vamos copiar isto. Ainda não vemos uma imagem, mas isso ocorre porque o IMA tchite padrão é pixels de herói. Precisamos especificar um específico? Se você der uma olhada nessa imagem, poderíamos ver um três no Dwight. A altura dos limites reais é de 196 pixels. Vamos usar isso o suficiente Removido das citações extras que não precisam Existem imagens. Eles não parecem muito bonitos ainda, porque por padrão o cartão vai ocupar todo o peso da tela, o que é um pouco demais. Queremos que um carro seja de 300 pixels branco, então vamos adicionar algumas deixa de fazer isso. Isso é melhor. Os pixels antigos do trailer. Ainda é uma longa lista, então vamos mudar isso. Para fazer isso, temos que dizer à lista de filmes que não deve apenas renderizar as massas. Mas você renderizou um músico ou flex embrulhado e que temos um bom estábulo de filmes, e dependendo do tamanho da tela, o número de filmes aumentará ou diminuirá. Mas, como na tela pequena, terá apenas uma única lista. Mas no meu laptop teremos uma lista ou quatro filmes juntos. - Legal. Então vamos mudar a descrição para ser o campo certo. Temos uma boa lista de filmes, incluindo o texto antigo, se passarmos por cima. Ainda não conectamos o botão Saiba mais, mas faremos a próxima lição tão materialmente. Por quê? Carrinhos são uma ótima maneira de mostrar informações como essa, sejam itens repetidos ou individuais. Mas, neste caso, com uma boa lista de repetição de filmes, eles são ótimos para adicionar imagens, botões de ação. Isso é o que a França precisava, como fizemos nesta ocasião. Vemo-nos no ano que vem, quando vamos dar uma olhada nisto a tocar os detalhes da jogada numa janela pop-up . Vejo você então. 19. Exibindo detalhes do filme: Oi lembranças aqui. Bem-vindo de volta a este curso de introdução de Wrecked Neste vídeo. Vamos dar uma olhada em exibir mais detalhes do filme, então vamos mergulhar direto no casaco. Então aqui estão nossos componentes do aplicativo, e agora no estado, só temos a lista de filmes. Mas vamos adicionar o filme seletor a ele quando clicarmos no filme para exibir mais vai mudar este estado ano filme seletivo. Então, a fim de fazer isso, precisamos de uma função de filme seleto que muda para o estado. Então nós usamos para definir a função de estado para atualizar o filme seletivo no estado. Lembre-se, nunca mudou o estado diretamente, que também precisa ser capaz de limpar seu shell, irá adicionar um filme claro para definir o filme seletivo de volta para não. Agora precisamos passar este filme selecionado para os componentes cartões de filme para que ele possa ser você mostrar para o seu. Então, no cartão de filme, criamos um novo filme de seleção de função, onde pegamos esse filme como um filme dos adereços junto com o filme que chamamos de Select movie com esse filme. Então, nas ações do cartão, temos o botão e nós Adam Click manipulador e chamar o filme selecionar sobre os componentes atuais lá. Lembre-se de usar o próprio clique com caixa de camelo. Não, quando clicamos para saber mais botão, o estado é realmente atualizado, mas não estamos verificando os estados fazendo nada com ele. Podemos ver que então uma boa maneira de exibi-lo é usando diálogo para que vamos usá-lo. Formado. Eu olho de material Você. Por quê? Então vamos copiar o código a partir daí e criar um novo filme de componentes. Morrer. Olhe. Vai basear todo o treinador fonte lá, então há algumas coisas que não precisamos. Primeiro, vamos mudar o nome para filme “Die”. Olha, nós não precisamos dizer o controle. Clique em abrir a alça de ordem fechada. Podemos se livrar desses Estado é gerenciado no nível de aplicação. Assim, no Render Função Regresso Filme, que será passado em que será o filme selecionado atualmente, também agarrou a alça perto da função, que passará mais tarde. Agora o diálogo será aberto se o filme motivo selecionado. Então nós usamos um operador double bang para transformar um objeto ou não em um verdadeiro ou falso então vamos voltar para os componentes APP e inclui este filme Die. Olhe lá, vamos importá-lo e, em seguida, renderizá-lo com o filme selecionado. Também precisa se certificar de passar na função de alça fechada, em que, onde limpamos o filme, que também será mais próximo de morrer. Olhe de novo. Por agora. Se clicarmos vai aprender mais, vemos um bom olhar mótil morrer aparecer. Se clicarmos fora dele, ele desaparece novamente. Então vamos realmente exibir o título do filme. Se você acabou de usar o título do filme como ISS, Hair vai realmente obter um erro de tempo de execução. Isto é porque o filme às vezes não é assim filme. O título seria DVF enxaguar uma propriedade no objeto No. Então precisamos fazer isso um pouco diferente. Ela criará uma variável de título e será assumido como padrão para saber qual é valets como uma instância de componente reage , e somente se o filme Opie Act é realmente definido como um filme real irá criar os componentes de título . Eu usaria as chaves no imposto para renderizar o título lá então ou não ou morrer olhar título e eu iria render-nos o seu nome ou ir arquivado estão dependendo de qual filme real Ucat , possamos fazer o mesmo com o conteúdo, o completo para saber. E se tivermos um filme emplumado, renderizar componentes de conteúdo. Você também não precisa das duas garrafas. Então vamos apenas ter um único botão lá, que é chamado Fechado e Curso um manipulador próximo. Então vamos exibir mais alguns detalhes do filme que colocou a visão geral do filme. Esse é o texto ali. E vamos atualizar esses campos de texto para exibir a data de lançamento do filme. Não, vemos a descrição do filme e lançamos isso, mas a data de lançamento ainda era indatável. Então vamos tornar este campo de texto desativado para que ele possa ser alterado. Marcadores anúncios a imagem do filme inchaço Visão geral. Will ATS o filme real, uh, imagem ostentosa. Certifique-se de importar uma classe correta, e nós só precisamos Kark me, suas anotações, as outras partes fora da guarda, assim como antes vamos precisar de alguns CDs tem que realmente dar a imagem para o tamanho certo. Ele atualiza a imagem para mostrar o cartaz em vez do verso e dar-lhe um nome de classe diferente porque ele tem um tamanho diferente. Temos alguns reparos. CSS com o correto com e altura, e aqui vemos o cartaz para O Poderoso Chefão. Então, vamos adicionar mais alguns campos de texto para exibir mais detalhes sobre o filme. Não, apenas datas de lançamento, mas também a popularidade e a média dos votos contam. Recapitulação tão rápida. Usamos o estado do aplicativo para rastrear o filme selecionado. Atualizamos o estado do aplicativo com a função de retorno de chamada. Passamos para o cartão de filme, e usamos para materialmente classe Why Dialogue para exibir os detalhes do filme. Juntem-se a mim na próxima vez, quando vermos como procurar outros filmes. 20. Procurando filmes: Eu sou Aries aqui. Bem-vindos de volta a isto. Curso de introdução vai reagir neste vídeo. Vamos falar sobre procurar outros filmes, então vamos mergulhar no casaco. Aqui está o nosso aplicativo atual, e adicionar campos de entrada de pesquisa à parte superior direita da tela na barra de APP seria um bom lugar para começar. Então, aqui está o nosso componente APP com o at Bar. Vamos adicionar um formulário entradas após o título. Usaremos isto para as nossas camisas de bota. E quando submetermos a firma, queremos começar a igreja. Então, vamos adicionar um conhecido manipulador de submissão, hum, fazendo Ajax School de lá. Então, pesquisar é muito semelhante a carregar o canto superior direito dos filmes. Vamos precisar usar o evento nosso porque, por padrão, HTML irá enviar a página e recarrega o aplicativo. Portanto, temos que evitar o comportamento padrão. Você também tem que mudar um pouco para o seu “L”. Neste caso, vamos procurar. É menos filme. Precisamos fornecer o texto da camisa. Então vamos injetar que nós não temos realmente metade que não pode entre adicionado em um minuto. Então a busca no Texas vai mudar, então vamos conseguir isso dos Estados Unidos, vamos inicializar. É como uma string vazia no estado, então vamos colocar um campo de entrada no formulário. Eu não vou pré-preparado, então você não tem que me ver digitando. Verá que seu valor é a busca, Tex. E sempre que ele atualiza, ele chamará um pesquisado, trocado. Então vamos começar a procurar texto dos estados e que é implementar que procurou ouro trocado de volta. Então, neste lugar, queremos mudar para pesquisar em seguida no estado com base no valor real fora da entrada. Então o evento é real. Diga-nos quais entradas ISS usando a propriedade target e que como um valor, que é o valor real nos livros didáticos. Então, vamos nos certificar de incluir duas instruções de importação necessárias para a entrada e o adorno de importação . Então eles vão ficar quietos. É logo atrás de filmes superiores na nota do lado esquerdo no lado direito ainda, No entanto, No entanto, se tentarmos curto-metragem, obtemos um erro no Paris Eu cometi um erro no euro. Eu esqueci de incluir o parâmetro queria, você sabe, com o parâmetro query lá funciona melhor, e eu poderia procurar por filmes Star Wars, então vamos mudar para os livros da igreja para a esquerda. Assim, definindo a propriedade Flex no título, ele ocupará todo o espaço disponível, movendo as entradas para a direita. É melhor rico à direita. Nós também queremos adicionar um pouco de um adorno para ter certeza de que é claro que esta facilidade de entrada para pesquisa. Então, vamos adicionar que no espaço que vai usar uma Lupa Aiken Muito melhor agora. Se você procurar por Star Trek, veremos os filmes mais antigos de Star Trek. Então vamos fazer uma breve recapitulação. Usamos para controlar componentes de entrada para terminar para um texto de pesquisa. Usamos um Formulário dois envia a busca Texan fazendo Ajax School, e mudamos os filmes no estado com os resultados fora do objetivo de busca. Então, veja você na próxima jogada, todos realmente implantarão nosso aplicativo na Internet 21. Implementando o aplicativo: Estou preocupado aqui. Bem-vindo de volta ao núcleo de redução de decisões de naufrágio. Neste vídeo, vamos implantar o aplicativo que construímos para a arma. Então, aqui estou eu na página MPM para Create Wrecked Up, e se você clicar nos guias do usuário role um pouco para baixo. Você pode ver opções para implantação, e uma muito agradável está usando Now. Agora vemos o serviço a partir de sites, e isso torna realmente fácil para implantar um aplicativo de reação ou muitos outros aplicativos, para que o assunto de graça. Então este é o site real. Então vamos implantar nosso aplicativo aqui estou no comando problemas em nossa aplicação. A primeira coisa que precisamos fazer é criar para lançar o aplicativo de oferta de versão. Usando MPM Run Built criará uma versão de produção fora do aplicativo este Warren Foster , por isso é altamente recomendável. Então, isso criou a pasta construída, que contém dois aplicativos implantáveis. Bem, vamos instalar agora é um global é roubado para que possamos usá-lo para o meu lugar qualquer. Então o NPM instalar agora midterm menos G para global, que é bastante falso, modo que agora está instalado agora poderia implantar o aplicativo usando agora com a opção de nome traço . Caso contrário, ele vai levar a pasta atual, que é chamado Builds, e ao adicionar esse stash public, ele não vai nos perguntar se ele deve ser público divertido para versão livre fora agora. E isso sempre será público. No entanto, recebo um erro. Raising é o tamanho máximo para um aplicativo gratuito é um megabytes e até mesmo há aplicativo não é muito grande. Ele contém uma falta de mapa no mapa. Queda é relativamente grande, então vamos excluir que Andi re tentar implantar. Então, agora nossa implantação foi para parecer melhor. Poderíamos ver o seu EL no console se ritmo Akopian para o seu poço no pincel ou podemos ver o nosso aplicativo hospedado. Então aqui ele está rodando na Internet, apenas disfuncional como era antes que pudéssemos ver os detalhes do filme que conservamos para filmes . Ótimo, então vamos nos certificar que isso pode ser feito com mais facilidade. Podemos fazer show adicionando um novo comando na seção de script. Em nossa alegação prática, você terá que saber o comando lá, que primeiro será executado e compilado, em seguida, CD no diretório de contas. Em seguida, vamos excluir essa queda mapa e agora geralmente muito frio ira quarto para o que já instalado que irá fazê-lo em cada OS reais meses que difere entre Mac OS , Windows e Lennox. Quero alguns arquivos de mapa apagados suas chamadas agora com o nome certo para implantá-lo. Agora podemos implantar o aplicativo apenas fazendo NPM executar agora, e ele irá emitir todos os dois meses necessários. Quem se atreve? É Euro é realmente o mesmo neste caso porque o aplicativo não mudou. Ame o aplicativo novamente para ter certeza. Sim, tudo ainda está totalmente funcional. Ótima. E ainda procurar filmes. Ótima. Então você não precisa de muito para hospedar para reagir aplicativo. O aplicativo pode realmente precisar de mais, mas neste vai o nosso dia que vem de ninguém. Aplicação usando site torna realmente fácil para implantar o aplicativo. Vejo vocês no próximo e último vídeo. Quando fará uma rápida visão geral de tudo o que abordamos neste curso 22. Resumo: Sou Ray Share. Bem-vindos de volta a isto. Curso de introdução vai reagir. Este vídeo acabou de perder. E neste vídeo, vamos ter um resumo rápido de tudo o que aprendeu, o que é um pouco. Então começamos dando uma olhada no que é reagir e por que você deve aprender. Em seguida, demos uma olhada na criação de um novo aplicativo reagir usando criar reagir aplicativo. Temos também de olhar para o imposto de ação Jays para criar componentes destruídos. Nós olhamos para a entrega de componentes de reação única ou múltipla criança. Temos adereços para passar o dia aos componentes infantis. Você declara para conseguir ficar lá para aplicação. Nós costumávamos buscar um P I para fazer escolas Ajax para recuperar dados do servidor. Usado um grupo de pesquisa, componentes materialmente y no nosso caso para fazer o aplicativo olhar bonito. E implantamos nosso aplicativo no Xitong agora, o que foi muito fácil. Então agora é a sua vez. Faça algo grande com reagir e deixe-me saber o que você construiu. Estou sempre interessado em ver o que as pessoas fazem com reagir. Então, obrigado por assistir para marcar. Espero que seja para você. E deixe-me saber o que mais você gostaria de aprender sobre reagir ou reagir assuntos relacionados para que eu possa criar outros cursos sobre esses assuntos por.