React e Tailwind para o desenvolvimento web

A criação de aplicativos web é um trabalho com alta demanda atualmente e, saber como desenvolver projetos nessa área de forma rápida e eficiente pode trazer uma excelente fonte de renda. O programador frontend será responsável por programar as interfaces que é a camada de interação do sistema com o usuário. Esse processo pode ser feito de diferentes formas, utilizando diferentes tecnologias, seja apenas com o JavaScript, CSS e HTML puros, ou, através de bibliotecas como o React e frameworks CSS como o Tailwind, que falaremos a respeito neste artigo.

Através do React é possível reutilizar facilmente trechos de código, dentro de um único projeto ou mesmo entre diferentes projetos separando em componentes. Ela é uma das bibliotecas javascript mais populares atualmente e foi inicialmente desenvolvida pelo Instagram que hoje pertence ao Facebook. A beleza de utilizar o React é que os componentes se tornam bastante simplificados, eles são apenas funções JavaScript que retornam HTML, formando uma sintaxe chamada de JSX.

O Tailwind é um framework CSS que providencia diversas classes para construir sites bonitos e responsivos de maneira rápida. Diferente de outros frameworks como o Bootstrap e o Material que criam estilos para componentes como botões, dropdowns e formulários, o Tailwind tem uma abordagem mais funcional, providenciando classes que podem ser unidas para construir os componentes.

Porém, conforme sua interface cresce em complexidade, o Tailwind vai deixando o seu HTML "poluído" de informações, por esse motivo a união entre o Tailwind e o React é bastante vantajosa, pois possibilitará diminuir a repetição do código ao criar os componentes que serão reutilizados.

Configurando o React e Tailwind

Para iniciar o projeto com React mais rapidamente, utilizaremos o vite, que é uma biblioteca que facilita o build de aplicações web, basicamente o que ela faz é servir localmente os arquivos durante o desenvolvimento e criar um bundle com javascript, CSS e outros assets para produção. Para configurá-la, digite o comando a seguir no terminal:

Esse comando iniciará o projeto (para executá-lo lembre-se de verificar se o Node e o npm estão instalados na sua máquina), primeiro vai ser solicitado para definir um nome para o projeto, se você já tiver criado uma pasta para ele, basta digitar ponto (.) que será usada a pasta atual; o segundo parâmetro a ser escolhido é o framework, selecione React e em seguida JavaScript.

Depois de iniciar o novo projeto React, instalaremos as dependências necessárias com o seguinte comando:

Agora, quando for colocar o servidor para rodar durante o desenvolvimento, o comando que utilizaremos será este:

Ao executar, já podemos ver o aplicativo funcionando acessando no navegador o endereço 127.0.0.1:5173, com o React configurado, já podemos criar um aplicativo web modificando os arquivos dentro das pastas src e public.

Agora basta configurar o Tailwind para estilizar o app, primeiro vamos executar os seguintes comandos respectivamente para instalar as bibliotecas necessárias:

Feito isso, vamos atualizar o arquivo tailwind.config.cjs com o seguinte conteúdo, que vai permitir a associação com arquivos do tipo JSX que o React utiliza:

Na pasta src, dentro do arquivo index.css adicionamos no início estas linhas de código para importar as classes do Tailwind:

Por fim, criamos um arquivo chamado postcss.config.cjs dentro da pasta inicial do projeto e colocar nele os plugins que queremos, o Tailwind e o autoprefixer:

O postcss que configuramos por último é uma ferramenta que consegue pegar um arquivo CSS e converter para uma árvore com sintaxe abstrata, permitindo dessa forma, que suas interfaces se adaptem a diferentes navegadores.

Chegando neste ponto, já temos o ambiente para desenvolvimento com React e Tailwind configurado, agora vamos verificar se a instalação de tudo está correta e em seguida desenvolver um simples projeto para exercitar as habilidades com estas tecnologias.

Exclua o que estiver dentro da pasta assets em src, o arquivo App.css e o conteúdo dentro do arquivo App.jsx, eles são um exemplo que o React já traz por padrão, mas nós começaremos do início. Dentro deste último arquivo, importe o módulo React e crie uma constante que receberá uma função do tipo arrow chamada App, que retornará uma simples div e em seguida exporte esta função:

Agora dentro da div, criamos uma tag h1 com o texto Hello World e o className vai ser bg-black text-green-500:

Ao executar, você verá no seu navegador uma tela branca com uma caixa preta no topo e um texto em verde escrito Hello World, o que significa que tudo está configurado e funcionando corretamente.

Essa função que criamos é um componente React, o className que colocamos dentro da tag h1 é o mesmo que o nome da classe que colocamos no HTML normalmente, a diferença é que o React tem essa sintaxe para não confundir com a criação de uma classe em JavaScript que utiliza a palavra reservada da linguagem class.

Os parâmetros que colocamos dentro do nome da classe para estilizar o texto, o bg-black que vem de background-black e o text-green-500 que é para deixar o texto com a cor verde, são as classes CSS do Tailwind e caso você esteja utilizando o VS code como editor de código, pode adicionar a extensão Tailwind CSS IntelliSense para ver as diversas outras classes disponíveis enquanto programa, o que facilita bastante o trabalho, pois o Tailwind possui muitas classes.

Criando o projeto

