Foi disponibilizado para nós um layout em Figma, fornecido por Ilana Mallak, com todas as cores, ícones, imagens, hoovers e fontes que utilizaremos, incluindo cores claras e escuras. Esse projeto terá a versão Mobile e a versão Desktop, por isso a responsividade foi pensada para trazer uma melhor experiência ao usuário. Este projeto é simples, mas abrange muitas tecnologias Full-Stack, para que possamos adquirir o máximo de conhecimento. Vamos aprender React, React Native, Node, Tailwind CSS, Headless UI, TypeScript, Testes Automatizados, banco de dados e muito mais.
Primeiramente, temos que configurar nosso ambiente de desenvolvimento, instalando o Node.js, disponível aqui, ou um gerenciador de pacotes, como Homebrew. Além disso, usaremos o VSCode.
Um SPA, ou Aplicação de Página Única traz uma melhor experiência ao usuário através da sensação de navegar entre as páginas muito mais rápido. Os aplicativos SPA são sempre executados no lado do cliente – neste caso, o navegador. Back-end e Front-end são separados, então o back-end recebe requisição e renderiza de acordo com o front-end do dispositivo. Quando novas páginas precisam ser carregadas, não há necessidade de uma nova solicitação ao servidor: essas páginas são carregadas por meio de rotinas JavaScript, eliminando a necessidade de solicitações ao servidor para obter o novo conteúdo a ser renderizado: desde o primeiro carregamento de da aplicação, toda interação para carregamento de conteúdo acontece exclusivamente no lado do cliente por meio de JavaScript. Como exemplo de SPA temos Twitter, Gmail, Google Maps e Trello.
SSR, ou Renderização do lado do Servidor, reverte o processo de renderização, trazendo parte do esforço de renderização do aplicativo SPA para o servidor, semelhante ao carregamento tradicional. O SSR pode fornecer aos usuários um carregamento de aplicativos mais eficiente, pois parte da renderização é feita no servidor. O back-end e o front-end empilham juntos. Como exemplo temos Wordpress, Magenta, GitHub e outros.
Então vamos começar!
No terminal digitamos npm create vite@latest, escolhemos o nome web para o projeto, depois escolhemos o Framework que iremos utilizar, caso selecionemos React e React with TypeScript. Assim, o projeto está criado. Basta executar o código. para abrir o VSCode.
O Vite é uma ferramenta que faz com que nosso navegador entenda o JavaScript mais moderno. Depois disso, executamos o npm install para instalar as dependências do nosso projeto. Fizemos uma limpeza nos arquivos criados em nosso diretório, e rodamos npm run dev.
Antes de prosseguirmos, temos que saber duas coisas sobre o React: componentes e propriedades. Componentes é uma função que retorna HTML. Ele deve ter uma primeira letra maiúscula para não retornar uma tag HTML. Propriedades é como um atributo do componente.
Depois disso, vamos configurar nosso aplicativo com Tailwind CSS. É um framework CSS utilitário com classes como flex, pt-4, text-center e rotate-90 _que podem ser compostas para construir qualquer design, diretamente em nossa marcação. Ele nos traz muita produtividade, e para instalá-lo entre no site oficial e instale usando _PostCSS. Pode ser que nosso código não fique tão bonito, mas ganhamos muito em produtividade. Mas podemos criar classes da forma tradicional do CSS também, basta colocar @apply e todas as propriedades dessa classe no arquivo .css.
Vamos começar a fazer a interface móvel. Essa técnica é chamada de Mobile first. Mobile first é um projeto que cria projetos da web e sites primeiro em dispositivos móveis, e depois os adapta para desktop e outras plataformas, e traz algumas vantagens como melhor classificação no Google, melhor experiência do usuário, aumento da credibilidade da marca, otimização de carregamento de página, entre muitos outros.
Criamos uma pasta na pasta src, nomeada componentes e, em seguida, um arquivo .tsx chamado Widget. Exporte a função no arquivo App.tsx. Vamos criar um Trigger Button para dar Feedback, e os ícones podem ser encontrados no site Phosphor icons, e eles têm integração direta com o React, então podemos instalar rodando npm install phosphor-react no terminal do VSCode. Dessa forma podemos importar diretamente para o nosso projeto utilizando o ícone como um componente, com diversas propriedades, como peso, tamanho entre outras.
Vamos começar passando uma aula para ele. É muito importante para o nosso projeto conhecer o conceito de unidades rem em CSS, que é uma unidade de tamanho relativo com excelente suporte a navegadores. 1rem é igual ao tamanho da fonte do elemento html, que, para a maioria dos navegadores, tem um valor padrão de 16px. O uso de rem pode ajudar a garantir a consistência do tamanho da fonte e do espaçamento em toda a nossa interface do usuário (UI). Com isso em mente, comece a codificar o design deste botão, e é impressionante as facilidades que o Tailwind nos traz. Com algumas linhas de código finalizamos a funcionalidade do primeiro componente. Este botão é usado para abrir/fechar algo, então esse algo vai mudar com uma ação, e isso se chama Estado no React, que é uma variável como qualquer outra em JS, mas o React olha essa variável e toda vez que ela tem seu valor alterado ele irá criar a interface deste componente novamente, com este novo valor.
É muito importante para o nosso projeto pensar em acessibilidade, e isso é mais fácil de pensar desde o início do projeto, e serve de auxílio para que sites, ferramentas e tecnologias sejam pensadas e desenvolvidas para que pessoas com ou sem deficiência possam usar, navegar, interagir e compreender o conteúdo, com autonomia. No nosso caso, podemos navegar pela página usando o teclado, mas ele não nos avisa quando um novo elemento aparece na tela. Para corrigir isso,
podemos usar as tags ARIA, Aplicativos avançados de Internet acessíveis, que definem formas de tornar o conteúdo e as aplicações web mais acessíveis a pessoas com deficiência. Mas temos várias bibliotecas em React que facilitam nosso trabalho, como o reakit, feito por um brasileiro, que será chamado de ariakit; radix-ui, também é uma biblioteca de acessibilidade, e headlessui, que usaremos em nosso projeto, pois ela foi projetada para se integrar lindamente com Tailwind CSS. Execute npm install @headlessui/react no terminal para instalar e importe o Popover em nosso Widget.tsx. O mais legal é que o popover controla toda essa parte do estado, então não precisamos definir uma função para falar quando ela estiver aberta/fechada. Fazendo as modificações necessárias, conforme documentação, nosso projeto passou a ter diversas acessibilidades ARIA.
E assim concluímos a primeira aula deste evento, na qual aprendemos a configurar o ambiente de desenvolvimento, como funcionam um SPA e um SSR, conceitos importantes de React, usar e configurar Tailwind CSS, rem, usar React States, conceitos de acessibilidade, uso de diferentes bibliotecas e muito mais.
Top comments (1)
Really interesting.
Thanks for sharing!