Introdução ao React: criando uma galeria

1. Introdução: Oi, meu nome é Travis Arnold. Sou designer e desenvolvedor há mais de 10 anos. Eu fui apresentado pela primeira vez a React alguns anos atrás, e imediatamente me apaixonei por ele. Eu me apaixonei por React porque ele mapeia tão bem para as ferramentas de design que eu tenho usado por tantos anos. Esta lição é ótima para qualquer um que tenha interesse em React, mas pode ter um pouco de medo de entrar nela. Vamos começar revendo o que é React, por que queremos usá-lo em primeiro lugar, e como ele pode nos ajudar em nosso desenvolvimento. Em seguida, vamos entrar em um exemplo real e criar um pequeno aplicativo de galeria para ver como o React pode ser usado em todo o seu potencial. No final desta classe, você tem uma compreensão básica de como o React funciona, como podemos extrair bibliotecas de terceiros e usar alguns recursos JavaScript mais recentes. Antes de tomar esta classe, você deve ter uma compreensão básica de HTML, CSS e JavaScript. Não se preocupe, vamos rever tudo linha por linha para garantir que você possa concluir o projeto por conta própria. Vemos React sendo usado cada vez mais, e mais a cada dia. Mal posso esperar para mostrar o básico, então vamos começar. Vemo-nos na aula. 2. O que é o React?: Bem-vindo a uma introdução ao React. Obrigado por fazer este curso. O que é React? React é uma biblioteca JavaScript que nos ajuda a construir interfaces de usuário interativas. É criado por Jordan Walke, engenheiro de software no Facebook, e ainda é apoiado e mantido pelo Facebook hoje. Em vez de instruções passo a passo, descrevemos como nosso aplicativo deve ser e React cuidará de atualizar o DOM para nós. Primeiro, vamos começar com alguns conceitos de alto nível e então vamos direto para o código para que possamos aprender como React funciona. React usa um conceito chamado DOM virtual. É uma representação do nosso estado atual da interface do usuário. Como podem ver aqui, temos dois estados diferentes. Você pode imaginar se você tivesse uma div com dois botões e uma tag span, e nós queríamos incrementar ou ser capaz de decrementar um número. Bem, isso é o que poderia parecer se talvez tivéssemos que dizer, clicar no botão de mais e querer incrementar o número. Reagir verá o segundo estado para o qual precisamos passar, e poderia div as mudanças de forma eficiente e, em seguida, passar para o próximo estado e atualizar nosso DOM para nós. Isso também nos permite renderizar para vários alvos, como web, mobile, VR e qualquer outra plataforma. Como nos comunicamos com o DOM virtual? Reagir nos fornece uma função de elemento criar para criar esses elementos para se comunicar com o DOM virtual. É basicamente uma descrição do que queremos ver na tela. Podemos passar um tipo que é basicamente apenas uma tag HTML, ou pode ser um componente que vamos aprender sobre um pouco. Então podemos passar adereços, que podem incluir coisas como OnClick, OnKeyDown e muitos outros eventos. Finalmente, podemos passar por crianças. Isso pode incluir texto e outra chamada CreateElement ou até mesmo uma função. Há algumas pequenas nuances como usar className em vez de classe e estilo que precisam ser passados como um objeto em vez de uma string porque estamos em um ambiente JavaScript. Se você já viu reagir antes, você provavelmente já viu este HTML como sintaxe. Isso se chama JSX. Nós usamos uma ferramenta chamada babel que entende este JSX e compila-lo para algo que o navegador pode entender. Babel é um compilador JavaScript que pega código, transforma-o e retorna o código JavaScript e um formato diferente. Como podemos ver aqui. Estamos transformando a partir de uma tag h1 que se parece com HTML em uma chamada de função usando criar elemento. Se fôssemos passar alguns adereços aqui como talvez estilo, cor laranja, podemos ver como isso vai ser transformado em tempo real. Você pode visitar babeljs.io para brincar com este exemplo ao vivo e ter uma sensação por si mesmo. Podemos usar qualquer expressão JavaScript válida dentro de chaves em JSX. JSX em si é uma expressão JavaScript, mas lembre-se que é apenas [inaudível] em cima de criar elemento. Às vezes, se precisarmos interromper com JavaScript, podemos. Podemos ver aqui temos uma variável de nome que declaramos, e então em nossa variável elemento podemos realmente usar essa variável de nome. Isso resolveria cumprimentar Travis. No entanto, ao mapear coleções, precisamos lembrar de fornecer um prop chave para Reagir. As teclas ajudam a reagir para identificar quais itens foram alterados, adicionados ou removidos. Finalmente, podemos falar sobre componentes. Os componentes são o bloco de construção básico do React. Ele nos permite dividir nossa interface do usuário em partes independentes e reutilizáveis. Podemos compor vários componentes juntos para criar ainda mais componentes. Usamos funções para componentes sem estado e classes ES2015 para componentes com estado. Componentes stateful também nos oferecem ganchos de ciclo de vida que nos permitem conectar em certas partes do processo de renderização. Vamos ver como isso funciona. Como podem ver, temos um componente apátrida e apátrida. Componentes sem estado são muito simples. Eles são apenas uma função que retorna um elemento de reação. Como você pode ver aqui, é a mesma coisa que antes. Só estamos dizendo olá, nome. Qual nome é declarado como uma variável acima chamada Travis, então isso resultaria em Olá Travis. As coisas ficam interessantes quando nos movemos para um componente de estado. Começamos com uma classe ES2015 e, em seguida, estendemos de React.Component, que vem de React. Ao estender a partir de React.Component, herdamos alguns métodos e outras propriedades que podemos usar e React vai entender. Neste exemplo básico, nós apenas declaramos uma propriedade de estado que vai conter outra propriedade de nome chamada Travis. Então teremos um método de renderização que React chamará e retornará Olá, this.state.name que seria Travis. Também é útil observar que um método de renderização é necessário para classes. Ambos os componentes resultarão na mesma coisa, mas eles são escritos de duas maneiras diferentes. Vamos descobrir como o estado pode nos ajudar em nossas aplicações. State nos dá a capacidade de tornar nossos aplicativos interativos. Ele pode ser um objeto de qualquer coisa, incluindo strings, arrays, e até mesmo funções. Podemos atualizar um componente quando novo estado usando o método de estado definido que herdamos quando estendeu de React.Componet. É útil notar que reagir nos ajuda aderindo a um fluxo de dados unidirecional. Você sempre pode pensar em estado vindo do topo e escorrendo para baixo para os componentes filhos e fornecendo-lhes com esse estado. Como você pode ver aqui, nós declaramos um componente usando uma classe chamada contador. Estendemos a partir do componente React como antes, e estamos declarando algum estado inicial chamado contagem. A contagem começa em zero e queremos incrementar ou diminuir, a contagem com base em qual botão clicamos. Como falamos antes, temos que chamar o método setState para mudar o estado. SetState pode tomar um objeto com o novo estado, ou pode tomar uma função que recebe o estado atual e, em seguida, retorna seu novo estado. É o que estamos fazendo aqui. Se você pode ver essas funções de incremento e decremento, elas receberam o estado e adicionam um ao estado atual ou subtraem um do estado atual. Se clicarmos neste botão algumas vezes, podemos ver que estamos realmente incrementando o estado. Da mesma forma, se clicarmos no menos, decrementamos o estado e descemos. Como vimos antes com o DOM virtual, cada vez que decrementamos ou incrementamos o estado, ele irá div as alterações e atualizar o componente adequadamente. Uma vez que estamos usando este state.count, ele será atualizado dinamicamente, como podemos ver abaixo. Se quiséssemos reutilizar este componente contador, como poderíamos fazer isso? Bem, nós apenas manter o estado e gerenciá-lo nós mesmos? E se tivéssemos estado de aplicação que precisava vir de outro lugar e fornecê-lo para este contador. Vejamos como podemos usar um termo chamado adereços para conseguir isso. Os adereços são essencialmente opções que podemos fornecer aos nossos componentes. Eles são semelhantes ao estado em que adereços podem ser qualquer coisa. Usamos tipos de prop para fornecer validação e certifica-se de que os adereços são usados como pretendido. Também podemos fornecer adereços padrão que serão usados para adereços que nunca são passados. Vamos ver como podemos tomar o exemplo contador antes e puxá-lo para fora em peça reutilizável. Componentes sem estado receberão adereços como um argumento, e componentes stateful receberão adereços como uma propriedade que pode ser acessada sob este ponto adereços. Neste caso, nós não estamos passando nenhum adereço para o nosso aplicativo, e então nós só vamos nos preocupar com o contador e os adereços que estão voltando a isso. Se pudermos ver que temos um componente contador, estamos passando adereços para ele chamado contagem em decremento e em incremento. Nós mantemos estado embora em nosso aplicativo agora. Nós não estamos segurando isso no componente contador em si. Este componente contador agora é agnóstico de seu estado e pode ser usado de muitas maneiras diferentes. Não precisa saber de onde vem o seu estado. Esta é uma idéia básica de como os adereços funcionam. Não entraremos nos detalhes de tipos de adereços ou adereços padrão aqui. Mas eu recomendo vivamente que você vá olhar para a documentação do React e leia mais sobre isso. Finalmente, vamos ver como podemos renderizar as coisas para a tela. Como o pacote React, existem pacotes separados para diferentes renderizadores que falamos antes. Lembre-se, dissemos que poderíamos renderizar para uma plataforma nativa ou para VR ou para a web. Hoje vamos usar React DOM e seu renderizador. Isso é fornecido como um pacote separado. Usamos o pacote React DOM, que nos fornece um método de renderização, e é muito simples. Tudo o que fazemos é pegar nossos componentes que estamos definindo, vamos passar isso como o primeiro argumento para renderizar e no segundo argumento nós apenas passar um nó DOM válido. Neste caso, vamos obter o nó DOM usando getElementByID. Isto não é o mesmo que o nosso método de renderização. Isso realmente se torna para o DOM. Em vez de apenas atualizar nossos componentes cada vez com uma renderização, foram realmente renderizar para o DOM e atualizar o DOM cada vez que este é atualizado. Essa foi uma visão geral de alto nível do React. Aprendemos como o DOM virtual funcionou, o que é, como podemos usar o elemento react.Create para se comunicar com o DOM virtual. Como usamos JSX que é um HTML como sintaxe que compila para baixo para reagir, criar elemento. Em seguida, aprendemos como construir componentes e como podemos usar o estado para tornar as coisas dinâmicas, e então como podemos usar adereços para tornar as coisas utilizáveis. Finalmente, aprendemos como poderíamos usar o React DOM para renderizar coisas para a tela na web. Vamos entrar em um exemplo do mundo real e ver como essas coisas funcionam juntas. Vejo-te lá. 3. Programando no navegador: CodeSandbox é um editor de código online e é uma das maneiras mais fáceis de começar a usar o React. Isto é o que vamos usar hoje para criar nosso aplicativo de galeria. Você pode visitar esta página da Web acessando codesandbox.io. Crie uma conta para que você possa salvar seu progresso enquanto avançamos e, em seguida, voltar a este vídeo. Depois de ter uma conta ou conectado, vamos começar clicando no botão Abrir Reagir. Isso criará uma sandbox para nós com um aplicativo simples React pronto para usar. CodeSandbox usa uma ferramenta chamada Create React app desenvolvido pelo Facebook. Isso nos dá uma vantagem na construção aplicativos React, cuidando da configuração e configuração. Tradicionalmente, precisaríamos configurar um servidor e ferramentas como babble para transformar nosso JSX para criar elemento como falamos antes. Mas Create React app lida com tudo isso para nós. Você pode ler mais sobre criar React up visitando o repositório se você estiver interessado, basta ter em mente, isso é o que CodeSandbox está usando sob o capô para alimentar nosso ambiente de desenvolvimento. Podemos ver que começamos com um arquivo básico index.js. Estamos importando Reagir e Reagir DOM, bem como alguns arquivos CSS para estilo básico. Então temos um componente funcional simples para o nosso aplicativo, que então é renderizado para o navegador usando React on Render, como vimos no vídeo anterior. Talvez esteja se perguntando de onde React está sendo importado. Na verdade, vem do nosso ficheiro.json. Isso descreve quais bibliotecas você deseja usar do npm, bem como algumas outras opções de configuração que o aplicativo Create React usa. Se você nunca ouviu falar de um npm antes, é um gerenciador de pacotes JavaScript que nos ajuda a usar bibliotecas de terceiros como React. Voltaremos a este tópico em um vídeo posterior e aprenderemos como podemos extrair outras bibliotecas que podemos usar para nossa vantagem. Se voltarmos para o nosso arquivo index.js e salvarmos o comando S. Veremos que somos apresentados com algumas outras opções aqui agora. Podemos ir para a guia Informações do projeto e vamos renomear nosso aplicativo para Reagir galeria. Desta forma, podemos encontrá-lo mais fácil quando voltarmos a ele em nossos projetos. Uma última coisa a observar é que se fizermos algumas alterações de código e salvarmos nosso arquivo, notaremos que o código é reformatado. Se eu fizer guia aqui, empurrar o comando como, vamos ver que ele volta ao lugar. CodeSandbox está utilizando outra ferramenta chamada mais bonita. Prettier impõe um estilo consistente em toda a nossa base de código e nos permite nos concentrar em realmente escrever código em vez de como nosso código é formatado. Estamos prontos para começar a codificar nosso aplicativo de galeria. Vamos aprender como podemos buscar dados de uma API e ver um exemplo real de como o estado pode ser usado em React. 4. Buscando dados de uma API: Antes de começar a trazer dados para o nosso aplicativo, precisamos refatorar nosso componente sem estado em um componente stateful. Lembre-se que essa é a única maneira de manter o estado e atualizar nossos aplicativos. Vamos fazer classe aqui, vamos chamá-lo de aplicativo, vamos estender a partir de react.component, irá fornecer um método de renderização e irá retornar uma div simples por enquanto. Podemos dar-lhe um nome também. Ligaremos entre H1. Podemos chamar-lhe pixel. Então podemos até adicionar um pouco de emoji aqui para nos divertirmos. Adicione esta pequena câmera, faça o comando S. Agora estamos prontos para ir e temos acesso ao estado. Vamos ver o que podemos fazer aqui, adicionamos um estado que adicionamos a propriedade da imagem. Estamos usando uma matriz vazia por enquanto. Vamos descobrir como podemos usar uma API e apontar alguns dados para o aplicativo agora que estamos prontos para manter algum estado e atualizá-lo. Como podemos buscar dados de uma API? Hoje estará usando uma API de pixel, já que está aberta ao público, não teremos que nos preocupar com autenticação. Tenha em mente que, às vezes, as APIs exigem autenticação e precisam de uma chave de desenvolvedor para funcionar corretamente. Também adicionarei um link para uma lista de outras APIs que você pode querer usar abaixo. No nosso caso, a API de pixel é pública e podemos realmente visitar o URL que usaremos hoje para obter dados de. Nós rolamos aqui para baixo, podemos ver que eles nos dão um endpoint que podemos usar. Vamos visitar isto e ver o que temos de volta. Recebemos uma lista de imagens. Legal. Como colocamos isso em nosso aplicativo? Bem, podemos usar algo chamado Fetch. Fetche é um método disponível para nós na janela e nos permite chegar a um recurso e nos dar de volta uma resposta preenchida com alguns dados. Eles usam uma promessa, que se você não sabe o que é uma promessa, basicamente diz que prometemos fazer isso. Dizemos que vamos fazer alguma coisa e depois queremos fazer outra coisa. É assíncrono por natureza. Em vez de pensar como o código é executado de forma síncrona, então você chama algo, outra coisa acontece. Nós realmente não sabemos necessariamente uma promessa vai resolver, Semelhante a, neste caso, um HTTP solicitações onde queremos ir buscar alguns dados e obter algo de volta. descermos aqui, podemos ver que recebemos uma promessa que se resolve a um objeto de resposta. Vejamos esse objeto de resposta bem rápido. O objeto de resposta contém algumas propriedades e métodos que podemos chamar sobre ele e nós só estamos interessados em um hoje. Richardson neste corpo. JSON. Queremos chamar isso quando recebermos uma resposta, que retornará outra promessa. Então, finalmente, podemos obter nossos dados dessa resposta. Vamos ao nosso aplicativo e ver como ele funciona. Agora queremos aproveitar alguns métodos de ciclo de vida. Um em particular é ComponentDidMount. Isso será chamado quando o componente for montado pela primeira vez na tela, então agora podemos começar a buscar alguns dados. Vamos ligar para buscar. Vamos passar o URL onde você pode obter a lista de imagens. Lembre-se, isso retorna uma promessa, então podemos chamá-lo então, e nós recebemos uma resposta. Essa resposta podemos chamar um método JSON em, que retornará outra promessa. Então podemos chamá-los novamente, e agora nós realmente temos dados para trabalhar. Abra isso em uma função. Só estamos usando uma função de seta gorda aqui. Então vamos para este estado definido. Queremos mudar nossas imagens agora nossa propriedade de imagens e agora vamos passá-lo de volta os novos dados que acabamos de obter, não nos ordenar para salvar. Agora vamos ver se saímos do nosso estado onde voltamos. Se abrirmos nosso console, agora podemos ver que temos dois objetos que amamos. Lembre-se, renderizar é chamado quando o componente primeiro monta e , em seguida, se atualizá-lo e chamar isso no estado ou será atualizado novamente com o que queremos. Neste caso, temos imagens com uma matriz vazia, que podemos ver aqui começamos com uma matriz vazia imagens em nosso estado. Mas lá chamamos esse estado de conjunto com os dados que obtivemos de volta desta API que tínhamos. Agora, se registrarmos, abrimos este aplicativo, podemos ver que funcionou, recuperamos todas as nossas imagens muito legais. Agora podemos abrir este aplicativo. É apenas uma matriz de um monte de dados, como vimos quando voltamos aqui e olhamos para todos esses dados que temos. Agora que temos acesso a isso, podemos fazer algo com ele. Vamos fechar isto e ver como podemos usar isto. Agora que temos esses dados, como podemos colocá-los na tela? Lembre-se, podemos usar a interpolação JavaScript. Vamos abrir aqui e acessar imagens. e, em seguida, vamos usar mapa porque é uma função de matriz. Podemos mapear cada imagem e fazer algo com ela e retornar uma nova matriz. Neste caso, vamos fazer fonte de imagem. O que podemos passá-lo para a fonte, onde passamos a fonte? Vamos olhar para ele iria escolher alguns dá-nos de volta em nossa chamada API. Lembre-se que temos todos esses dados de volta, então o que podemos passar para construir uma imagem. Não parece que eles nos dão a fonte de uma imagem, mas nós temos o ID de cada imagem. Isto é estranho. Como é que isto funciona? Como conseguiríamos um URL de imagem? Bem, é assim que as APIs funcionam. Às vezes eles nos dão um pouco de dados e então podemos usar isso para construir ainda mais dados. Então, neste caso, temos o ID da imagem e vamos ver se eles nos dão uma maneira de obter um ID específico. Oh, aqui, perfeito. Podemos obter uma imagem específica indo para este URL e pegando uma imagem. Vamos ver como isso pode funcionar. Se voltarmos ao nosso aplicativo, colar isso, renova a interpolação JavaScript aqui. Legal, agora estamos recuperando algumas imagens, mas é a mesma imagem. Isso não é tão legal. Vamos usar alguma interpolação. Podemos usar nossa imagem que temos agora que temos acesso e vamos obter sua ID. Legal, parece que temos imagens agora, então agora estamos renderizando imagens na tela é muito legal. Não parece tão bom, mas pelo menos temos nossas imagens entrando e renderizando para a tela. Vamos descobrir como podemos tornar isto um pouco mais agradável. Antes de fazer, porém, precisamos adicionar uma chave para este lembrar, reator vai reclamar se não tivermos uma chave e felizmente temos uma identificação aqui. Desde o seu único, temos que entender isso e ser feliz, salvar isso, legal. Olhando bem. Uma coisa que devemos fazer rapidamente é olhar para nossos dados aqui, precisamos adicionar um método de fatia porque estamos pegando muitas fotos agora. Estamos pegando cerca de 1000 fotos, então só devemos pegar cerca de 30. Vamos fazer isso bem rápido. Então agora podemos ver que não pegamos tantas fotos. Isso será um pouco mais fácil de carregar, legal. Agora estamos prontos para iniciar esse aplicativo. 5. Adicionando estilo no React: Como iniciamos a nossa candidatura agora? Podemos ver que estamos importando o arquivo CSS aqui no topo. Vamos entrar lá rapidinho. Estes são alguns estilos que foram configurados antes. Nós não queremos centro de alinhamento de texto e não estamos mais usando aplicativo para que possamos apenas segmentar nosso corpo. Isso parece bom. Agora nossas fontes estão usando um san serif parece um pouco mais agradável. Se chegarmos ao nosso arquivo de índice, agora como fazemos, devemos apenas usar uma folha de estilo como antes social voltamos para styles.css. Podemos fazer isso, mas como reagir é apenas JavaScript, temos muitas maneiras diferentes nas quais podemos estilizar nossas aplicações. Poderíamos usar estilos inline fornecendo um objeto, embora isso possa sair do custo de desempenho, podemos usar CSS tradicional usando o nome da classe e uma folha de estilo ou podemos usar um termo chamado CSS e JS, que é o que vamos usar hoje. Há uma tonelada de bibliotecas que suportam CSS e JS que todas vêm com um recurso diferente. Mas hoje vamos usar uma biblioteca chamada emoção. Emoção suporta habilidades de estilo CSS em JavaScript. Eu pessoalmente gosto de usar objetos, mas você também pode usar um termo chamado literais de modelo de tag , a fim de escrever CSS mais familiar em uma string. Vamos ver como funciona aqui. Nós importamos a função CSS da emoção. Podemos construir nossa string CSS e aplicar. Isso criará um nome de classe, e podemos aplicar esse nome de classe ao nosso domínio. Podemos ver aqui que temos que instalar uma biblioteca adicional para usá-lo com reagir. Isto é o que é fixe na emoção. Pode funcionar com ou sem reacções. Ele funciona com muitas plataformas diferentes. Este é o modelo de tag literais, coisas que eu estava falando. Podemos ver aqui que temos um aplicativo. Passamos um nome de classe como normal, como passaríamos qualquer outro nome de classe. Ele é resolvido corretamente. Não precisamos nos preocupar em gerenciar uma folha de estilos separada ou algo assim. Podemos manter todos os nossos estilos e co-localizados juntos. Isso é muito bom e vamos ver como isso pode funcionar. Vamos voltar ao nosso aplicativo e começar a estilizá-lo. Primeiro precisamos instalar nossas novas dependências. Lembra que dissemos que voltamos para o nosso pacote. Como fazemos isso no código sandbox? Será que nos dará uma maneira muito fácil de fazer isso. Podemos apenas adicionar dependências aqui com este botão, vamos clicar que vai procurar emoção e lá está. Vamos instalar isso. Vemos que foi adicionado às nossas dependências. Mas lembre-se que estamos trabalhando em reações, então precisamos adicionar a dependência de reação de emoção. Motion React, há. Legal. Estamos prontos para ir. Temos de volta ao nosso index.js. Podemos importar estilo de reagir movimento vai ver isso. Agora estamos prontos para começar a estilizar nosso aplicativo dentro com CSS e JS, não precisamos voltar a uma folha de estilos. Eu geralmente gosto de manter uma folha de estilo imóvel para que eu possa gerenciar meus estilos globais. Você pode fazer isso com emoção, mas depende do que você quer fazer. Eu gosto de ter apenas um arquivo CSS regular para estilos globais e usar o CSS e JS para manter meus outros componentes estilos específicos co-localizados, o que é realmente bom. O movimento nos dá essa função estilizada. Podemos começar a usá-lo imediatamente, fazer estilo, e então podemos passar uma string para qualquer tag que queremos usar. Neste caso, queremos usar uma tag de cabeçalho. Então vamos passar outra função com um objeto, e que serão os estilos que queremos dar-lhe. Faremos um estofamento para que pareça um pouco mais agradável. Dê 16 pixels de preenchimento. Então poderíamos fazer volta em torno de cor, eu gosto de usar HSL, que é saturação de matiz e embarque. É apenas uma maneira fácil de lembrar suas cores sem realmente ter que olhar para elas. Vamos fazer zero por cento para saturação e, em seguida, embarque que queremos fazer vamos fazer como um mais escuro ou como um cinza claro. Faremos 94%. Vamos ver como isso funciona. Agora temos este componente que foi criado para nós e o estilo, o nome da classe já foi criado para nós, assim não precisamos nos preocupar em ir a uma folha de estilo. Está tudo bem aqui, o que é muito bom. Se descermos aqui, vamos embrulhar nosso título em um cabeçalho e, em seguida, vamos ver se ele funciona. Lá vamos nós, você pode ver que é um pouco cinza claro, mas temos alguns outros estilos que estão em conflito. Temos margem padrão em nosso corpo, então vamos nos livrar disso. Isso é apenas a partir dos estilos padrão do navegador. Parece que o nosso H1 está herdando algum estilo. É por isso que gosto de limpar as coisas. Nós poderíamos até mesmo importante normalizar ou algo aqui para redefinir todos os estilos. Mas, neste caso, vamos apenas fazê-lo nós mesmos e não vamos fazer nenhuma margem em nosso cabeçalho. Bem, agora parece um pouco melhor. Agora vamos pegar nossas fotos e colocá-las em uma grade e fazê-las parecer um pouco mais agradáveis. Podemos fazer const, vamos chamar isso de TileView. Então podemos usar nossa função estilizada novamente e isso será apenas uma div agora. Então vamos passar outra função com um objeto e vamos usar a grade de exibição. Então queremos ser capazes de passar adereços para este elemento de estilo. Talvez mudá-lo torná-lo variável para que possamos mudá-lo com base em diferentes opções. O que é legal sobre a emoção é que nos permite passar adereços aqui. Nós vamos envolver este objeto em parens porque queremos implicitamente retorná-lo. Caso contrário, eles pensam que queremos uma função que precisamos fazer um retorno. Em seguida, vamos pedir-lhes muitas vezes vai dizer estofamento, adereços espaçamento, e então vamos fazer lacuna grade. Os adereços começam a espaçamento também. Isso irá adicionar espaçamento em torno de todo o nosso subsídio ou ver se isso funciona. Podemos apenas ter a nossa visão do tempo, vir até aqui. Vamos embrulhar todas as nossas imagens lá e ver se parece que está funcionando, vamos salvar isso. Não parece que está funcionando. Vamos ver o que está acontecendo. Não vamos passar espaçamento para ele. Talvez seja aqui que podemos introduzir adereços padrão. Não estamos passando nenhum adereço para cima, mas talvez não estivéssemos espaçamento para ser um adereço padrão. Podemos ir aqui e fazer o TileView. Temos este componente e podemos acessar os adereços padrão de propriedade sobre ele, e agora podemos passar espaçamento. Podemos dizer, afastado 16 pixels como um espaçamento padrão. Legal, agora está funcionando. Agora, se você não passar nenhum espaçamento, vamos apenas usar 16 pixels por padrão. Caso contrário, podemos entrar aqui. Podemos dizer espaçamento, talvez algo ultrajante como 60. Bem legal, então está funcionando. Isso é muito espaçamento. Vamos ficar com o espaçamento padrão que configuramos. Nós podemos realmente inspecionar isso e ver que ele está funcionando e como a emoção transforma tudo em um nome de classe. É muito legal. Vemos aqui, vemos esse pequeno nome de classe que recebemos, e ele se resolve aqui mesmo. Nós somos exibidos preenchimento de grade 16 pixels, lacuna de grade 16 pixels. Muito legal. Vamos adicionar mais algumas coisas para limpar isso. CSS grid é extremamente poderoso, então vamos aproveitar isso. Podemos usar algo chamado colunas de modelo de grade. Em seguida, vamos passar um modelo de string literal, e podemos dizer repetição. Vamos preencher automaticamente. Em seguida, podemos usar uma função minmax em CSS. Vai interpolação aqui e vamos dizer adereços. Poderíamos ir a largura mínima da célula. Vamos ter apenas uma fração. Basicamente o que isso está dizendo é tentar preencher o viewport com tantas células como você pode, mas mantê-los nesta largura mínima de célula. O que realmente causou, obtemos um recurso responsivo por padrão. Não temos que nos preocupar com a criação de pontos de interrupção ou algo assim. Vamos passar uma célula mínima padrão com. Vamos fazer 3-20 por enquanto. Também temos que lembrar que precisamos passar um valor de pixel. Então, enquanto pixels aqui, vamos ver se isso funciona. Para recesso de viewport deve ter células nele que tem uma pilha. Legal. Lá vamos nós. Parece que está funcionando. Ainda precisamos limpar nossas imagens, faremos isso em seguida. Mas agora temos algum design responsivo automático, o que parece muito legal. Vamos limpar nossas fotos um pouco. Eles não estão se encaixando muito bem no visor. Vamos criar outro componente aqui. Vamos chamá-lo de foto igual ao estilo. Eles querem passar na imagem. Agora distribua uma função novamente com os nossos estilos. Nós vamos com 100 por cento. Nós também queremos fazer bloco exibido. Se você não exibir imagens de bloco têm o inline por padrão e como esta margem estranha na parte inferior deles, bloco de exibição ajuda com isso. Vamos ir objeto fit cover, que isso irá certificar-se de que a imagem é span como sua própria pequena viewport que está em então as células no nosso caso. Nós temos esse componente, vamos descer aqui. Mas também devemos mudar nossa célula mínima. Bem, isso é um pouco grande demais. Eu acho que nosso visor é cerca de 300 agora, então vamos definir 240 que pode ser uma largura agradável. Vamos descer aqui. Vamos substituir isto e deve funcionar porque parece que está a funcionar. Estas imagens são um pouco longas. Vamos fazer uma imagem quadrada realmente assim vai substitui com, vamos fazer mil para que tenhamos alguma boa qualidade. É bom sobre a API de pixel. Ele nos permite cortar imagens com muita facilidade. Agora tenho algumas imagens quadradas. Estamos parecendo muito bem. Nossas imagens seguidas. Eles têm um bom espaçamento em torno deles. Vamos descobrir como podemos tornar este pouco interativo e talvez clicar sobre ele para expandir a visão e mostrar algumas informações adicionais. 6. Adicionando interação: Antes de avançarmos para cá, vamos limpar um pouco os nossos ficheiros. Eles estão chegando tão longe como ficar um pouco inchados. Podemos limpar isso movendo um arquivo intuitivo. Primeiro, copiaremos tudo. Isso é o que eu faço, eu sempre copio tudo e depois crio um novo arquivo. Vamos chamar componentes. Agora, dependendo de quantos arquivos você tem, talvez você queira criar uma pasta com mais arquivos dentro disso. Mas no nosso caso, isso é bem simples, então vou mantê-lo bem simples. Nós só precisamos de estilo, e então podemos ver isso. Também queremos exportar tudo isto, por isso é assim que podemos apanhá-los. Em seguida, exploraremos o custo TileView e, em seguida, exportaremos a foto. Agora devemos ser capazes de importar estes para que você possa se livrar de todos estes e nós teremos alguns erros, mas tudo bem. Vamos importar os arquivos agora. Não precisamos mais de estilo. Agora podemos ir para importar, e podemos escolher esses componentes individuais que acabamos de exportar, então diremos para componentes e, em seguida, vamos Header, TileView e, em seguida, foto. Olhando bem. Vamos voltar ao nosso arquivo de componentes. Agora queremos clicar em uma foto e expandi-la, então como podemos fazer isso? Nossas galerias um pouco grandes agora também. Vamos ver se podemos encolher isso um pouco, então vamos talvez 120. Lá vamos nós. Agora, se abrirmos isto e fecharmos, sim, lá vamos nós. Temos uma visão melhor. Quando nos expandimos, faz sentido. Agora queremos pegar esse componente fotográfico e estamos passando adereços para ele, mas eu não estou usando os adereços agora. Quando criamos nossos estilos, gosto de puxar meus estilos. Eu gosto talvez eu não iria uma folha de estilo e assim vai dizer, podemos dizer ThumbnailStyles, então isso é quando ele é pequeno. Então vamos fazer FullScreenStyles como chamamos isso. Isso será um objeto de estilos também, então queremos que eles sejam por padrão os que declaramos, então miniatura é esta. Então, quando estiver em tela cheia, vamos consertar a posição. Top zero, direita zero, esquerda zero, baixo zero. Isso vai, quando expandimos tudo derramado em toda a viewport, queremos dar-lhe uma altura mínima para que não seja muito grande. Vamos dar-lhe um pouco de espaço para respirar, então vamos fazer 80 viewport altura, e então nós também podemos fazer margem auto para centrá-lo na tela. Agora, podemos pegar esses estilos que acabamos de definir e vamos nos livrar disso. Podemos dizer, desde que obtemos adereços de volta, vamos dizer adereços, vamos chamar este prop IsActive, e você pode dizer se ele é Active, queremos usar os ThumbnailStyles, mas vamos usar FullScreenStyles quando dizem ativo, e, em seguida, caso contrário, usaremos o ThumbnailStyles, para que possamos salvar isso. Acho que estamos prontos para ir agora. Nada vai acontecer ou absoluto parece o mesmo, então isso é bom. Vamos descobrir como podemos dizer uma foto para ser se ela está ativa ou não. Podemos introduzir algum novo estado aqui desde que queremos mudar nosso aplicativo quando clicamos em algo, e então vamos dizer, vamos segurar um CurrentPhotoID, que será nulo por padrão. Então, a fim de determinar se algo está ativo, vamos fazer, está ativo neste estado CurrentPhotoID é igual a esta image.id. Como obtemos CurrentPhotoID? Bem, lembre-se que falamos sobre OnClick para que possamos passar em um evento. Poderíamos dizer onClick, e passará uma função, e então veremos este setState, e obteremos o currentPhotoID. Vamos configurá-lo para este image.id que clicamos. Estamos fazendo loop através, estamos anexando esses eventos e estamos vendo, quando clicamos nesta foto, queremos definir qualquer foto que acabou de clicar no CurrentPhotoID, e então agora vamos atualizar nosso estado e voltar para baixo, E então toda vez que passar por cada imagem, ele vai dizer Esta está ativa? Este está ativo? Este está ativo? Finalmente, ele vai chegar a onde quer que tenhamos clicado, que é definido como CurrentPhotoID. Vamos ver se funcionou. Parece que está funcionando, então agora podemos clicar em algumas fotos e expandir e isso não parece muito bom, mas vamos corrigir isso aqui rapidinho. Como podemos fechar isto? Quando clicamos em uma foto, nada mais acontece vai continuar configurando para o ID da imagem, certo? Então, poderíamos dizer aqui, poderíamos puxar isso de novo. Isso talvez quando você quiser puxar isso para uma função aqui em cima. Às vezes faço isso ao invés de fazer um retorno implícito, faremos um retorno explícito, então devolveremos isso. Agora podemos armazenar variável aqui chamada IsActive, e então podemos dizer, vamos passar IsActive aqui em baixo agora, então vamos apenas limpar as coisas um pouco. Agora podemos dizer, se formos isActive, queremos que ele seja definido como não, em vez de definido para a imagem. Id, de modo que deve fechar a imagem porque ele vai apenas voltar através de não e então agora ele não vai ser definido por mais tempo, então vamos salvar isso. Agora devemos ser capazes de clicar em uma foto e, em seguida, clicar nela novamente, e isso agora funciona, então ele ajuda-a de volta. Vamos ver como podemos limpar nossos estilos um pouco e torná-lo um pouco melhor. Em seguida, queremos adicionar componentes de quadro para que possamos ver nossa foto um pouco melhor e não temos uma destruição atrás de nós, então vamos fazer isso. Quais são os componentes? Vai fazer exportação const Frame é igual ao estilo, e isso será apenas uma div e passará seus próprios estilos quando você usar um estilos semelhantes aqui para, como um estilos de tela cheia, vamos apenas colar aqueles em. Vamos fazer cor de fundo. Neste caso, vamos fazer cada HSLA, que é um canal Alpha. Isto é muito estranho. Isto é o que eu não gosto disto no HSLA e HSLA, mas temos que usar vírgulas agora. Apenas lembre-se sempre que se estamos usando hsla e cada hsla que temos que usar vírgulas com o hsla e não vírgulas com o hsla. É um pouco confuso, e então o zero por cento, nós queremos um 100 por cento para branco. Então vamos fazer um canal Alpha aqui, então nos dará um pouco de transparência. Vamos fazer 96, então isso deve ser bom para nossos estilos de moldura. Vai salvar essa cópia do quadro e voltar para o índice, vai importá-lo, e então vamos apenas colocá-lo aqui na parte inferior. Uma vez que esta posição corrigir deve apenas aparecer. Como é que fazemos isto aparecer e esconder-se? O que podemos fazer algumas coisas legais aqui. Lembre-se que somos apenas, podemos interromper com JavaScript. Podemos dizer this.state.currentPhotoID e se uma vez que null é verdadeiro, o IRF é um valor falsy vai dizer, se houver um currentPhotoID, mostrar este quadro. Caso contrário, não mostre. Isso seria avaliado como verdadeiro, e então ele vai apenas executar este que seria criar elemento e renderizar nosso quadro, então salve isso. Agora, quando clicarmos, devemos ter um quadro que apareça. Lá vamos nós. Esta é uma boa razão. Mesmo que CurrentPhotoID são nulos é falsey, CurrentPhotoID não pode ser zero. Foi o que vimos quando clicamos no primeiro. Volte aqui e diremos que não é igual a nulo. Às vezes você pode encontrar um problema como este. Basta ter cuidado se você tem algo onde você está comparando e é zero, então pode não ser verdade, então nós clicamos sobre isso. Isso deve ser bom. Já não podemos ver a nossa imagem. Vamos fazer isso aparecer. Venha aqui, por que ZIndex porque agora isso está sentado no topo, basicamente porque ele está sentado na ordem do DOM e conjuntos desejados, então vamos dizer que este é o ZIndex de cinco. É aqui que começamos a jogar com nossas palavras ZIndex, certo? E então CindEx é 10, então agora clicamos nele. Agora clique nele. Vemos que temos uma moldura atrás de nós. Podemos clicar e fechá-lo, abrir, fechar. Bastante doce. Vamos limpar um pouco os estilos para esta foto. Talvez, altura 80 visor não era bom. Vamos fazer largura aqui, vamos fazer largura e vamos fazer 80 largura viewport. Lá vamos nós. Estamos parecendo bem. Adicionamos mais uma coisa aqui. Vamos ver se vamos para adereços está ativo, vamos apenas adicionar um cursor aqui, então vamos mudar o nosso cursor quando estamos pairando sobre e vai dizer, e é tela cheia, queremos zoom out, e então quando é uma miniatura, queremos ampliar e ver como isso parece. Bem, ele faz isso. 7. Conclusão: Aprenderemos como buscar dados de uma API, como o estilo funciona e reagir. Como podemos construir APIs prop em torno de coisas como grade CSS. Como adicionar alguma interatividade clicando em uma imagem e expandindo.Eu queria manter esta lição curta, mas lembre-se que há muito mais que poderíamos fazer com isso fora.Se abrirmos esta imagem, por exemplo, é um pouco grande.Nós pode medir a janela de visualização e certificar-se de que a imagem sempre se encaixa ou está em boa acessibilidade, conectando os controles do teclado ou até mesmo adicionar algumas animações agradáveis. Eu encorajo você a ir acima e além em seus projetos, se você está pronto para o desafio. This foi uma visão geral bastante alto nível do que é capaz com React.I encorajá-lo a continuar lendo através da documentação React, aprender JavaScript baunilha e fazer cursos de reagir, por favor, publique seus projetos e podemos resolver quaisquer problemas que você tenha juntos. Muito obrigado por fazer esta aula. Foi um prazer dar-lhe algumas informações sobre como React funciona e como podemos usá-lo. Mal posso esperar para ver o que você cria.