O começo
Tags: node, tailwindcss, typescript, react
Published: 2022-05-19 17:45:58

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](https://nodejs.org/en/), 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._


![Image de um esquema SPA, em que o backend e o frontend são separados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3jfmhnn5kvwkvocbamp.png)

**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.

![Imagem de um esquema SSR, em que o backend e o frontend são juntos no servidor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovfvkk4iq4qxjczi9gq4.png)

**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](https://tailwindcss.com/) 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](https://phosphoricons.com/), 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.