A seguir criaremos um projeto que será uma lista de tarefas, onde podemos adicionar novas tarefas, excluir quando forem cumpridas e teremos ainda um contador que vai marcar quantas ainda faltam.

Primeiro vamos criar um novo arquivo chamado todoList.jsx, ele será um componente React que iniciaremos programando da mesma forma que o App.jsx, importaremos o React, depois criaremos uma constante que será uma função arrow e retornará HTML, depois exportaremos essa função.

Essa função receberá como parâmetro uma lista de tarefas e a partir dessa lista, podemos fazer um map para gerar um novo componente tarefa para cada elemento dentro da lista:

Note que para adicionar um código JavaScript no meio do HTML, é necessário colocar entre chaves e, cada elemento em um map precisa ter uma propriedade key, que será por onde o React se orientará quando for atualizar os componentes. Já a propriedade tarefa que passamos é o respectivo item da lista que será usado para gerar o texto.

Agora criaremos o arquivo Tarefa.jsx para gerar o componente que importamos dentro de ToDoList.jsx, ele será iniciado da mesma forma que os outros componentes, a diferença é que o parâmetro que a função receberá  o props e a partir dele acessaremos as propriedades que foram passadas, que neste caso o que queremos é o nome da tarefa para incluir dentro de uma tag h3:

Feito isso, já temos o código da lista e de cada elemento dentro da lista em componentes separados, agora importamos esse componente dentro do arquivo App.jsx e programamos a lógica para gerar a lista automaticamente.

Primeiro importamos o ToDoList e colocamos as tags do contador, que será um h2 com a quantidade de tarefas a fazer, um input do tipo texto para digitar uma nova tarefa, um botão para adicionar a tarefa, outro para limpar a lista e, por fim, vamos adicionar a tag da lista de tarefas.

Para fazer com que um componente altere seus dados, precisamos utilizar as funções do React conhecidas como hooks que atualizarão os dados, o primeiro que utilizaremos será o useState, que recebe como parâmetro o estado inicial e retorna uma lista contendo o valor atual e uma função para alterar o estado.

Vamos criar uma constante que vai ser a desestruturação de uma lista contendo a variável tarefas e setTarefas que será a função para modificar o estado, isso será definido para a função useState e dentro dela haverá uma lista de strings que serão os valores padrão.

O valor dessa variável será passada como propriedade do componente ToDoList para que ele crie a lista:

Depois precisamos atribuir a função para que o botão de Limpar lista apague as tarefas já concluídas, para isso vamos definir a propriedade onClick que receberá uma função arrow, que vai chamar o setTarefas para definir o valor da variável tarefas como uma lista vazia:

Para criar o contador, basta substituir o zero na tag h2 por tarefas.length, lembrando de passar o código Javascript entre chaves, assim o número de tarefas que ainda faltam serem concluídas será mostrado na tela:

Agora para que esta simples aplicação fique pronta, é necessário uma forma de passar o valor que está no campo de input para a lista de tarefas, para isso utilizaremos outro hook do React chamado useRef, que serve para criar uma variável que não muda quando o componente é atualizado.

Vamos começar importando o useRef, em seguida criaremos uma constante dentro da função App e em seguida vamos colocar esse hook no parâmetro ref do input:

Agora basta criar uma função para adicionar uma nova tarefa e acrescentar ao botão na propriedade onClick:

Essa função receberá o evento, pegará o valor que está na variável atrelada ao input, verificará se ela não é vazia, juntará os elementos da lista de tarefas e adicionará a nova tarefa no final, depois muda o valor do input para null. Feito isso, a parte funcional da aplicação está pronta, executando você já consegue adicionar novas tarefas e limpar a lista.

Por fim, é só adicionar os estilos como você preferir. Abaixo deixo listado algumas das classes Tailwind que podem ser utilizadas para melhorar a parte visual da nossa aplicação e um exemplo de uma das forma que a nossa aplicação pode ser estilizada:

• bg-yellow-700 → cor do background (do fundo), a respectiva cor e a intensidade.
• h-screen → mudar a altura de um componente para o tamanho da tela.
• flex flex-col → definir o layout como flex e ajustar os elementos em forma de coluna.
• flex flex-row → definir o layout como flex e ajustar os elementos em forma de linha.
• flex items-center justify-center → alinhar os elementos no centro na vertical e na horizontal.
  

No arquivo App.jsx, foram feitas algumas alterações adicionando divs e os nomes das classes:

No arquivo ToDoList.jsx mudamos a div para ul e adicionamos o nome da classe:

Já no arquivo Tarefa.jsx a tag h3 foi substituída por li e as seguintes classes Tailwind foram adicionadas:

Salvando tudo e executando, esse será o resultado que teremos:

Conclusão

Usar o React e o Tailwind  CSS juntos permite a nós desenvolvedores criarmos aplicativos web rápidos e responsivos com design consistente. A aplicação que desenvolvemos neste artigo poderia ser melhorada adicionando uma conexão a um banco de dados no JavaScript para salvar as tarefas, adicionando uma forma de marcar as tarefas que já foram cumpridas e definir prazos.

Em conclusão, o React e o Tailwind CSS têm abordagens complementares para a criação de interfaces de usuário e estilização de elementos fazem delas uma excelente escolha para qualquer projeto de desenvolvimento web.

Até logo!