Aplicativo de Galeria de Imagens React - Dominando o CSS Grid

Crie um aplicativo de galeria de imagens com React, React Router e styled-components, dominando o CSS Grid com mais de 100 exemplos!

Agora atualizado para a versão mais recente do React e Styled-components! Primeiro, aprenda o CSS Grid com o aplicativo Gridfolio, explorando cada propriedade pai e filho do CSS Grid. Em seguida, crie o aplicativo GridGallery, um aplicativo de galeria de imagens construído com React, React Router e Styled-components. Com o aplicativo Gridfolio, você terá acesso a mais de 100 Grids, cada um mostrando diferentes propriedades pai e filho do CSS Grid. Através de exemplos práticos, você verá como cada propriedade do Grid muda com vários valores e como você pode combinar várias propriedades do Grid. Também abordaremos propriedades mais complexas como grid-auto-flow, grid-template-areas e a elusiva propriedade grid. Cada palestra se baseia na anterior, fornecendo conhecimento que você pode aplicar no aplicativo GridGallery, um projeto React profissional que irá melhorar sua carreira como desenvolvedor. Você também receberá o código-fonte completo do projeto Gridfolio. No aplicativo GridGallery, você construirá um aplicativo de galeria de imagens real do zero. Começando com o boilerplate create-react-app, você aprenderá como utilizar o React Router, estilizar um modal de imagem e criar e testar um PhotoGrid responsivo que funciona perfeitamente em qualquer dispositivo. Além disso, você descobrirá como encontrar e personalizar sua galeria de imagens com fotos e fontes de estoque. Com a ajuda do styled-components, você pode estilizar facilmente os componentes React sem a necessidade de arquivos CSS adicionais. O código-fonte do projeto GridGallery estará disponível para você, permitindo que você consulte o projeto concluído sempre que necessário. Estamos comprometidos com o seu sucesso e estamos aqui para responder a quaisquer perguntas que você possa ter. Ao participar da seção de perguntas e respostas, você fará parte de uma comunidade de desenvolvedores trabalhando no mesmo projeto, permitindo que você colabore e receba feedback instantâneo sobre quaisquer problemas que encontrar. Obrigado por escolher nosso curso e desejamos a você boa sorte em sua jornada de aprendizado! - Os desenvolvedores da React Academy

O que você aprenderá:

- Explore as propriedades do CSS Grid com mais de 100 exemplos de Grids - Crie um aplicativo completo de galeria de imagens com React, React Router e Styled Components - Crie layouts responsivos usando media queries e grid-template-areas para qualquer dispositivo - Utilize styled-components para escrever CSS dentro de componentes React - Aprenda como obter e redimensionar fotos de estoque modernas para um visual profissional - Crie dois layouts diferentes: altura quadrada e altura de linha em cascata - Domine o React Router para reestilizar Links e corresponder rotas com parâmetros de pesquisa - Implemente Modais de Imagem e aprenda como bloquear globalmente a rolagem quando um modal de imagem está aberto